Flower
Free, no sign-up, runs in your browser.
The same alternating radii as a star, but with the smoothness at maximum so every point becomes a rounded petal. The result is botanical rather than geometric, and it works well large and pale behind content.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 6 |
| Randomness | 10% |
| Smoothness | 150% |
| Seed | 701 |
What to know
- Maximum smoothness turns each spike into a petal.
- Six petals is the most flower-like; four reads as a clover, ten as a daisy.
- At 557 bytes it is the most detailed shape here, because twelve points each carry a cubic segment.
What it costs in bytes
This exact shape is 557 bytes as an SVG and 718 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 | 557 B |
| CSS background | 718 B |
| CSS clip-path | 775 B |
| CSS border-radius | 104 B |
The start of the SVG for Flower
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 37.57C108.24 37.5,102.78 63.66,116.56 71.31C130.34 78.96,151.28 61,155.12 68.18C158.96 75.35,131.93 84.08,131.94 100C131.95 115.92,159.03 124.73,155.15 131.84C151.28 138.96,130.22 121.26,116.43 128.46C102.64 135.66,108.05 160.93,100 160.64C91.9…In more detail
This is the most expensive shape in the catalogue, and the byte counter makes that visible before you ship it. If you want the look for less, drop to four petals: it halves the cost and at the sizes a background shape is usually used, the difference is hard to see.
Questions
How do I change Flower once I have it?
Open the generator, click Flower 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 701 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.