SVG Circle HTML
Table of Contents
The SVG <circle> element is used to create a circle.
In an example below let’s write a code which creates a stylish SVG circle.
Example
<!DOCTYPE html> <html> <head> <title> SVG Circle </title> </head> <body> <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="3" fill="black" /> </svg> </body> </html>
Attributes used in the Code
- The attribute cx defines the x-axis coordinate of the circle’s center.
- And the attribute cy defines the y-axis coordinate of the circle’s center.
- The attribute r defines the radius of the circle.
- Attribute fill is used to fill the circle with any color you choose. If fill attribute is omitted, the circle is filled automatically with black color.
- Attribute stroke is used to style the border of the circle.
SVG Circle Animation
Let’s write a code to animate a Circle by adding CSS to our HTML document. Here we are gonna use Internal CSS method to add CSS to HTML.
In an example below, let’s write a code to create Animated Circle.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100vh;
position: relative;
background-color: blue;
}
svg,
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.logo {
width: 140px;
height: 140px;
background-color: #231f20;
border-radius: 100px;
opacity: 0;
animation: fadeIn 0.75s linear forwards;
animation-delay: 1s;
}
.circle {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: stroke 2s ease-out forwards;
}
@keyframes stroke {
to {
stroke-dashoffset: 0;
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<svg height="200" width="200">
<circle class="circle" cx="100" cy="100" r="95" stroke="green" stroke-width="10" fill= "powderblue" />
</svg>
<div class="logo"></div>
</body>
</html>
NOTE:- The code written inside the <style> element is the CSS code.
SVG Circle Progress Bar
To create a SVG Circle Progress Bar we are gonna use mostly same attributes that we have used while creating a simple SVG Circle. But here we will also add some extra elements like the <span> element. <span> is an inline element which is used to markup a part of text.
In an example below let’s write a code to create a circular progress bar.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Circle progress bar</title>
<style>
*,*:after,*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: arial;
font-size: 16px;
margin: 0;
background: black;
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
}
svg{
width: 200px;
height: 200px;
transform: rotate(-90deg);
overflow: initial;
}
circle{
stroke-width:20px;
fill:none;
}
circle:nth-child(1){ stroke: #fff }
circle:nth-child(2){
stroke: #f00;
position: relative;
z-index: 1;
}
.circle_box:nth-child(1) circle:nth-child(2){
stroke-dashoffset:calc(100 * 6);
stroke-dasharray:calc(100 * 6);
stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 78) / 100);
stroke-position: inside;
}
.circle_box:nth-child(2) circle:nth-child(2){
stroke-dashoffset:calc(100 * 6);
stroke-dasharray:calc(100 * 6);
stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 21) / 100);
stroke: rgb(37, 224, 109);
}
.circle_box:nth-child(3) circle:nth-child(2){
stroke-dashoffset:calc(100 * 6);
stroke-dasharray:calc(100 * 6);
stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 1) / 100);
stroke: rgb(227, 241, 25);
}
.circle_box{
font-size: 36px;
color: #fff;
text-align: center;
}
.circle_box div{
position: relative;
}
.circle_box span{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 40px;
}
</style>
</head>
<body>
<div class="circle_box">
<div>
<svg>
<circle cx="100" cy="100" r="95" />
<circle cx="100" cy="100" r="95" />
</svg>
<span>78%</span>
</div>
<strong>Nitrogen</strong>
</div>
<div class="circle_box">
<div>
<svg>
<circle cx="100" cy="100" r="95" />
<circle cx="100" cy="100" r="95" />
</svg>
<span>21%</span>
</div>
<strong>Oxygen</strong>
</div>
<div class="circle_box">
<div>
<svg>
<circle cx="100" cy="100" r="95" />
<circle cx="100" cy="100" r="95" />
</svg>
<span>1%</span>
</div>
<strong>Other Gases</strong>
</div>
</body>
</html>
The code written inside the <style>...</style> element is the CSS code. CSS is used to style the web page. You can also create circular progress bar without using CSS, but it doesn’t look stylish. Here is how the circular progress bar looks like without adding CSS.
Create SVG Circular Progress Bar Without Adding CSS
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Circle progress bar</title>
(
</head>
<body>
<div class="circle_box">
<div>
<svg>
<circle cx="100" cy="100" r="95" />
<circle cx="100" cy="100" r="95" />
</svg>
<span>78%</span>
</div>
<strong>Nitrogen</strong>
</div>
<div class="circle_box">
<div>
<svg>
<circle cx="100" cy="100" r="95" />
<circle cx="100" cy="100" r="95" />
</svg>
<span>21%</span>
</div>
<strong>Oxygen</strong>
</div>
<div class="circle_box">
<div>
<svg>
<circle cx="100" cy="100" r="95" />
<circle cx="100" cy="100" r="95" />
</svg>
<span>1%</span>
</div>
<strong>Other Gases</strong>
</div>
</body>
</html>
Related Posts
SVG Circle HTML – crus4
