Set cx, cy, and r
Use cx and cy for the circle center, then r for radius. A circle with cx="60", cy="60", and r="42" is centered in a 120 by 120 viewBox.
svg circle
SVG circle element reference for cx, cy, and r
The SVG circle element draws a circle from a center point and radius. Use cx and cy to place the center, r to set the radius, then preview the circle inside the viewBox.
Style the circle
Use fill, stroke, stroke-width, opacity, and currentColor for visual states.
Keep the circle in the viewBox
Make sure cx minus r and cy minus r stay above zero, and cx plus r and cy plus r stay inside the SVG coordinate system.
Circle SVG example
<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="42" fill="#0e7c66"/><circle cx="60" cy="60" r="18" fill="white"/></svg>
<circle cx="60" cy="60" r="42" fill="#0e7c66"/>SVG Circle Element - cx, cy, r Examples FAQ
How do you make a circle in SVG?
Use the circle element with cx, cy, and r attributes.
What do cx, cy, and r mean in SVG?
cx is the x coordinate of the center, cy is the y coordinate of the center, and r is the radius.
Why is my SVG circle cut off?
The circle may extend outside the SVG viewBox when its center and radius place part of the shape outside the coordinate system.