Soft blob
Free, no sign-up, runs in your browser.
Six points with low randomness: recognisably a blob, but close enough to a circle that it sits behind content without competing with it. The safe choice for a decorative background shape.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 6 |
| Randomness | 28% |
| Smoothness | 100% |
| Seed | 2048 |
What to know
- Low randomness keeps every lobe a similar size, so it reads as calm.
- Six points is the sweet spot — fewer looks like a rounded polygon, more approaches a circle.
- At 330 bytes it is small enough to inline behind a card without thinking about it.
What it costs in bytes
This exact shape is 330 bytes as an SVG and 491 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 | 330 B |
| CSS background | 491 B |
| CSS clip-path | 548 B |
| CSS border-radius | 110 B |
The start of the SVG for Soft blob
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 33.65C118.88 33.14,151.1 49.98,159.29 65.77C167.49 81.56,159.05 113.2,149.17 128.39C139.29 143.58,116.48 156.87,100 156.92C83.52 156.98,59.27 143.39,50.27 128.71C41.27 114.03,37.71 84.67,46 68.82C54.29 52.98,81.12 34.16,100 33.65Z" fill="#4f46e…In more detail
Blobs are closed curves, which makes the join between the last point and the first a join like any other — but only if the neighbour lookup wraps around. Reusing open-curve code clamps there instead, and the result is a single flat notch in an otherwise round shape. It is the most common defect in generators of this kind, it is invisible until someone scales the blob up, and the test suite checks that seam explicitly on every shape it generates.
Questions
How do I change Soft blob once I have it?
Open the generator, click Soft blob 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 2048 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.