Creating circles in SVG:
Today I’m going to teach you how you can create circles using SVG. In this tutorial, you’ll find SVG circles examples with explanation. Let’s start without further a do.
SVG Circle Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200"> <circle r="120" cy="97" cx="497" stroke-width="5" stroke="#bd0040" fill="#E91E63" /> </svg>
Let’s understand above SVG circle code properties one by one.
Below properties are used to create a scalable vector graphic circle:
cx & cy:These are known as the center position of the circle or you may call it x and y position of the circle.
r:This mean radius of the circle.
Another SVG Circle Example with Codepen