How to create a rainbow using HTML5 ?
In this, we will be talking about how can we create a rainbow using HTML5. To create the rainbow we have to know how the SVG tag works and its attributes.
Approach:
- Firstly, we have to use the width and height attribute of the SVG tag to create the base for the structure of the rainbow.
- Now we will use the circle element to create the structure of the rainbow and fill it with respective colors.
<!DOCTYPE html> < html > < body > <!-- Here the background color is aqua --> <!-- To make the circle 1/2 in order to create the rainbow structure we need to give a height that makes the circle 1/2 --> < svg width = "800" height = "400" style = "background-color: aqua;" > <!-- In order to create the rainbow we have to use the circle element --> <!-- Here we will use circle attribute to properly align the half circle with a radius at correct position --> <!-- Here to make the color red we have to use the attribute fill--> <!-- stroke-width defines the thickness--> < circle cx = "400" cy = "450" r = "400" stroke = "none" stroke-width = "2" fill = "red" /> <!-- r defines the radius of the circle --> < circle cx = "400" cy = "450" r = "300" stroke = "none" stroke-width = "2" fill = "yellow" /> < circle cx = "400" cy = "450" r = "250" stroke = "none" stroke-width = "2" fill = "green" /> < circle cx = "400" cy = "450" r = "200" stroke = "none" stroke-width = "2" fill = "blue" /> < circle cx = "400" cy = "450" r = "150" stroke = "none" stroke-width = "2" fill = "indigo" /> < circle cx = "400" cy = "450" r = "100" stroke = "none" stroke-width = "2" fill = "violet" /> </ svg > </ body > </ html > |
Output:
Contact Us