Organic wave
Free, no sign-up, runs in your browser.
Seven points with randomness turned most of the way up, so the curve wanders instead of repeating. It reads as drawn rather than computed, which is exactly what a regular sine wave cannot do.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 7 |
| Amplitude | 70% |
| Randomness | 85% |
| Baseline | 50% |
| Layers | 1 |
| Smoothness | 100% |
| Seed | 9142 |
What to know
- High randomness means the seed matters — change it and you get a genuinely different curve, not a shifted one.
- Still perfectly smooth: randomness moves the points, it does not affect how the curve passes through them.
- Shuffle until something looks right, then write down seed 9142 to keep it.
What it costs in bytes
This exact shape is 478 bytes as an SVG and 639 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 | 478 B |
| CSS background | 639 B |
| CSS clip-path | 670 B |
The start of the SVG for Organic wave
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-205.71 191.31C-171.43 178.3,-68.57 110.51,0 113.21C68.57 115.91,137.14 202.67,205.71 207.53C274.29 212.39,342.86 145,411.43 142.35C480 139.71,548.57 197.9,617.14 191.66C685.71 185.41,754.29 115.82,822.86 104.89C891.43 9…In more detail
The randomness slider blends between a sine and seeded noise rather than switching between them, which matters more than it sounds. Pure sine looks like a CSS demo and pure noise looks like a mistake; everything anyone actually ships sits somewhere between, and a single slider along that line is more useful than two modes that each produce one wrong answer.
Questions
How do I change Organic wave once I have it?
Open the generator, click Organic 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 9142 with 7 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.