Stair step
Free, no sign-up, runs in your browser.
Each span runs horizontally to the midpoint, turns vertically, then continues — a stair profile. The turn happens at the midpoint rather than at the point itself, which is what keeps the treads even.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 5 |
| Amplitude | 60% |
| Randomness | 18% |
| Baseline | 52% |
| Layers | 1 |
| Smoothness | 100% |
| Seed | 1111 |
What to know
- Right angles only, so it sits well against a grid-based layout.
- Fewer points means wider, bolder treads; more points approaches a jagged line.
- At 358 bytes it costs about the same as a smooth wave through the same points.
What it costs in bytes
This exact shape is 358 bytes as an SVG and 519 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 | 358 B |
| CSS background | 519 B |
| CSS clip-path | 550 B |
The start of the SVG for Stair step
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 118.84L-144 118.84L-144 177.26L0 177.26L144 177.26L144 214.27L288 214.27L432 214.27L432 202.99L576 202.99L720 202.99L720 140.25L864 140.25L1008 140.25L1008 117.08L1152 117.08L1296 117.08L1296 171.17L1440 171.17L1440…In more detail
Stepping at the midpoint is the detail that makes this work. Turning at the point itself would make every other tread twice as wide as its neighbour, which reads as a rendering fault rather than as a design — and it is the version you get from the obvious implementation.
Questions
How do I change Stair step once I have it?
Open the generator, click Stair step 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 1111 with 5 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.