Skip to content
Related Articles

Related Articles

How to create a rainbow using HTML5 ?
  • Last Updated : 14 Dec, 2020

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.
filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :