SVG Shape Generator (Polygon, Star, Badge)

About the SVG Shape Generator (Polygon, Star, Badge)

Build clean vector shapes from a few numbers: regular polygons with any number of sides, stars with adjustable points and inner radius, starbursts, scalloped badges, gears with a centre hole, crosses, single and double arrows, hearts, speech bubbles and spirals. Round the corners with true circular fillets, rotate the shape, and fill it with a solid color, a gradient or just an outline.

Export the result as an SVG file or its path data, as a CSS clip-path: polygon() that turns any element into the shape, or as a transparent PNG at the size you need. Everything is generated in your browser.

Common uses

• Icons and UI decorations: hexagon avatars, star ratings, badges, “new” and “sale” starbursts.
• Cutting images and sections into shapes with clip-path, without extra markup.
• Logos, stickers and illustrations that need exact, editable geometry.
• Laser cutting, vinyl and embroidery templates that need clean vector outlines.

How the shapes are built

A regular polygon puts its corners evenly on a circle (with a flat bottom edge); a star alternates between the outer radius and the inner radius you choose (about 38% gives the classic five-pointed star). A starburst is a star with many short points. A badge joins points on a circle with outward circular arcs whose depth you set. A gear has trapezoid teeth with separate tip and root widths, whose tips and roots are true circular arcs, and its centre hole is a circle cut out with the evenodd fill rule. A spiral is an Archimedean spiral (radius growing evenly with the angle) drawn as a band with cubic Bézier curves; the heart is six cubic curves; the arrow, cross and speech bubble are polygons.

The path data uses the commands of SVG 2 path data: M and L for straight edges, A for circular arcs, C for curves and Z to close.

Rounded corners that stay round

Rounding replaces each corner with a circular arc that touches both edges. Where two edges meet at an angle θ, an arc of radius r touches them at a distance t = r ÷ tan(θ/2) from the corner. The rounding percentage sets t as a share of the most a corner can take — half of its shorter edge — so neighbouring arcs never overlap, and the same percentage gives matching corners on a regular shape. At 100%, a square becomes a circle.

On a gear, a corner joins a straight flank to the circular tip or root, so its fillet touches the flank and that circle; the percentage is a share of the largest fillet that keeps to its half of the flank and of the arc. At 100% on both, the teeth become smooth waves.

Using the CSS clip-path

CSS clip-path: polygon() (CSS Shapes 1) accepts only straight edges, so curves and rounded corners are traced with straight segments that stay within 0.06% of the canvas size of the true curve (a quarter of a pixel on a 400 px canvas). Coordinates are percentages of the element’s box, so the shape scales with the element; the snippet sets an aspect-ratio that matches your canvas. Shapes with a hole use polygon(evenodd, …), with the hole joined to the outline by a zero-width cut. A clip-path cuts out the element’s background, so for an outline or a stroke use the SVG instead.

Limitations

• The CSS polygon() is a close approximation of curved and rounded edges, not an exact copy; use the SVG when curves must be perfectly smooth at large sizes.
• clip-path cannot draw strokes or outlines — those export only as SVG and PNG.
• PNG exports go up to 8,192 px per side, a limit this tool sets so that iPhones and iPads (whose browsers cap a canvas at 8,192 × 8,192 pixels) can make them; phones may still run out of memory above about 4,096 px. The SVG has no size limit.
• With sharp (miter) stroke corners the shape is drawn a little smaller, so that the pointed ends of the stroke stay inside the padding. Corners sharper than about 29° get a bevel instead, the SVG default (stroke-miterlimit 4).
• The canvas is 16 to 4,096 px per side; the shape is scaled to fit it, keeping its proportions.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.