How to create or draw a circle using SVG in HTML?

Originally posted here!

To create a circle, you can use the circle element inside the svg element in HTML.

TL;DR

<!-- Create circle in SVG -->
<svg>
  <circle cx="30" cy="30" r="30" />
</svg>

For example, to make a circle with a 30px as its radius length, first we can define the circle element inside the svg element like this,

<!-- Create circle in SVG -->
<svg>
  <circle />
</svg>

But this alone wouldn't show anything on the screen since it doesn't know how to draw the circle on the screen. For that we have to set some attributes on the circle element like:

• the cx attribute, which defines the center of the circle in the x-axis or the x-coordinate.
• the cy attribute, which defines the center of the circle in the y-axis or the y-coordinate.
• the r attribute stands for radius, which defines the length of the radius for the circle to draw.

So it may look like this,

<!-- Create circle in SVG -->
<svg>
  <circle cx="30" cy="30" r="30" />
</svg>

So in the end, we will have a circle drawn to the screen like this,

And we have drawn a circle successfully using SVG in HTML. Yay 🎊!

See the above code live in JSBin.

That's all 😃!

Feel free to share if you found this useful 😃.

---