SVG Wave Generator
Create Wavy SVG Section Dividers
Generate smooth wave shapes in SVG to use as section dividers and decorative separators between page sections.
Preview
About SVG Waves
Wavy SVG dividers are a popular way to break up the flat horizontal edges between sections of a web page. Instead of a hard straight line where two background colors meet, a wave creates a soft, flowing transition that adds personality to landing pages, hero sections, and footers.
This generator builds the wave from a series of smooth cubic Bezier curves that alternate up and down across the width of the shape, then closes the path along the bottom to form a solid fill. The amplitude controls how tall the wave crests are, the number of waves controls how many crests fit across the width, and the flip option mirrors the shape so it can sit at either the top or the bottom of a section. Because the result is a single SVG path, it scales cleanly to any screen width. Learn more in the SVG Tutorial and the SVG Path reference.
