Create a Smooth Wave Pattern with SVG Cubic Bezier

Smooth Wave with S Commands

A wave pattern is built by chaining alternating cubic bezier curves. The S (smooth cubic) command makes this especially elegant because it automatically mirrors control points for a seamless flow.

The Path

M 0,50 C 16,10 32,10 50,50 S 84,90 100,50
S 134,10 150,50 S 184,90 200,50

How It Works

The first segment uses C to define the initial curve from (0,50) up to a peak, then back to the midline at (50,50). Each subsequent S command reflects the previous control point, creating alternating peaks and troughs.

Wave Parameters

Property	Controlled by
Wavelength	Horizontal distance between endpoints (50 units here)
Amplitude	Vertical distance of control points from midline (40 units)
Phase	Starting x-offset of the M command
Midline	The y-coordinate shared by endpoints (50 here)

Animating the Wave

Add horizontal motion with CSS:

.wave-path {
  animation: wave 2s linear infinite;
}
@keyframes wave {
  from { transform: translateX(0); }
  to { transform: translateX(-100px); }
}

Set the wave path to be at least twice the viewport width so the loop is seamless.

Filled Wave (Section Divider)

To use the wave as a section divider, extend the path to form a closed shape:

M 0,50 C 16,10 32,10 50,50 S 84,90 100,50
S 134,10 150,50 S 184,90 200,50 L 200,100 L 0,100 Z

This closes the path at the bottom, creating a filled wave region.