SVG Playground
<ellipse>
Interactive SVG ellipse playground. Adjust radii, 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"> <ellipse cx="100" cy="100" rx="80" ry="50" fill="#ef4444" stroke="#7f1d1d" stroke-width="2" /> </svg>
Attributes
Tweak any value to update the preview live.
About the <ellipse> element
Interactive SVG ellipse playground. Adjust radii, 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 <ellipse> 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.