Open In App

SVG Circle Element

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The SVG <circle> element is used to draw circle. The center point and radius are given.

Syntax:

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

Attributes:

  • cx: x-axis co-ordinate of the center.
  • cy: y-axis co-ordinate of the center
  • r: Radius of the circle.

Example:

html




<!DOCTYPE html>
<html>
    <body>
        <svg width="200" height="200">
            <circle cx="80" cy="80" r="50" 
                    stroke="black" 
                    stroke-width="2" 
                    fill="grey" />
        </svg>
    </body>
</html>


Output:

Example: Change the opacity

html




<!DOCTYPE html>
<html>
    <body>
        <svg width="200" height="200">
            <circle cx="80" cy="80"
                    r="50" stroke="black" 
                    stroke-width="2" 
                    fill="grey"
                    opacity="0.5" />
        </svg>
    </body>
</html>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads