SVG Playground

<circle>

Interactive SVG circle playground. Adjust radius, position, fill, stroke and copy the SVG code.

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="60" fill="#3b82f6" stroke="#1e40af" stroke-width="2" />
</svg>

Attributes

Tweak any value to update the preview live.

Center X (cx)100

Horizontal center of the circle

Center Y (cy)100

Vertical center of the circle

Radius (r)60

Radius of the circle

Fill

Stroke

Stroke width2

Related SVG tags