Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to draw a circle using SVG tag in HTML ?

  • Last Updated : 31 Aug, 2021

In this article, you will learn about SVG basic shape like circle which is among the different shapes of SVG like <rect>, <line>, <ellipse>, <polygon>, etc. So you can easily draw circles using <circle> tag whose parent tag is SVG tag in HTML.

Basically, the <circle> element draws a circle on the screen which is done by the 3 basic parameters which include cx, cy, and r, which are briefly demonstrated further in this article.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

<circle
  cx="x-axis co-ordinate"
  cy="y-axis co-ordinate"
  r="length" >  
</circle>

Attributes:



  •   cx: x-axis co-ordinate of the center of the circle. The default value is 0.
  •  cy: y-axis co-ordinate of the center of the circle.  The default value is 0.
  •   r: Radius of the circle.

Note: cx and cy is the x-axis and y-axis co-ordinate which determines the position of the circle and r is the radius of the circle which determines the size of the circle. Circle rendering will be disabled if its radius is zero.

Example 1:

HTML




<!DOCTYPE html>
<html>
   <body>
      <center>
         <h1 style="color:green">Welcome To GeeksforGeeks</h1>
         <svg height="400" width="400">
            <circle cx="150" cy="150" r="100" stroke="gray" 
               stroke-width="2" fill="green" />
         </svg>
         <svg height="300" width="300">
            <circle cx="150" cy="150" r="100" stroke="green" 
               stroke-width="2" fill="blue" />
         </svg>
      </center>
   </body>
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
   <body>
      <center>
         <h1 style="color:green">Welcome To GeeksforGeeks</h1>
         <svg xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink">
            <!-green circle is towards 80px +ve x-axis with 64px radius->
            <circle cx="80" cy="80" r="64"
               stroke="gray" stroke-width="2" 
               fill="green"  fill-opacity="90%" />
            <!-red circle is towards 170px  +ve x-axis with 64px radius->
            <circle cx="170" cy="80" r="64"
               stroke="black" stroke-width="2" fill="red"
               fill-opacity="70%" />
         </svg>
      </center>
   </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!