"<circle>"

Creates a circle centered on cx, cy, with radius r.

• DOM object: SVGCircleElement
• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html#CircleElement

The <circle> element draws a perfect circle: pick a center point and a radius, and SVG renders it. It is one of the simplest Elements: Basic Shapes and is a convenient shortcut for a shape you could otherwise express with "<ellipse>" (by setting rx == ry) or "<path>". Like all basic shapes, circles can be filled with a solid color, a gradient, or a pattern via the fill attribute, and outlined via stroke.

Use <circle> whenever you need a round shape — dots, bullets, pie-chart bases, icon backgrounds, or decorative elements. For an oval shape with independent horizontal and vertical radii, use "<ellipse>" instead.

Attribute	Default	Description
cx	0	Center X coordinate.
cy	0	Center Y coordinate.
r	0	Radius of the circle.