SVG Shape Generator, Polygons, Stars, Gears & Badges, Free
Pick a shape, dial in the sides, radius and rotation, and watch an exact geometric path draw itself. Copy the SVG or export a transparent PNG. Every shape is pure math, resolution-independent, and generated entirely in your browser.
What is the svg shape generator?
The SVG Shape Generator draws crisp geometric shapes including polygons, stars, gears, hearts, sunbursts, hexagons and badges. Adjust sides or points, radius, inner radius and rotation, and choose solid or gradient fill. Copy the pure-math SVG or export a transparent PNG, free and entirely in your browser.
The GigAI SVG Shape Generator builds precise geometric vector shapes from a handful of numbers. Choose a type, a regular polygon, an n-point star, a mechanical gear, a heart, a radiating sunburst, a hexagon or a triangle: then set how many sides or points it has, how big its outer radius is, how deep the inner notches cut (for stars and gears), and how far it's rotated. Because the geometry is computed from trigonometry rather than hand-drawn, the result is a single, clean <path> inside a square viewBox: tiny in bytes, perfectly symmetrical, and sharp at any scale from a 16px favicon to a wall-sized banner. Fill it with a flat brand color or a two-stop diagonal gradient emitted as a real SVG <linearGradient>, preview it on a checkerboard, light or dark surface, and step backwards and forwards through every shape you've tried with full undo/redo. When you're happy, copy the markup straight into React, a CSS mask or Figma, download a scalable.svg, or rasterise a transparent.png at 2× for tools that won't take vectors. Everything runs locally: the geometry, the gradient and the PNG rasteriser all execute in your browser, so it works offline and never sees your colors or where the shape is going.
- Difficulty:
- Easy
- Typical time:
- ~10s
- Processing:
- 100% browser processing
Last updated
How to use the svg shape generator
- 1
Choose a shape type
Pick polygon, star, gear, heart, sunburst, hexagon or triangle. Start from a preset if you want a proven look to tweak.
- 2
Dial in the geometry
Set the sides or points, the outer radius, the inner-radius notch depth (for stars and gears) and the rotation. The preview redraws live.
- 3
Pick a fill
Choose a solid color or switch to gradient and set two stops. Preview it on checkerboard, light or dark to check it against your real background.
- 4
Copy or download
Copy the SVG markup, download a scalable .svg, or export a transparent .png at 2×. Everything is generated locally in your browser.
What SVG Shape Generator includes
Seven parametric shape types
Polygon, star, gear, heart, sunburst, hexagon and triangle: each drawn from trigonometry, so every edge is exact and every shape is perfectly symmetrical.
Sides, radius, notch & rotation
Dial the number of sides or points (3–60), the outer radius, the inner-radius depth for stars and gears, and the rotation angle. The path redraws the instant you drag.
Solid or two-stop gradient
Fill with a flat brand color or a diagonal two-stop gradient using native color pickers. The gradient ships as a real SVG <linearGradient>, not a baked-in raster.
Clean, scalable SVG output
Output is one tidy <path> inside a square viewBox: resolution-independent, tiny, and ready to paste into React, a CSS mask, Figma or a plain <img>.
Transparent PNG export
Rasterise the shape to a transparent PNG at 2× in one click for decks, Canva or email that won't take vectors, all on the browser canvas, nothing uploaded.
Undo, redo, presets & live preview
A big preview on checkerboard, light or dark updates as you drag, with one-click shape presets and full undo/redo through every shape and color this session.
Why use our svg shape generator
Exact shapes without a vector editor
Get a mathematically perfect pentagon, six-point star or hex badge from a few sliders instead of fighting the pen tool in Illustrator, then paste the SVG straight into your build.
One path, every format
Copy the markup for code, download a crisp SVG that scales from favicon to billboard, or export a transparent PNG for tools that can't read vectors, all from the same shape.
Reproducible by design
The geometry is pure math with no randomness, so the same settings always regenerate the identical path. Note the numbers and any teammate rebuilds the exact shape.
Private and offline
The geometry, the gradient and the PNG rasteriser all run on your device. Your brand colors and where the shape is headed never leave the tab.
Built for the way you work
From quick one-off fixes to daily workflows, see how people put this tool to use.
- Frontend developer
Icons, bullets & badges
Generate a hexagon badge, a star rating glyph or a gear settings icon as a clean inline <path>, drop it into a component, and recolor it in CSS. No icon-font dependency.
- Product designer
Section shapes & decoration
Build the geometric accents (sunbursts behind a headline, polygon confetti, a heart for a like state) tuned to the brand palette and handed off as reproducible SVGs.
- Content & social
Deck and post graphics
Export a transparent PNG star or badge for a slide, a story sticker or an email header where a vector isn't accepted, without opening a design app or buying stock shapes.
- Indie hacker
Logo marks & favicons
Prototype a simple geometric logo mark from a rotated polygon or star, download the SVG, and shrink it to a crisp favicon, free and yours to keep iterating.
Supported formats
Everything is processed locally in your browser, your files never leave your device.
- SVG
- PNG
Frequently asked questions
Recommended tools
SVG Blob Generator
Generate smooth, organic SVG blob shapes with sliders for complexity, edge contrast and size, solid or gradient fills, and a seeded re-roll, then copy the SVG or download SVG/PNG. 100% in your browser.
SVG Pattern Generator
Create seamless, tiling SVG background patterns (dots, grid, diagonal lines, cross, chevron, triangles and circles) with tile-size, color and stroke controls, then copy the SVG or ready-to-paste CSS. 100% in your browser.
SVG Gradient Generator
Design linear, radial and conic gradients with draggable color stops and an angle dial, then export a scalable SVG and a ready-to-paste CSS background side by side. Live preview, copy, download SVG/PNG: 100% in your browser.
SVG Optimizer
Minify and clean SVG files in your browser with SVGO, strip editor metadata, round coordinates, drop hidden layers and see the exact bytes and percentage saved. Nothing is uploaded.
SVG to React
Convert SVG to a clean React component in your browser, camelCased attributes, TypeScript or JS, memo, forwardRef and React Native output, with a live preview. Nothing is uploaded.
Image Compressor
Shrink JPG, PNG and WebP images without a visible quality drop. Set the quality yourself, or compress to an exact target size like 100 KB. Free, entirely in your browser.
Common problems, solved
Hit a snag? Here are quick fixes for the issues people run into most.
My star looks like a plain polygon with no points.
The inner radius is set too close to the outer radius, so the notches disappear. Lower the inner-radius slider to make the points sharper and more distinct.
The sides/points slider doesn't change my hexagon or triangle.
Hexagon and triangle are fixed at 6 and 3 sides by definition, so the sides control is ignored for them. Switch to the polygon type to get an arbitrary side count.
My gradient shows as a flat color in another app.
Some tools flatten or drop SVG <linearGradient> defs on paste. If the destination can't render gradients, export the PNG instead, it bakes the gradient into pixels, or keep the fill solid for maximum compatibility.
The PNG looks soft when I scale it up.
PNG is raster, so it only has the pixels you exported. Raise the size before exporting, or better, use the SVG: it's resolution-independent and stays crisp at any scale.
Get the most out of it
For a classic five-point star, use the star type with an inner radius around 40–50% of the outer.
Rotate a polygon or star by half a step (e.g. 36° on a pentagon) to flip whether it points up or sits flat.
Gears read best with 8–12 teeth and a shallow inner-radius notch. Too many teeth turns to noise at small sizes.
Prefer the SVG over the PNG wherever the target accepts it, it's smaller, sharper at any size, and re-colorable in code.
Found the perfect shape? Note the sides, radius and rotation, the same numbers always regenerate it exactly.
What's new
Recent updates and improvements to the svg shape generator.
Initial release, parametric shape generator with polygon, star, gear, heart, sunburst, hexagon and triangle types, sides/radius/inner-radius/rotation controls, solid/gradient fill, live preview and SVG + PNG export.
Added undo/redo across shapes and colors, keyboard shortcuts (copy, download, undo/redo, reset), and one-click shape presets to start from.
Added checkerboard/light/dark preview surfaces and refined the rotation handling so polygons and stars snap cleanly to point-up.
Keep exploring
Problems we solve
Definitions
From the blog
Explore categories
Compare formats
Common tasks
Your privacy is built in
Every shape is computed in your browser from pure geometry: the path, the gradient and the PNG rasterisation all run locally on your device. Nothing is uploaded, stored or logged, so your brand colors and where the shape is headed stay private. It works offline, and closing the tab leaves no trace.
- Runs in your browser
- No uploads
- Nothing stored
Ready to try the svg shape generator?
Free, private and instant. SVG Shape Generator runs right in your browser.