SVG Circle
Learn how the <circle> element draws a perfect circle from a center point (cx, cy) and a radius (r).
Drawing Circles with <circle>
The <circle> element draws a perfectly round shape using just three core attributes: cx and cy for the center point, and r for the radius. Unlike <rect>, a circle has no width or height attribute, since its size is fully described by a single radius value.
Center Point: cx and cy
cx sets the horizontal position of the circle's center, and cy sets the vertical position, both measured from the origin of the SVG's coordinate system. If cx or cy is left out, it defaults to 0, which means an unattributed circle centers itself on the top-left corner of the viewport.
Controlling Size with r
The r attribute sets the circle's radius, the distance from its center to its edge. Unlike cx and cy, r has no default value and is required for the circle to render at all; a radius of 0 or a negative number produces no visible shape.
- cx and cy default to 0 if they are omitted
- r is required; a circle with r='0' or a negative radius is not rendered
- Unlike <rect>, <circle> has no rx/ry since the shape is already perfectly round
- fill-opacity and stroke-opacity can fade a circle independently of the rest of the page
- Nesting circles of decreasing radius at the same center point creates a target or ring effect
Example
<!DOCTYPE html>
<html>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<circle cx='100' cy='100' r='70' fill='#ef4444' />
</svg>
</body>
</html>Example
<!DOCTYPE html>
<html>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<circle cx='100' cy='100' r='70' fill='#22c55e' fill-opacity='0.5' stroke='#166534' stroke-width='6' />
</svg>
</body>
</html>Example
<!DOCTYPE html>
<html>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<circle cx='100' cy='100' r='90' fill='#fde68a' />
<circle cx='100' cy='100' r='60' fill='#fca5a5' />
<circle cx='100' cy='100' r='30' fill='#f87171' />
</svg>
</body>
</html>Exercise: SVG Circle
Which attribute defines the radius of an SVG <circle>?
