The SVG Wave Divider: How a Smooth Section Edge Is Actually Built

Almost every modern marketing page ends a coloured section with a soft curve instead of a hard horizontal line. The hero band dips into the white block below it with a gentle wave, and the seam disappears. That curve is not a background image and it is not a font glyph. It is a single SVG path with a handful of cubic curves running along one edge, and once you understand how it is drawn, you can read it, tweak it, and stop treating it as a black box.

I spent a long time copying random wave snippets off CodePen before I sat down and actually traced one of these paths by hand. It turned out to be far simpler than the markup made it look. This post walks through how the wave shape is constructed, why stacking two or three of them creates depth, and why a vector divider holds up where a flattened PNG falls apart.

A wave divider is a closed path with curves on one edge

Strip away the styling and a wave divider is one <path> element. The bottom (or top) edge is a smooth curve; the other three edges are straight lines that close the shape into a fillable area. That filled area is what carries the section colour down into the seam.

The smooth edge is the only interesting part. You sample a row of points across the width — a crest, then a trough, then a crest again — and join consecutive points with cubic Bezier curves. The trick that keeps the curve from kinking at every anchor is the control handles: each handle sits at the midpoint x between two anchors, level with its own anchor's y. Because both handles are horizontal, the curve leaves one crest flat and arrives at the next crest flat, so it glides through every peak with no corner. That is the same construction you would use to draw a calm, symmetric ocean wave, and it is exactly what the SVG Wave Generator emits.

Two sliders shape the result. Amplitude is how far the crests rise above and the troughs fall below the centre line — small for a calm corporate divider, large for a bold splash. Irregularity is how much a seeded jitter varies each crest: at zero, every crest is the same height and you get a tidy repeating wave; turn it up and the crests differ, so the edge reads as something natural rather than a mechanical sine curve.

A worked example: reading the path

Picture a wave 1200 units wide and 120 tall, viewBox 0 0 1200 120. The path might begin at the top-left of the wavy edge and run:

M 0 60
C 100 60, 200 20, 300 20
C 400 20, 500 100, 600 100
C 700 100, 800 20, 900 20
C 1000 20, 1100 60, 1200 60
L 1200 120
L 0 120
Z

Read it slowly. M 0 60 drops the pen on the left edge at the centre line. The first C curve carries it up to a crest at (300, 20) — note the two control points share the anchors' y values (60 then 20), which is the horizontal-handle rule in action. The next C swings down to a trough at (600, 100), then back up, and the last one settles on the right edge. Then three straight commands — down the right side with L 1200 120, across the bottom with L 0 120, and Z to close back to the start. The closed region under the curve is what fills with colour. Change the y of the crests and you change the amplitude; nudge them unevenly and you have irregularity.

One detail saves a lot of grief here: the SVG sets preserveAspectRatio="none". A divider almost always spans 100% width at a fixed height, which distorts the viewBox on purpose. Without that attribute the browser would letterbox the wave instead of stretching it edge to edge.

Layering waves for depth

A single wave is fine for a clean seam. The "ocean" footers you see on SaaS pricing pages are built from two, three, or four of these paths stacked on top of each other.

The recipe is straightforward. Draw the same kind of wave several times, each in a tint of one brand colour, each at a lower opacity, and — this is the part that sells it — shift the seed for each layer so the crests do not line up. When the peaks are offset, the back layers peek through the gaps in the front ones, and your eye reads that overlap as distance. Pair the stack with a gradient fill instead of a flat colour and the depth gets stronger still; the Gradient Generator gives you the two-stop CSS gradient to feed in.

If you want the footer to feel alive, animate each layer's transform: translateX at a different speed in CSS. The front layer drifts faster than the back one, the parallax does the rest, and you have a living wave field that weighs almost nothing.

Why SVG beats a PNG divider

It is tempting to export the curve as a PNG and call it done. Here is why that ages badly.

A wave divider stretches to whatever width the section is. A raster PNG only has the pixels it was saved with, so when the browser scales it across a 2560px monitor the edge turns soft and fuzzy, and on a Retina screen it looks worse, not better. An SVG path is math — the browser re-rasterizes the curve crisply at every width and every pixel density, so the edge stays razor-sharp from a phone to a 4K display.

Vector also stays editable. Need to deepen the amplitude, swap the brand colour, or flip the wave so it arcs up under a hero headline instead of dipping down? You change a number in the markup, not re-export an asset from a design file you may no longer have. And the file is tiny: a few cubic commands and a fill colour are a few hundred bytes of text, where the equivalent PNG is kilobytes of compressed pixels. If you want to shave the markup down further before shipping, run it through an SVG Optimizer to strip whitespace and round long decimals.

There is a subtle seam tip worth keeping. The wave closes to the edge of its own viewBox, not to your section, so placing it flush at bottom: 0 can leave a 1px sub-pixel gap at some zoom levels. A small negative margin — margin-bottom: -1px — lets the filled edge overlap the colour beneath it and the gap vanishes.

Reproducibility matters more than it sounds

The other reason to keep dividers as vector-with-a-seed is consistency across a long page. A landing page that alternates coloured sections looks mechanical if every seam uses the identical wave. Lock the wave count, amplitude and layers, then step the seed by hand — 2001, 2002, 2003 — and each seam gets a distinct but tonally matched curve.

Because a deterministic seed drives the shape, the same seed reproduces the exact same wave on every device, and a share link round-trips pixel-for-pixel. Write those seeds into your design tokens and any teammate can regenerate the precise set of dividers months later, even after the brand colour changes. That is the quiet payoff of treating a section divider as a reproducible vector instead of a one-off image: it never goes stale, and you never lose the source.

---

Made by Toolora · Updated 2026-06-13