SVG wave generator

Make a wave

Each layer is one closed shape, its wave along the top and its flat side at the bottom, so it fills down to the next section: give the front layer that section’s colour. Switch the output to line to keep only the waves themselves, as strokes that scrollDraw draws.

…

Points first, then a curve

The wave starts as a row of points: a crest, then a trough, every half wavelength, the amplitude above and below a baseline (fig. 1). The wavelength is the width divided by the number of waves. Layers get baselines spaced evenly down the height and phases spread along one wavelength, so their crests do not line up. Variation moves each point sideways by up to 15% of the spacing, pulls it toward the baseline by up to 75% of the amplitude and nudges each layer’s phase, all with numbers from the seed.

Then a curve through them. A Catmull-Rom spline passes through every point, its direction at each one parallel to the line between the two neighbours, and in SVG it is one cubic Bézier per gap: from P1 to P2, the handles sit at P1 + (P2 − P0) ÷ 6 and P2 − (P3 − P1) ÷ 6.

// One cubic Bézier per gap, through every point.
// p: the points, left to right; tension 0 is Catmull-Rom.
function catmullRom(p, tension = 0) {
  const f = (1 - tension) / 6;
  let d = `M${p[1].x},${p[1].y}`;
  for (let i = 1; i < p.length - 2; i++) {
    const [a, b, c, e] = [p[i - 1], p[i], p[i + 1], p[i + 2]];
    d += `C${b.x + (c.x - a.x) * f},${b.y + (c.y - a.y) * f},` +
         `${c.x - (e.x - b.x) * f},${c.y - (e.y - b.y) * f},` +
         `${c.x},${c.y}`;
  }
  return d; // from p[1] to the point before last: the ends only steer
}

Exactly 0 to the width. The points carry on past both edges, so every gap has neighbours whatever the phase. The curve is then cut where it crosses x = 0 and x = width (split with de Casteljau’s construction at the point where x is exactly the edge), and the shape closes down the side, back along the bottom and up: V height H 0 Z. At any seed, phase or number of waves the shape meets both sides of its box, with no sliver at either end.

Inside the box. A curve through points can swing past them. The generator finds each piece’s highest and lowest point, where the cubic’s slope is 0, and if one would leave the box it scales that layer toward its baseline just enough. With variation at 0 and a whole number of waves, the two ends meet at the same height and slope, so the wave tiles.

Use it as a section divider

Put the SVG between two sections and fill it with the colour of the one it leads into. With width="100%", a fixed height and preserveAspectRatio="none" it stretches to any width without changing height: wide screens get gentler waves, phones steeper ones (try the 390px preview). Flip it vertically to make it the bottom edge of the section above instead.

<section class="hero">…</section>

<!-- The wave, filled with the colour of the section it leads into. -->
<svg viewBox="0 0 1440 160" preserveAspectRatio="none"
     width="100%" height="160" aria-hidden="true" style="display:block">
  <path fill="#121110" d="M0,…V160H0Z"/>
</svg>

<section class="next" style="background:#121110">…</section>

As a CSS background the same SVG goes in a data URI, and it has to be URL-encoded. A # starts a URL fragment, so a hex colour left as it is cuts the image off there; %, <, > and spaces are not allowed as they are either. The CSS tab encodes them and swaps double quotes for single ones, so the SVG sits inside url("…"). background-size: 100% 100% stretches it the way preserveAspectRatio="none" stretches the inline SVG. This one is a single peak, short enough to read:

/* A 48px band, its flat side at the bottom: the next section
   starts right below it, in the wave’s colour. */
.wave-divider {
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2048'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23121110'%20d='M0,4.8L720,43.2L1440,4.8V48H0Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Draw the wave line on scroll

In line mode the generator keeps only each layer’s wave, as an open path with a stroke and no fill. scrollDraw turns each stroke into one dash as long as the line and slides it into place as the page scrolls: by default from when the top of the wave reaches the bottom of the window until its bottom leaves the top (trigger 'top bottom' to 'bottom top'), at an even rate (linear easing). The draws and done controls change that, and the code includes only what differs from the defaults.

import { scrollDraw } from 'svg-scroll-draw';

// With the scroll: done as the wave leaves the top of the window.
scrollDraw('#wave');

// Done by the time it reaches the middle of the screen.
scrollDraw('#wave', { trigger: { end: 'center center' } });

// Once, on its own clock (1000 ms), the first time it is seen.
scrollDraw('#wave', { autoplay: true, once: true });

// Several lines, each starting a little after the one before.
scrollDraw('#wave', { stagger: 0.15 });

SVG wave questions

Drawing on scroll with svg-scroll-draw 2.23.3: the docs, or the SVG path viewer to measure and check a line before it draws.