Hexagon
Free, no sign-up, runs in your browser.
Six points, straight edges, and the randomness at zero — which makes every radius identical and the result a mathematically regular hexagon. The degenerate case of the blob generator, and a genuinely useful one.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 6 |
| Randomness | 0% |
| Smoothness | 100% |
| Seed | 1 |
What to know
- Zero randomness means a perfect regular polygon, not an approximation.
- Change the point count for any other regular shape: three for a triangle, eight for an octagon.
- The smallest shape in the catalogue at 151 bytes.
What it costs in bytes
This exact shape is 151 bytes as an SVG and 312 bytes as a CSS background — the data URI is larger because percent-encoding costs three characters for every character it escapes. Both figures are for the shape shown above, at two decimal places of coordinate precision.
| Format | Size |
|---|---|
| SVG | 151 B |
| CSS background | 312 B |
| CSS clip-path | 369 B |
| CSS border-radius | 94 B |
The start of the SVG for Hexagon
<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>In more detail
This preset exists to make a point about the controls: the randomness slider at zero is not a disabled generator, it is the regular polygon generator. Every setting in this tool is meant to be meaningful across its whole range, and a slider whose minimum produces something useless would be a slider with a dead end on it.
Questions
How do I change Hexagon once I have it?
Open the generator, click Hexagon in the preset row, then drag anything. The preset is a starting point rather than a lock — every slider stays live, and the seed box takes a word if you would rather name your shape than number it.
Will it look the same next time?
Yes, as long as the seed is the same. This one is seed 1 with 6 points. The generator is deterministic, so those settings reproduce this exact curve on any device.
Can I use a different colour?
Yes — colour is applied when you export, not baked into the geometry. The preview above uses the tool default; pick your own in the generator and the SVG, the CSS background and the clip-path all follow.
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.