Pixel edge
Free, no sign-up, runs in your browser.
Twelve points at low amplitude with high randomness, stepped. The result reads as a deliberately pixelated boundary — useful for anything with a retro or technical register where a smooth curve would feel too soft.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 12 |
| Amplitude | 34% |
| Randomness | 66% |
| Baseline | 55% |
| Layers | 1 |
| Smoothness | 100% |
| Seed | 6502 |
What to know
- Many narrow treads at varying heights, which is what gives the bitmap impression.
- The heaviest stepped shape here, because each point adds three line segments rather than one.
- Reproducible from seed 6502 — worth keeping, since high randomness means every seed looks different.
What it costs in bytes
This exact shape is 579 bytes as an SVG and 740 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 | 579 B |
| CSS background | 740 B |
| CSS clip-path | 771 B |
The start of the SVG for Pixel edge
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-120 176.21L-60 176.21L-60 152.82L0 152.82L60 152.82L60 175.77L120 175.77L180 175.77L180 178.33L240 178.33L300 178.33L300 193.7L360 193.7L420 193.7L420 188.55L480 188.55L540 188.55L540 200.14L600 200.14L660 200.14L660 15…In more detail
If this is too busy, the fix is fewer points rather than less amplitude. Dropping to six keeps the blocky character while halving the file, whereas flattening the amplitude just produces a noisy straight line.
Questions
How do I change Pixel edge once I have it?
Open the generator, click Pixel edge 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 6502 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.