How to Create Circles using SVG?

Last Updated on by in Web Development

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.

circles SVG

SVG Circle Code

<svg xmlns=""
    viewBox="0 0 1000 200">

  <circle r="120" cy="97" cx="497"
      stroke-width="5" stroke="#bd0040"
      fill="#E91E63" />

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