Skip to main content
Toollyz

Search tools

Search for a command to run...

SVG Shape Generator

Pick from 16 common shapes (circle, square, rounded square, triangle, rhombus, pentagon, hexagon, octagon, star, heart, arrow, chevron, speech bubble, lightning, cross, ring). Solid colour or two-stop linear gradient with adjustable angle, optional stroke. Copy SVG markup or download `.svg`. 100% offline.

What is the SVG Shape Generator?

SVG Shape Generator is a library of 16 hand-coded decorative shapes parameterised with a uniform style state. Each shape is a single `<polygon>` or `<path>` element — no nested groups, no embedded text, no external dependencies. Coverage: basic primitives (circle, square, rounded square, triangle, rhombus), regular polygons (pentagon, hexagon, octagon), and useful UI shapes (5-point star, heart with cubic Bezier curves, right arrow, chevron, speech bubble, lightning bolt, plus-cross, evenodd-filled ring). The style state controls fill (solid or two-stop linear gradient with angle), optional stroke (colour + width), and viewBox size (used for proportions only — SVG scales freely once exported). The on-page picker renders every shape as a 64-pixel mini preview so you can compare options at a glance. Output is a complete self-contained `<svg>` with embedded `<linearGradient>` when applicable.

How to use it

  1. Click any shape in the grid to load it.
  2. Toggle Solid vs Gradient fill — gradient stops use the colour pickers below.
  3. Adjust the gradient angle (0-360°) and stroke width.
  4. Click Copy SVG to put the markup on your clipboard, or Download to save as `.svg`.

Benefits

  • 16 shapes covering primitives, regular polygons and UI elements.
  • Solid or two-stop linear gradient with adjustable angle.
  • Optional stroke with colour + width slider.
  • Live grid of mini previews so you can pick a shape visually.
  • Self-contained SVG output — embedded gradient, no external defs.
  • Hand-coded path/polygon for each shape — no SVG parser dependency.
  • Heart uses cubic Bezier curves for a real curved silhouette.
  • Ring uses evenodd fill rule for a true hole-in-the-middle.
  • Settings persist in localStorage.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

Can I edit the shape points by hand?

Copy the SVG, paste into your editor, and tweak the `<polygon points='...'>` coordinates. Every shape is one polygon or path so there's nothing to untangle.

Why polygons instead of paths?

Polygons are simpler and read more naturally for straight-edge shapes. Star, hexagon, arrow etc. all have only straight edges — polygons are the right tool. Heart and ring use paths because they need curves.

How do I add my own custom shape?

Add a new entry to `SHAPES` in `lib/tools/css/svg-shapes.ts` and a new case in `buildBody()`. The grid auto-includes new entries.

Can I export as PNG?

Not directly — SVG is scalable, so you don't need PNG until rendering. Drop the SVG into a browser tab and use 'Save Image As' to rasterise, or use the Lorem Ipsum Image Generator for canvas-rendered shapes.

What's the viewBox size for?

Sets the internal coordinate space — all shape math is normalised to it. The exported SVG scales to any CSS size; the viewBox only affects relative proportions of stroke width and inner padding.

Why is there a 10px inset on most shapes?

Provides room for stroke without clipping at the viewBox edges. Without the inset, a 4px stroke on a 400-unit viewBox would be cut in half along every edge.

How does the ring's hole work?

Two concentric circles in a single path, with `fill-rule='evenodd'`. The evenodd rule fills regions where the winding number is odd — inside the outer circle (count 1) is filled, inside the inner circle (count 2) is not. Hole achieved without two separate elements.

Why no curve-based shapes like a wave or seashell?

Those need Bezier or arc paths that don't fit the polygon-first model. Add them to the library if needed — the engine supports arbitrary path strings via `buildBody`.

Can I use these as React components?

Paste the SVG into a `.tsx` file as JSX (rename `class=` to `className=`) and you're done. They're tiny — most shapes weigh under 200 bytes.

Are my settings saved?

Yes — active shape, fill, stroke and gradient all persist in localStorage under `toollyz:svg-shapes`.

Is anything uploaded?

No. Shape generation runs entirely in your browser.

Related tools

See all image tools