How to create circle in SVG?

By Gulshan Saini
Published in HTML
June 03, 2020
1 min read

In previous tutorial we learned how to create a rectangle shape using SVG. In this tutorial, we are going learn how to create a circle using SVG element.

So let’s get started.

Creating circle shape

To create a circle, first, we create a blank SVG document - this is going to be our canvas to draw things on it.

// content goes here

Next, we provide width and height to the SVG element. I am setting the width to 300 and height to 300.

<svg width="300" height="300">
// content goes here


// content goes here

Our, SVG element is ready however we do not see anything in the output above. Let’s give SVG element a background color just to make it visible on the screen.

<svg width="300" height="300" style='background-color: #90a5a3;'>
// content goes here


// content goes here

Awesome, our SVG element is ready and we are ready to create circle shape inside it.

SVG comes with basic shape elements and circle is one of them. circle accepts following geometry properties:

  • cx - coordinate position of center of circle on x-axis
  • cy - coordinate position of center of circle on y-axis
  • r - radius of circle

Let’s use the circle shape element along with cx, cy and r properties to create a circle shape

<svg width="300" height="300" style='background-color: #90a5a3;'>
  <circle cx="100" cy="100" r="50"/>


  • cx="100" will shift the circle to right on x-axis
  • cy="100" will shift the circle from top on y-axis
  • r="50" will set the radius of circle


Wow, we can see the circle element in the output above with the default fill color of black. If we want the circle to have the same size as of SVG element, we can adjust the width and height properties accordingly.

I don’t like the black background color so let’s change that.

Change background color

To change the background color of the rectangle shape we need to use fill property.

How about giving it a slight green color #376d7b

<svg width="300" height="300" style='background-color: #90a5a3;'>
  <circle cx="100" cy="100" r="50" fill="#376d7b"/>


Circle looks great!!

I hope you enjoyed the tutorial.


  • SVG circle shape can be used to create circle
  • circle radius can be set using r property
  • circle position on canvas can be set using cx and cy property
  • circle element background color can be changed by setting fill color


Previous Article
How to create rectangle in SVG?

Related Posts

How to create rectangle in SVG?
June 02, 2020
2 min
Gulshan Saini

Gulshan Saini

Fullstack Developer



Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media