How to Create Circles using SVG?

Last updated on: by Digamber

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


I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.