A wavy section divider in CSS that scales without a seam

A wave at the join between two sections turns a hard edge into a soft one. Most waves on the web are exported images from a generator, which stretch on wide screens and have to be regenerated to change. A formula is better.

The formula

function wavePath(width, height, waves, amp) {
  const mid = height / 2, step = width / (waves * 16);
  let d = `M0 ${mid}`;
  for (let x = step; x <= width + 0.5; x += step)
    d += ` L${x.toFixed(1)} ${(mid + amp * Math.sin((x / width) * waves * 2 * Math.PI)).toFixed(1)}`;
  return `${d} L${width} ${height} L0 ${height} Z`;
}

It draws a sine wave across the width and closes the shape below it. Change the number of waves or the amplitude and every divider on the site changes together.

Placing it

<div class="wave" aria-hidden="true">
  <svg viewBox="0 0 1440 48" preserveAspectRatio="none">
    <path d="..." fill="currentColor"/>
  </svg>
</div>

.wave { color: var(--next-section-ground); line-height: 0; }
.wave svg { display: block; width: 100%; height: 48px; }

The fill is the colour of the section below, so the wave looks like that section's top edge. line-height: 0 and display: block remove the thin gap that appears under inline SVGs.

Avoiding the stretch

With preserveAspectRatio="none", the wave stretches with the width, so a 1440px design becomes long and flat at 2560. Either generate the path at build time for a few breakpoints, or draw one wave period and repeat it as a background, so the wavelength stays fixed.

Contour echoes

A few thin lines following the same formula, offset upward at low opacity, turn a plain wave into a contour, like a map. It is the texture at the top of this site. Keep them faint enough that text above stays clear. The rest of the section rhythm is in alternating dark and light sections.

Warm Storefront UI has this site's wavy contour divider as a formula, not an image, so it scales to any width without a seam and takes its colour from the tokens.