DEV Community

Cover image for How to create or draw a circle using SVG in HTML?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Edited on • Originally published at melvingeorge.me

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

circle svg

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 ๐Ÿ˜ƒ.


Top comments (0)