Bubble
Free, no sign-up, runs in your browser.
Twelve points with randomness turned low, which produces something almost circular but visibly hand-made. Good where a perfect circle would look sterile but a blob would look too playful.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 12 |
| Randomness | 20% |
| Smoothness | 100% |
| Seed | 7211 |
What to know
- Many points at low randomness converges toward a circle with a slow wobble.
- The most expensive blob here at 559 bytes, because every point adds a cubic segment.
- If you want this look cheaply, use six points and lower the randomness instead.
What it costs in bytes
This exact shape is 559 bytes as an SVG and 720 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 | 559 B |
| CSS background | 720 B |
| CSS clip-path | 777 B |
| CSS border-radius | 106 B |
The start of the SVG for Bubble
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 36.37C110.36 36.38,121.78 40.94,131.07 46.18C140.36 51.42,150.78 58.85,155.74 67.82C160.71 76.79,160.7 89.18,160.87 100C161.04 110.82,161.46 123.37,156.74 132.76C152.02 142.15,141.99 151.34,132.53 156.35C123.08 161.35,110.54 163.31,100 162.79C8…In more detail
This preset is the clearest illustration of a trade this tool tries to make visible: twelve points cost roughly twice the bytes of six, and at low randomness the difference between them is a wobble most people will never consciously register. The byte counter sits under the output box precisely so that choice gets made deliberately rather than by default.
Questions
How do I change Bubble once I have it?
Open the generator, click Bubble 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 7211 with 12 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.