Crystal
Free, no sign-up, runs in your browser.
Five points at high randomness, joined by straight lines. The strong variation in radius gives long and short edges in the same shape, which is what makes it read as a shard rather than as a regular pentagon.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 5 |
| Randomness | 85% |
| Smoothness | 100% |
| Seed | 1357 |
What to know
- High randomness is what stops this looking like a plain pentagon.
- Five sides reads as deliberate; six starts to read as a hexagon gone wrong.
- Reproducible from seed 1357.
What it costs in bytes
This exact shape is 156 bytes as an SVG and 317 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 | 156 B |
| CSS background | 317 B |
| CSS clip-path | 374 B |
| CSS border-radius | 108 B |
The start of the SVG for Crystal
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 20.18L157.74 81.24L142.5 158.5L72.34 138.08L23.94 75.29Z" fill="#4f46e5"/></svg>In more detail
Even at maximum randomness a polygon here cannot cross itself. The points sit at evenly spaced angles with positive radii, so the shape stays star-shaped about its centre no matter what the seed does — a guarantee the curved styles need an explicit cap to maintain, and the polygon gets for free.
Questions
How do I change Crystal once I have it?
Open the generator, click Crystal 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 1357 with 5 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.