Pebble
Free, no sign-up, runs in your browser.
Five points at moderate randomness, which tends to produce something closer to a river stone than a splash. The most useful blob for anything that needs to read as a solid object rather than a decorative smear.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 5 |
| Randomness | 45% |
| Smoothness | 105% |
| Seed | 404 |
What to know
- Five points gives an odd-numbered silhouette, which avoids the accidental symmetry of six.
- Moderate randomness: irregular, but every lobe is still roughly the same size.
- The closest shape here to what a CSS border-radius can imitate, if you would rather not ship an SVG.
What it costs in bytes
This exact shape is 294 bytes as an SVG and 455 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 | 294 B |
| CSS background | 455 B |
| CSS clip-path | 512 B |
| CSS border-radius | 104 B |
The start of the SVG for Pebble
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 41.28C122.08 40.79,161.83 60.16,167.4 78.1C172.96 96.04,149.18 132.27,131.81 143.78C114.43 155.29,83.98 154.88,68.12 143.87C52.27 132.87,35.62 98.85,41.2 80.89C46.78 62.94,77.92 41.76,100 41.28Z" fill="#4f46e5"/></svg>In more detail
A pebble is the one blob worth comparing across export formats. As an SVG it is exact; as a border-radius it is an approximation with four corners, which cannot reproduce five lobes and should not pretend to. The border-radius output is offered as its own shape rather than as the same shape in another format, because presenting it otherwise would be a lie you only discover after shipping.
Questions
How do I change Pebble once I have it?
Open the generator, click Pebble 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 404 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.