SVG Playground
<circle>
Interactive SVG circle playground. Adjust radius, position, fill, stroke and copy the 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.
Horizontal center of the circle
Vertical center of the circle
Radius of the circle
About the <circle> element
Interactive SVG circle playground. Adjust radius, position, fill, stroke and copy the SVG code.It's part of the standard SVG 1.1/2.0 vocabulary and is supported by every modern browser (Chrome, Firefox, Safari, Edge) plus mobile WebViews — no polyfill needed.
How to use the generator
Drag the sliders or type numeric values to tweak each attribute. The live preview updates instantly, and the SVG code panel below shows the exact markup you'd paste into an HTML page, a React component, or an Adobe Illustrator file. Click Copy to grab the snippet — no signup required, nothing uploaded to a server.
Where this fits
SVG primitives like <circle> are the building blocks for everything you see in our /editor — every chart, icon, and diagram is composed from elements like this one. If you're hand-coding an icon, building a custom infographic, or preparing assets for a presentation, these generators save you from calculating coordinates by hand. Need ready-made vector art instead? Browse the /free-svg-illustrations library or convert a raster image with the /tools/jpg-to-svg-converter. To edit an existing SVG file, open /tools/svg-editor.