SVG Wave Shape Generator

Wave shape SVG: the modern way to break sections

Wave shape SVGs are sinusoidal or organic curves used as section dividers in modern landing pages. They replaced the hard, straight borders of early 2010s flat design and have been a staple of marketing sites since around 2018, popularised by tools like getwaves.io, shapedivider.app and haikei.app. The pattern is simple: a hero section ends with a curved bottom edge, the next section starts with the same curve flipped, and the page reads as one fluid composition instead of stacked boxes.

The canonical wave uses a wide viewBox of 0 0 1440 320 and one or two cubic Bézier control points to shape the curve:

<svg viewBox="0 0 1440 320" preserveAspectRatio="none">
  <path d="M0,160 C480,250 960,70 1440,160 L1440,320 L0,320 Z"
        fill="#3b82f6"/>
</svg>

Wave variants you can build

• Smooth sine wave — one gentle hump, the classic landing-page divider.
• Tilted wave — start and end heights differ, giving a diagonal-friendly look.
• Multi-wave — two or three cycles across the viewBox for a more rhythmic feel.
• Layered waves — three paths stacked with opacity 0.4, 0.6 and 1.0 to fake depth; a workhorse of modern hero sections.
• Organic blob wave — random control points instead of mathematical sine, used by Stripe, Linear and many SaaS sites.

The math behind the curve

A cubic Bézier C command takes two control points and an end point. To approximate a sine hump cleanly, place the two control points symmetrically around the midpoint and pull them above the baseline by the amplitude. Each full sine cycle needs at least two cubic segments — one for the hump, one for the trough — so a wave with three peaks has six control points in total. Higher amplitudes produce dramatic waves; subtle dividers usually keep amplitude below 15% of the viewBox height.

Responsive behaviour, animation and performance

Inline SVG scales without quality loss. Set width: 100%; height: auto and use preserveAspectRatio="none" when you want the wave to stretch to fit any container, or xMidYMid slice when you prefer to crop. For motion, the modern approach is a CSS @keyframes rule animating transform: translateX on a wave wider than the viewport — this is GPU-accelerated and avoids the deprecated SMIL <animate> element. Compared to a video background, an inline SVG wave is typically under 2 KB and consumes virtually no main-thread time.

SVG wave vs CSS clip-path

clip-path: polygon() can fake a wave using many tiny segments, but it cannot produce a true smooth curve until the upcoming CSS shape() function lands across browsers. SVG path with Bézier curves remains the cleanest option for curved dividers, and it gives you fine-grained control over colour, gradient fill, stroke and per-layer opacity.

FAQ

How heavy is an inline SVG wave? Almost always under 2 KB — the path data is short and gzip-friendly. Inlining beats loading an external .svg file because it avoids the round-trip.

Can I animate the wave? Yes — the cleanest pattern is CSS transform: translateX on a wave that is twice the viewport width, animated in a 20-second loop. Avoid animating the d attribute on the main thread.

Is the wave responsive? Yes — the viewBox handles scaling automatically. Combine it with preserveAspectRatio="none" if you want the curve to stretch edge-to-edge on any screen.

How do I flip the wave so the next section starts with the same curve? Reuse the path and apply transform: rotate(180deg) or mirror the d attribute on the Y axis. Many designers keep both versions in the same component.