SVG Wave Generator

An SVG wave divider is a scalable vector graphic used to create a wavy transition between sections on a webpage. Because it is SVG, it scales perfectly to any screen size without pixelation.

Click "Copy SVG", then paste the code directly into your HTML where you want the wave divider to appear. You can place it between sections, in a hero area, or as a footer background.

Yes! After copying the SVG, you can add a CSS animation or SMIL animation to the path element. For example, add a CSS keyframe that shifts the transform: translateX property to create a scrolling wave effect.