SVG Wave Generator
Design layered section dividers from genuinely organic, seeded curves — not a repeating sine wave — with unlimited stacked layers, per-layer reshaping, and a seamless native drift animation. Runs entirely in your browser.
Building a Wave That Doesn't Look Machine-Made
- Stack 2-3 layers instead of relying on one. A single wave shape, however well-tuned, reads as flat; layering a lighter, higher one behind a darker, lower one is what actually produces a sense of depth.
- Reshape a layer instead of nudging every slider. The dice icon regenerates a fresh random curve for one layer in a click — often faster than manually tuning amplitude and complexity to fix a curve that just doesn't feel right.
- Reserve animation for one layer, not the whole stack. A single drifting layer behind two static ones reads as gentle motion; every layer animating at once usually looks busy rather than calm.
- Keep amplitude modest for a divider meant to sit behind text. A tall, aggressive wave competes with content sitting near it — save higher amplitude for a purely decorative section with nothing layered on top.
Features
Why a Sine Wave Always Looks Like a Sine Wave
A pure sine function repeats one identical shape over and over at a fixed interval, which is exactly the property that makes it mathematically simple and exactly the property that makes it visually recognizable as generated rather than drawn. Real coastlines, hand-sketched dividers, and the wave shapes in most professional design work don't repeat like that — every peak is a slightly different height, every trough a slightly different width. This generator builds each layer from a handful of randomly-seeded points instead, then smooths a continuous curve through them using Catmull-Rom interpolation, which produces exactly that kind of irregular, non-repeating silhouette while still staying perfectly smooth rather than jagged.
The Complexity slider is really controlling how many of those random points exist in the first place — fewer points means each one has more room to swing before the next, producing broad, gentle undulation; more points packs the same amplitude range into smaller, more frequent movements, producing something closer to choppy water than a calm swell. Neither extreme is more "correct" than the other; a hero-section divider sitting behind a large heading usually wants the calmer end of that range, while a footer or a purely decorative background band can afford more visual activity without competing with anything important.
Seeded, Not Random Every Time
"Random" and "reproducible" sound like opposites, but they aren't here — each layer stores a numeric seed, and the same seed run through the same deterministic algorithm always produces the exact same curve. Clicking a layer's reshape button picks a new seed and commits it to that layer's state; from that point on, the shape is fixed and stable, not regenerated on every render or every page reload. This matters in practice: a wave copied into a real project needs to look identical every time the page loads, not shuffle into a new silhouette on a refresh, which a naive Math.random() call inside the render path would actually cause.
An Animation That Needs Nothing But the SVG File Itself
Most animated SVG wave techniques rely on external CSS — a duplicated element, an overflow: hidden container, and a hand-written @keyframes rule kept carefully in sync with the SVG's own dimensions. This generator's animated output skips all of that by using SMIL's animateTransform directly inside the SVG markup: each animated layer is rendered as two copies of the same path positioned one full width apart, both sliding left in perfect sync, so as one copy exits the left edge the other arrives at exactly the position it started from. The loop point is invisible, and the entire effect travels with the SVG file wherever it's pasted — no separate stylesheet, no class name to remember to add.
SMIL has occasionally been described as a deprecated or legacy technology, which causes some hesitation around using it — but that reputation applies to SMIL's more obscure interactivity features, not to animateTransform itself, which remains a normal, actively-supported part of the SVG rendering pipeline in every current browser engine. The practical trade-off is more about control than compatibility: pausing or restarting a SMIL animation from JavaScript requires the SVG DOM's own animation API rather than the more familiar CSS animation-play-state property, which is worth knowing before reaching for this approach on something that needs to be paused programmatically.
Where a Wave Divider Actually Belongs on a Page
A wave works best as a transition between two visually distinct sections — the bottom of a colorful hero flowing into a plain content area, or the top of a footer separating it from whatever comes before it — rather than as a decoration floating in the middle of unrelated content. Flip Vertical exists specifically for that second case, since a divider meant to sit at a section's bottom edge needs the wave's curve pointing the opposite direction from one meant to sit at a top edge. Pairing the wave with a gradient background on the section behind it, rather than a flat color, is a common way to make the transition feel less like two unrelated blocks stacked on top of each other and more like one continuous scene.
From a Tuned Shape to a Real Section Break
A typical path: start from a preset close to the intended mood — Gentle Waves for something calm and minimal, Ocean Depth or Sunset Layers for a more decorative hero section — then reshape individual layers with the dice icon rather than hand-tuning amplitude and complexity from a blank state, since a few random tries usually land closer to right than manual guessing. Once the silhouette feels right, deciding whether to enable Animate Drift on just the frontmost layer is the last real decision; a static wave reads as calm and finished, one drifting layer adds a subtle sense of motion without turning the whole divider into a distraction. From there the exported SVG drops directly into an HTML page's markup, ready to sit between two sections exactly as previewed.
It's worth double-checking the wave against the actual content it'll sit near before calling it finished, not just the empty preview here. A wave tuned to look balanced against a plain colored backdrop can behave differently once real text, a logo, or a call-to-action button sits directly on top of one of its layers — a peak that happens to rise into the same vertical band as a heading is worth nudging down or reshaping entirely rather than accepted as coincidence. Testing the exported SVG in the real page it's destined for, at the actual widths that page will render at, is a five-minute check that catches problems no isolated preview reliably will.