Splat
Free, no sign-up, runs in your browser.
Fourteen points and randomness at the maximum, which is as irregular as the generator will go. Deliberately at the edge of the usable range — past this the shape stops reading as one object.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 14 |
| Randomness | 100% |
| Smoothness | 120% |
| Seed | 31337 |
What to know
- Maximum randomness, which is capped so the curve still cannot fold through itself.
- Best used large and behind something, where the irregularity becomes texture.
- The heaviest shape in the catalogue at 641 bytes.
What it costs in bytes
This exact shape is 641 bytes as an SVG and 802 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 | 641 B |
| CSS background | 802 B |
| CSS clip-path | 859 B |
| CSS border-radius | 102 B |
The start of the SVG for Splat
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 28.35C110.32 32.66,110.26 51.14,120.6 57.22C130.94 63.3,140.83 53.62,151.72 58.75C162.61 63.88,172.54 71.69,175.04 82.87C177.55 94.05,173.43 106.6,164.24 114.66C155.05 122.73,137.85 117.64,129.09 123.2C120.33 128.76,126.28 132.16,120.46 142.48C…In more detail
The irregularity cap exists because a spline does not stay inside its control points — it bows outward between them, and at enough randomness a lobe can reach far enough to cross a neighbouring span and turn the blob into a bowtie. The limit is set from a sweep of every point count, seed and smoothness the tool allows, rather than from a number that looked about right.
Questions
How do I change Splat once I have it?
Open the generator, click Splat 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 31337 with 14 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.