Star burst
Free, no sign-up, runs in your browser.
Twelve points alternating between an outer and an inner radius, with the smoothness turned down so the points stay sharp. Classic star geometry, generated rather than drawn, so the number of points and their irregularity are both yours to set.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 6 |
| Randomness | 12% |
| Smoothness | 35% |
| Seed | 700 |
What to know
- Six lobes means twelve points: one out, one in, all the way round.
- Low smoothness keeps the tips sharp; raise it and the star becomes a flower.
- Reproducible from seed 700.
What it costs in bytes
This exact shape is 551 bytes as an SVG and 712 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 | 551 B |
| CSS background | 712 B |
| CSS clip-path | 769 B |
| CSS border-radius | 110 B |
The start of the SVG for Star burst
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 40.29C101.9 40.39,112.74 70.84,115.86 72.52C118.98 74.2,152.54 67.52,153.49 69.12C154.43 70.72,132.19 96.43,132.12 100C132.06 103.57,153.39 128.71,152.42 130.26C151.44 131.81,118.42 124.64,115.36 126.6C112.3 128.57,101.81 163.92,100 163.96C98.1…In more detail
The star and the flower below are the same twelve points joined two different ways, which is why smoothness is the control that separates them rather than a mode switch. It also means you can stop anywhere between the two — a star with slightly softened tips is a shape neither preset gives you on its own.
Questions
How do I change Star burst once I have it?
Open the generator, click Star burst 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 700 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.