Swoosh
Free, no sign-up, runs in your browser.
Two points and high smoothness: a single sweeping curve with no repeat at all. The least wave-like wave here, and the one that works best when the divider is doing graphic-design work rather than just separating two colours.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 2 |
| Amplitude | 85% |
| Randomness | 0% |
| Baseline | 52% |
| Layers | 1 |
| Smoothness | 130% |
| Seed | 5 |
What to know
- Two points is the minimum the generator accepts, and gives one rise and one fall.
- Zero randomness, so the curve is a clean mathematical sweep.
- The smallest wave in the catalogue at 246 bytes.
What it costs in bytes
This exact shape is 246 bytes as an SVG and 407 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 | 246 B |
| CSS background | 407 B |
| CSS clip-path | 438 B |
The start of the SVG for Swoosh
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-720 166.4C-564 166.4,-312 166.4,0 166.4C312 166.4,408 166.4,720 166.4C1032 166.4,1284 166.4,1440 166.4L1440 320L-720 320Z" fill="#4f46e5"/></svg>In more detail
Flip this one horizontally and it changes character completely — a swoosh has a direction, and which way it runs should agree with however the eye moves through the section above. That is also why the flip controls are a reflection of the existing curve rather than a regeneration: flipping must not reroll a shape you had already settled on.
Questions
How do I change Swoosh once I have it?
Open the generator, click Swoosh 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 5 with 2 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.