Sparkle
Free, no sign-up, runs in your browser.
Four lobes with deep inner radii and moderate smoothness — the four-pointed sparkle used for highlights, AI flourishes and "new" badges. Small enough to sit inline with text.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 4 |
| Randomness | 18% |
| Smoothness | 55% |
| Seed | 702 |
What to know
- Four lobes gives the classic twinkle; it stops reading as a sparkle above six.
- Moderate smoothness keeps the arms concave rather than straight.
- At 408 bytes it is small enough to inline a dozen of them.
What it costs in bytes
This exact shape is 408 bytes as an SVG and 569 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 | 408 B |
| CSS background | 569 B |
| CSS clip-path | 626 B |
| CSS border-radius | 110 B |
The start of the SVG for Sparkle
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 38.45C104.27 38.46,117.56 71.11,123.25 76.75C128.94 82.39,162.23 95.85,162.11 100C161.99 104.15,127.67 115.89,121.98 121.98C116.29 128.07,104.25 166.24,100 166.45C95.75 166.67,81.57 130.44,75.65 124.35C69.73 118.26,35.33 104.37,35.43 100C35.53 …In more detail
Worth generating at a small size and using repeatedly rather than once large. The shape carries no detail that rewards scale, and as an inline accent at sixteen or twenty pixels it does a job no other shape in this catalogue does.
Questions
How do I change Sparkle once I have it?
Open the generator, click Sparkle 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 702 with 4 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.