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: