Ripple
Free, no sign-up, runs in your browser.
Eleven points at low amplitude: a fine, regular edge rather than a statement. Good where a divider needs to exist without drawing attention, and the one preset that reads well as a thin strip.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 11 |
| Amplitude | 30% |
| Randomness | 8% |
| Baseline | 55% |
| Layers | 1 |
| Smoothness | 95% |
| Seed | 77 |
What to know
- Low amplitude keeps the section below it from losing height.
- Many points means many cubic segments, so this is the heaviest wave in the catalogue at 655 bytes.
- Almost no randomness, so the repeat is even enough to tile visually across a wide screen.
What it costs in bytes
This exact shape is 655 bytes as an SVG and 816 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 | 655 B |
| CSS background | 816 B |
| CSS clip-path | 847 B |
The start of the SVG for Ripple
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-130.91 159.28C-110.18 161.55,-41.45 168.2,0 173.6C41.45 178.99,89.45 188.64,130.91 193.36C172.36 198.08,220.36 201.74,261.82 203.4C303.27 205.07,351.27 204.33,392.73 203.88C434.18 203.43,482.18 203.29,523.64 200.54C565.…In more detail
This is the preset where the byte counter earns its place. Every extra point is another full cubic segment — three coordinate pairs — so a ripple costs several times a gentle wave for a difference most visitors will never consciously notice. If you like the look but not the weight, try six points with the smoothness raised instead.
Questions
How do I change Ripple once I have it?
Open the generator, click Ripple 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 77 with 11 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.