Skip to content
Related Articles

Related Articles

SVG Circle
  • Difficulty Level : Basic
  • Last Updated : 17 Aug, 2020

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:




<!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 opecity




<!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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :