Layered waves
Free, no sign-up, runs in your browser.
Three curves drawn from the same seed at different phases, each sitting slightly lower and carrying slightly less opacity. Sharing the seed is the point — layers from unrelated seeds look like three waves that happen to overlap, while phase shifts of one wave look like depth.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 5 |
| Amplitude | 62% |
| Randomness | 22% |
| Baseline | 42% |
| Layers | 3 |
| Smoothness | 100% |
| Seed | 3311 |
What to know
- Opacity increases toward the front, so the stack reads as distance rather than as three flat sheets.
- Each layer is a separate path, so you can recolour them individually after pasting.
- Three paths cost 898 bytes together — still less than a small PNG of the same thing.
What it costs in bytes
This exact shape is 898 bytes as an SVG and 1,071 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 | 898 B |
| CSS background | 1,071 B |
| CSS clip-path | 544 B |
The start of the SVG for Layered waves
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-…In more detail
Layers are the cheapest way to make a flat section divider look designed, and the most commonly overdone. Two is usually enough; at five the back layers are so washed out that they add bytes without adding depth. If you want more separation, widen the gap between the baselines rather than adding another layer.
Questions
How do I change Layered waves once I have it?
Open the generator, click Layered waves 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 3311 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.