- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a rainbow using HTML5
Overview
The task is to create a beautiful rainbow using the HTML5 version. The rainbow consists of the seven colors, these seven colors are Violet, Indigo, Blue, Green, Yellow, Orange and Red. These colors are arranged in the bottom-up approach. So to achieve this task we will use the <svg> Scalable Vector Graphics tag which helps us to create the graphics shape inside a HTML page. Inside the svg element we have several elements by which we can draw the shape. These tags are: rect, circle, ellipse, line, polyline, polygon and path.
Syntax
The syntax used to create the rainbow is −
<svg width="" height=""><svg> <circle cx="" cy="" r="" stroke="" fill="" />
The width and height of svg is set, which is the frame of the rainbow.
The circle tag contains four attributes cx, cy, r and fill where cx is the position of the current element on the horizontal axis of the web page, cy is the position of the current element on the vertical position on web page, r represent the radius of the circle which is the half of the circumference and fill attributes set the color of the circle.
Algorithm
Step 1 − Create a HTML boilerplate in a text editor.
Step 2 − Create a div container with height and width, now insert the svg tag element and set the width and height of it as a parent container.
<svg width="500" height="150"></svg>
Step 3 − Insert the shape tag element in the svg tag and add attributes to it to set the horizontal, vertical, radius and color of the circle.
<circle cx="150" cy="150" r="140" stroke="" stroke-width="0" fill="red" />
Step 4 − Repeat step 3 seven times to make the seven colors of the rainbow.
<circle cx="150" cy="150" r="140" stroke="" stroke-width="0" fill="red" /> <circle cx="150" cy="150" r="120" stroke="none" stroke-width="1" fill="orange" /> <circle cx="150" cy="150" r="100" stroke="none" stroke-width="1" fill="yellow" /> <circle cx="150" cy="150" r="80" stroke="none" stroke-width="1" fill="green" /> <circle cx="150" cy="150" r="60" stroke="none" stroke-width="1" fill="blue" /> <circle cx="150" cy="150" r="40" stroke="none" stroke-width="2" fill="indigo" /> <circle cx="150" cy="150" r="20" stroke="none" stroke-width="1" fill="violet" />
Step 5 − Rainbow is created successfully.
Example
In the given example we have created the rainbow with the help of svg tag and the most important tag is a circle by positioning the center to the bottom makes the circle semicircle for the rainbow.
<html>
<head>
<title>Rainbow</title>
</head>
<body>
<div style="margin: auto;width: fit-content;">
<svg width="500" height="150">
<circle cx="150" cy="150" r="140" stroke="" stroke-width="0"
fill="red" />
<circle cx="150" cy="150" r="120" stroke="none" stroke-width="1"
fill="orange" />
<circle cx="150" cy="150" r="100" stroke="none" stroke-width="1"
fill="yellow" />
<circle cx="150" cy="150" r="80" stroke="none" stroke-width="1"
fill="green" />
<circle cx="150" cy="150" r="60" stroke="none" stroke-width="1"
fill="blue" />
<circle cx="150" cy="150" r="40" stroke="none" stroke-width="2"
fill="indigo" />
<circle cx="150" cy="150" r="20" stroke="none" stroke-width="1"
fill="violet" />
</svg>
<h1>Rainbow using HTML5</h1>
</div>
</body>
</html>
Conclusion
The Scalable Vector Graphics provides the quality of components without degrading the quality of the component. In the above example the svg acts as a frame in which the inside the graphics elements are created. The position of the circle in horizontal and vertical axis are less than the width and height of the svg frame. The default position or the value of cx and cy is 0.
518 Views
