How does the wave stay smooth instead of jagged?

The path samples a sine curve at evenly spaced points, then connects them with cubic Bezier segments whose control points sit halfway between samples. This rounds the corners that straight line segments would leave, giving a continuous, fluid wave.

Why does the SVG scale to any screen width?

The SVG uses a fixed viewBox of 1440 units wide with preserveAspectRatio set to none. That tells the browser to stretch the path horizontally to fill its container while keeping the chosen pixel height, so one wave works across all breakpoints.

What do amplitude and frequency control?

Amplitude is the vertical distance from the wave's midline to its crest, so larger values make taller waves. Frequency is how many full wave cycles fit across the width, so higher values pack in more, shorter crests.

How do I place the wave between two sections?

Drop the inline SVG at the bottom of the upper section or the top of the lower one, and set the wave fill colour to match the adjacent section's background. The filled area below the curve blends into that section, creating the divider effect.

Should I use inline SVG or a background image?

Inline SVG is best for dividers because it stretches responsively and lets you recolour the fill with CSS. A background image works too but is harder to make full-width without distortion. This tool outputs inline SVG ready to paste.

Wave SVG Generator — Gera Tools

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.

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. Keep amplitude below roughly a third of the height to avoid clipping the crests, and reach for frequency 1–2 for a calm, modern look; higher frequencies feel busier. Because the output is inline SVG, you can later animate the fill or add a second offset wave for a layered effect.