crus4

crus4

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

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 Ellipse

How to Add CSS to HTML

Add JavaScript to HTML

SVG Circle HTML – crus4