Skip to content
Related Articles

Related Articles

Improve Article

How to draw a circle using SVG tag in HTML ?

  • Last Updated : 31 Aug, 2021
Geek Week

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.

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:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :