SVG wave generator

How the waves are drawn

Each wave is a row of anchor points spread across the full 1440-unit width — one more anchor than the peaks setting — jittered up and down by a seeded random amount, then smoothed into an open spline of cubic Bézier curves. The first and last anchors are pinned to the left and right edges, so the curve always spans the whole width and the closing edges are exactly vertical: the path drops straight down to the bottom of the 320-unit-tall canvas (or straight up, when flipped), runs along that edge, and closes. The result is a filled area, not a stroked line — which matters later, because fills survive stretching in a way strokes never would.

The jitter comes from a deterministic seeded generator, so a curve you liked is reproducible: the seed is shown above the preview, and shuffle simply draws a new one. All of it happens in your browser — the markup is assembled locally and nothing is generated on a server.

Peaks, height, layers, flip

Peaks (2–8) is the number of undulations across the width. Two gives one broad swell; eight gives choppy water. Height (10–100) scales how far anchors may stray from the midline — at 100 the swing reaches about 40% of the canvas height, which is dramatic; the default 55 keeps the divider from eating the sections around it. Layers (1–4) repeats the construction with a different random sequence per layer: back layers sit slightly higher and are drawn at lower opacity, front layer fully opaque, so the stack reads as one body of water receding into the distance rather than unrelated lines.

Flip closes the fill upward instead of down — the shape for the top edge of a section rather than the bottom. One colour input drives every layer; the depth effect comes from opacity, not from picking three colours by hand, which is also what keeps the layers harmonious when you change the colour later.

A section divider that fits any width

The file carries preserveAspectRatio="none", which tells the browser to stretch the drawing to whatever box it is given instead of preserving the 1440 × 320 design proportions. In practice: paste the SVG inline (or reference the file from an <img>), set width: 100% and a fixed height — 120px is a sensible start on mobile, more on desktop — and the wave follows the viewport. Because the shape is pure fill with no strokes, stretching cannot produce fat or thin lines; the curve just gets proportionally broader.

Place it directly between two sections with display: block on the svg (inline SVG is baseline-aligned by default, which leaves a mysterious few pixels of gap below it). Give the wave the exact background colour of the section it belongs to, and the section behind it shows through the transparent part — that is the whole trick. To move the divider into the stylesheet instead of the markup, encode it with SVG to Data URI and set it as a background-image pinned to the bottom of the section.

Working with the layered output

The semi-transparent back layers blend with whatever sits behind the wave — over a white page they read as tints of the wave colour, over a photo or a gradient they tint what is underneath. That makes a layered wave over a generated gradient background a two-minute hero treatment: gradient on the section, wave in the section's foreground colour at the bottom edge. Book-ending a band of content is the same move twice — a flipped copy at the top, an unflipped one at the bottom, both filled with the neighbouring sections' background colour. And since every layer is a separate <path>, you can open the file in the editor and recolour or delete individual layers after the fact.

When a wave is the right divider

Waves soften the junction between blocks of content that would otherwise butt together as flat stripes — hero to features, features to footer, testimonial band to pricing. They suit products that want to feel organic or friendly; a fintech dashboard probably wants a straight line. Use one or two per page: dividers are punctuation, and a page where every section ripples reads like a sentence with five commas. For an organic shape that is a figure rather than an edge — something to sit behind an illustration — reach for the blob generator instead; the two tools share the same spline machinery but close the shape differently.

Common problems

• A hairline seam against the next section. The wave's fill must equal the adjacent section's background exactly — copy the hex, don't eyeball it. Sub-pixel rounding can still leave a line at some zoom levels; overlapping the sections by 1px (margin-top: -1px) hides it.
• Stretched full-bleed, the curves flatten. That is preserveAspectRatio="none" trading proportion for fit. Raise the peaks count so there is more curve to stretch, or give the element more height on wide screens.
• An unexplained gap under the wave. Inline SVG sits on the text baseline like a letter. display: block removes the gap.
• The back layers look wrong on a dark page. Their opacity blends with the page behind them, so tints computed against white turn muddy on near-black. Preview against the real background, or drop to a single layer and keep full opacity.