Design · 3 min read
SVG Wave Dividers: Curved Section Breaks
A wavy edge between two page sections softens the hard horizontal lines of a long landing page. The cleanest way to draw one is a small inline SVG.
Try it yourself with the related tool.
Generate an SVG wave →Advertisement
How the divider is built
A wave divider is one SVG <path> filled with the colour of the next section and placed at the very bottom of the current one. The path traces a curve along the top edge and fills everything below it, so the next section appears to rise in a wave.
Making it responsive
Set the SVG to width: 100%, a fixed height, and preserveAspectRatio="none" so the wave stretches to any screen width. Without that attribute, the wave keeps its aspect ratio and may leave gaps at the sides.
Avoiding hairline gaps
Sub-pixel rounding can leave a thin line between the wave and the section below. Use display: block on the SVG to remove the inline gap under it, and overlap the next section by 1px with a negative margin if a line still appears. Set the fill to the exact same colour value as the next section.