Deep wave
Free, no sign-up, runs in your browser.
Three points and near-full amplitude, which gives one deep trough and a lot of colour below it. Use it where the divider is meant to be the transition rather than a detail at the edge of one.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 3 |
| Amplitude | 92% |
| Randomness | 18% |
| Baseline | 50% |
| Layers | 1 |
| Smoothness | 110% |
| Seed | 820 |
What to know
- Three points produces a single clear dip rather than a repeating pattern.
- High amplitude eats vertical space, so give the section below it room to breathe.
- Reproducible from seed 820 — note it down if you need the same curve on another page.
What it costs in bytes
This exact shape is 282 bytes as an SVG and 443 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 | 282 B |
| CSS background | 443 B |
| CSS clip-path | 474 B |
The start of the SVG for Deep wave
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-480 80.61C-392 97.56,-176 145.02,0 173.07C176 201.12,304 252.99,480 233.6C656 214.21,784 82.6,960 67.28C1136 51.96,1352 134.87,1440 150.04L1440 320L-480 320Z" fill="#4f46e5"/></svg>In more detail
A deep wave is the easiest shape to make look wrong, because at full amplitude the curve has to bow a long way and a flat spot where it meets the edge is immediately visible. The generator samples a point beyond each edge of the canvas and lets the viewBox crop it, so the motion continues off screen rather than terminating at the boundary — which is what makes this read as a section of a longer wave rather than a self-contained squiggle.
Questions
How do I change Deep wave once I have it?
Open the generator, click Deep wave 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 820 with 3 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.