SVG Shape Generator
Generate parametric star, polygon, heart, arrow, and speech bubble SVGs — export as markup or PNG.
Loading tools...
How the SVG Shape Generator works
Each shape is computed with plain trigonometry and Bezier curves, entirely in your browser. Stars and polygons place vertices around a circle using cos/sin at evenly spaced angles — stars alternate between an outer and an inner radius (controlled by the inner radius ratio) to create the points. The heart is built from two cubic Bezier lobes mirrored around a center line. The arrow is a shaft rectangle merged with a triangular head, and the speech bubble is a rounded rectangle with a small triangular tail cut into one corner. Adjust the controls and copy the resulting <svg> markup, or export a PNG rendered at 4x scale for crisp raster use.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing a parametric star or polygon without drawing it.
- Getting an arrow or a speech bubble as clean SVG.
- Generating a shape with a specific number of points.
- Producing a shape as SVG or PNG for different destinations.
- Making a decorative shape that scales cleanly.
Frequently Asked Questions
- How is a star's geometry defined?
- Vertices are placed around a circle at evenly spaced angles using cos and sin, alternating between an outer radius and an inner one. The inner-radius ratio is what controls how spiky it looks: around 0.38 gives the classic five-pointed star, and pushing it toward 1 flattens it into a polygon.
- Why do the shapes use a viewBox instead of pixel sizes?
- Because a viewBox makes the SVG resolution-independent — the coordinates describe a 200×200 space that scales to whatever the CSS width says, with no pixellation at any size. Set the display size in CSS and leave the internal geometry alone.
- How is the heart built if it has no vertices?
- From two mirrored cubic Bézier lobes meeting at the bottom point, with a dip at the top centre. Bézier curves are the only reasonable way to express it — a heart has no polygonal description, which is exactly why it is drawn rather than computed like the star and polygon are.
- Why does the stroke look thinner on one side?
- Because SVG strokes are centred on the path by default, so half the width sits outside the shape and gets clipped at the viewBox edge. Either shrink the shape by half the stroke width, or use `paint-order` and a larger viewBox — this is the usual reason a generated icon looks lopsided.
- Should I paste the SVG inline or use it as a file?
- Inline when you want CSS or JavaScript to reach the fill and stroke — an inline shape is real DOM and can be recoloured on hover. A file or data URI when it is purely decorative and never changes, which keeps the markup smaller and lets the browser cache it.
Common errors and gotchas
- Omitting a viewBox, which stops the SVG scaling to its container.
- Leaving a decorative shape without `aria-hidden`, so it is announced by a screen reader.
- Hard-coding a fill rather than using `currentColor`, which prevents styling from CSS.
- Exporting as PNG when the shape would have stayed sharper and smaller as SVG.
- Reusing ids across several inlined shapes, which breaks gradient references.