Skip to content
Related Articles

Related Articles

How to create a rainbow using HTML5 ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • 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.


  • 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>
    <!-- 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" />


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!