A wave divider softens the hard edge between two page sections and adds a little movement to an otherwise rectangular layout. This generator produces a smooth, full-width wave as inline SVG, with sliders for every shape parameter and a live preview.
How it works
The top edge of the divider follows a sine curve sampled across the width, where the vertical position at each point is:
y(x) = baseline − amplitude × sin(2π × frequency × x / width + phase)Sampled points are joined with cubic Beziers so the curve stays smooth, and the path is then closed down to the bottom edge so it fills as a solid shape:
<svg viewBox="0 0 1440 160" preserveAspectRatio="none" width="100%" height="160">
<path d="M0 80 C ... L 1440 160 L 0 160 Z" fill="#6366f1"/>
</svg>preserveAspectRatio="none" lets the wave stretch to any container width.
Understanding the controls
Amplitude sets how tall the wave crests are — the vertical distance from the midline to the peak. A small amplitude produces a subtle, gentle ripple; a large amplitude creates an exaggerated peak-and-trough. Keep amplitude below about one-third of the total height to avoid the crests clipping at the top or bottom edge.
Frequency controls how many complete wave cycles appear across the full width. At frequency 1, you see a single crest that spans the full width — a slow, sweeping curve. At frequency 2, two crests appear side by side. Most modern landing pages use frequency 1 or 1.5 for a clean, contemporary look. Frequencies of 3 or above start to feel busy and decorative rather than structural.
Phase shifts the wave sideways. This is useful when you are combining two overlapping waves for a layered effect — offset the phase by half a cycle to interleave the crests and troughs.
Height sets the total pixel height of the SVG element. The wave fills this space from top to bottom based on amplitude and baseline position. A height of 80–120px is typical for a subtle divider; 150–200px reads as a more prominent decorative element.
How to place the output on your page
The SVG output is designed to go directly between two div or section elements. A common pattern is to set display: block on the SVG to remove the inline gap browsers add, and to set margin: 0 to remove any default spacing:
<!-- top section with background #f0f4ff -->
<section style="background: #f0f4ff; padding: 4rem;">
...
</section>
<!-- wave transition to the next section -->
<svg viewBox="0 0 1440 100" preserveAspectRatio="none"
style="display: block; margin: 0;" width="100%" height="100">
<path d="M0 50 C ..." fill="#6366f1"/>
</svg>
<!-- next section with the wave's fill colour as its background -->
<section style="background: #6366f1; padding: 4rem;">
...
</section>Set the wave fill to match the background colour of the section it flows into, so the filled area of the wave reads as part of that section rather than an overlay.
Tips and notes
Set the fill colour to match the background of the section the wave sits against, so the curve reads as a transition rather than a coloured band. Use the flip toggle when the wave should crest upward into the section above. Because the output is inline SVG, you can later animate the fill with CSS or add a second offset wave as a second path element for a layered depth effect.