SVG Shape Generator
Pick a shape and its settings and get clean SVG markup you can copy or save.
Rounding applies to rectangles; the percentage sets the inner radius of a star. Circles and ellipses ignore it.
What this tool does
An SVG shape generator builds a basic vector shape from a few settings and hands back the markup. Choose circle, ellipse, rounded rectangle, regular polygon or star, then set the canvas size, the fill colour, the stroke colour, the stroke width and the rounding or inner radius percentage. The preview is drawn from real SVG elements, so it matches the markup exactly, and the markup can be copied or downloaded as an .svg file that opens in any browser, editor or design tool.
Builds a circle, ellipse, rounded rectangle, regular polygon or star from your settings.
Takes size, fill, stroke, stroke width and rounding or inner radius as plain inputs.
Copies the SVG markup and downloads it as a ready-to-use .svg file.
Draws the preview from real SVG elements, so the preview and the markup agree.
How to use it
- Pick a shape - circle, ellipse, rounded rectangle, polygon or star.
- Set the canvas size in pixels, and how many sides or points the shape has.
- Choose the fill colour, the stroke colour and the stroke width.
- Adjust rounding or inner radius and watch the preview redraw.
- Copy the markup, or download the .svg file and use it anywhere.
Why use this tool
A logo mark, a diagram node, a badge background and a game sprite are all the same few lines of SVG - and those lines are arithmetic. Hand-writing the points of a hexagon or a five-pointed star means trigonometry on a deadline, and one wrong coordinate ruins the symmetry in a way the eye spots immediately. Setting the size, sides and colours instead lets the geometry be computed while you judge the result by looking at it.
Why we built it
We built this SVG shape generator because every alternative ends in a round trip: drag it out in a design tool, export, open the file, find the path data, tidy it up. Generating the markup directly keeps the output small, readable and free of the transformation groups an editor leaves behind, and the preview is built from the same element the markup contains, so what you see is what copies. The Random Shape Generator scatters shapes for artwork; this one gives you exact control. The SVG to PNG tool converts the finished file when a raster image is what is needed.
To animate the shape afterwards, the CSS Animation Generator writes the keyframes for it.
Who this tool is for
- Developers who need a quick icon, badge or placeholder graphic
- Designers prototyping a mark before opening a full editor
- Students and teachers producing diagrams for a page or a slide
- Anyone who has needed a hexagon and did not want to compute its points
What each shape is made of
| Shape | Drawn as | Settings that apply |
|---|---|---|
| Circle | One centre and one radius | Size, fill, stroke |
| Ellipse | Centre with two radii | Size, fill, stroke |
| Rounded rectangle | Square inset with a corner radius | Size, rounding percentage, fill, stroke |
| Regular polygon | N evenly spaced points on a circle | Sides, size, fill, stroke |
| Star | 2N points alternating outer and inner radius | Points, inner radius percentage, fill, stroke |
A worked example
Load the sample: a hexagon on a 200 pixel canvas with an indigo fill and a dark 4 pixel stroke. The points sit on a circle of radius 90, leaving room for the stroke, and the output reads:
| Measure | Value |
|---|---|
| Shape | Regular polygon, 6 sides |
| Canvas | 200 x 200 |
| Fill | #4f46e5 |
| Stroke | #111827, 4 px |
| Points | 6 |
| Point coordinates | 100,10 177.9,55 177.9,145 100,190 22.1,145 22.1,55 |
What you enter, and what you get back
| Item | Details |
|---|---|
| Shape and count | Circle, ellipse, rounded rectangle, polygon sides or star points. |
| Size and colours | Canvas pixels, fill and stroke hex values, stroke width. |
| Preview | A live rendering of the exact element the markup contains. |
| Result | The SVG markup, copied, or saved as an .svg file. |
Colours are entered as hex values such as #4f46e5. Names like indigo work in the markup too, but hex keeps the preview and the file identical.
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| A note asks for a colour | The fill or stroke box is empty or not a hex value. | Enter a hex colour such as #4f46e5 or #111827. |
| The shape touches the canvas edge | The stroke is wide relative to the size. | Reduce the stroke width, or increase the canvas size. |
| The star looks too thin or too fat | The inner radius percentage is far from 40 to 50. | Set the inner radius percentage near 40 for a classic star. |
| Sides or points seem ignored | The selected shape does not use them. | Switch to polygon or star - circles and ellipses have neither. |
| The downloaded file looks blank elsewhere | An empty or invalid colour was pasted in. | Check the fill value in the copied markup before saving. |
Assumptions and limitations
- It draws five basic shapes with uniform styling - no gradients, filters or compound paths.
- Sides and points are whole numbers within a sensible range, not arbitrary polygons.
- The canvas is square; other aspect ratios need a viewBox change by hand afterwards.
- Colours are flat fill and stroke values - opacity, dashes and line caps are not exposed.
Frequently asked questions
What shapes can this generator make?
A circle, an ellipse, a rounded rectangle, a regular polygon with any number of sides, and a star with any number of points. Each is drawn from size, fill and stroke settings.
How do I get the SVG out?
Copy the markup into your file, or press Download .svg to save a standalone file with the xmlns attribute included, so it opens directly in a browser or editor.
Why are the polygon points precomputed for me?
The points sit on a circle at even angles, which is the trigonometry that usually has to be worked out by hand. The coordinates are rounded to one decimal place so the markup stays readable.
Can I animate the shape afterwards?
Yes. Copy the markup, then use the CSS animation generator for keyframes such as a pulse or a spin, or paste it into the SVG to PNG tool when you need a raster image.
Does the preview match the file I download?
Exactly. The preview element and the generated markup are built from the same values, so the same size, colours and points appear in both.
Is the SVG shape generator free?
Yes, completely free with no account and no watermark on the file. Everything is generated in your browser and nothing is uploaded.