SVG
Free, no sign-up, runs in your browser.
The plain version: an `<svg>` element with one path per layer. Paste it into your markup, or download it as a file and treat it like any other asset. This is the export to use when you can add an element to the page.
A SVG export, trimmed to the first few lines
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z" fill="#4f46e5"/></svg>What to know
- Works everywhere, with no browser-support caveat worth mentioning.
- Each layer is a separate `<path>`, so you can restyle them individually after pasting.
- Waves carry `preserveAspectRatio="none"` so they stretch to any width; blobs keep their proportions.
- No generator comment, no identifying markup, no link back here.
Browser support
Universal. SVG has been supported in every browser anyone still tests against for well over a decade, and nothing in this output uses a recent feature — it is paths and fills.
Size across the presets
Every preset this format can express, measured as the generator emits it. The smallest is Hexagon at 151 bytes; the largest is Layered waves at 898 bytes. Point count is what drives the difference — each extra point adds a full cubic segment of coordinates.
| Format | Size |
|---|---|
| Hexagon | 151 B |
| Crystal | 156 B |
| Faceted gem | 182 B |
| Rounded triangle | 217 B |
| Mountain peaks | 231 B |
| Swoosh | 246 B |
| Sharp zigzag | 264 B |
| Deep wave | 282 B |
| Pebble | 294 B |
| Cloud edge | 295 B |
| Arch cut-out | 319 B |
| Gentle wave | 322 B |
| Soft blob | 330 B |
| Stair step | 358 B |
| Scallop | 382 B |
| Organic blob | 402 B |
| Sparkle | 408 B |
| Organic wave | 478 B |
| Footer wave | 551 B |
| Star burst | 551 B |
| Flower | 557 B |
| Bubble | 559 B |
| Pixel edge | 579 B |
| Splat | 641 B |
| Ripple | 655 B |
| Layered waves | 898 B |
In more detail
The one attribute worth understanding is `preserveAspectRatio`. On a wave it is set to `none`, which lets the shape stretch horizontally to whatever width its container happens to be — that is what makes one divider work on a phone and a widescreen monitor without letterboxing. On a blob it is left alone, because a blob stretched to a container's aspect ratio is just an ellipse with extra steps.
Questions
Which shapes work as SVG?
This format covers Wave, Blob. That is a real constraint rather than a limitation of this tool — where a generator is missing from that list, the format genuinely cannot express it, and offering it anyway would hand you something that silently draws the wrong shape.
How big is a SVG export?
Between 151 and 898 bytes across the 26 presets that support it. Fewer points is the lever that matters; smoothness and colour cost nothing.
Can I edit it by hand afterwards?
Yes. The output is plain text with no generator comment, no identifying markup and no link back here. Change the colours, rename the class, or paste the path into your own SVG — nothing downstream depends on it staying as it was.
Every figure and every shape on this page was produced by running the generator at build time, so it describes the tool you are about to use rather than a version of it that once existed.