Faceted gem
Free, no sign-up, runs in your browser.
The same points a blob would use, joined by straight lines instead of a curve. The flat facets catch light differently from a smooth blob, which is why this reads as cut stone rather than as a liquid shape.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 7 |
| Randomness | 55% |
| Smoothness | 100% |
| Seed | 9090 |
What to know
- Straight edges, so it is dramatically smaller than the equivalent smooth blob.
- Moderate randomness keeps the facets varied without any one dominating.
- At 182 bytes it is among the smallest shapes here.
What it costs in bytes
This exact shape is 182 bytes as an SVG and 343 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 | 182 B |
| CSS background | 343 B |
| CSS clip-path | 400 B |
| CSS border-radius | 110 B |
The start of the SVG for Faceted gem
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 28.66L157.96 53.78L162.15 114.19L122 145.68L75.84 150.18L44.25 112.72L58.68 67.05Z" fill="#4f46e5"/></svg>In more detail
Polygons are the cheapest thing this tool makes. A seven-point polygon is seven coordinate pairs; the same seven points as a closed spline is twenty-one. If you need an organic-ish shape on a page where bytes matter, a polygon at high randomness gets you most of the way for a third of the cost.
Questions
How do I change Faceted gem once I have it?
Open the generator, click Faceted gem 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 9090 with 7 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.