Micro Tools
Advertisement

SVG wave generator

Design smooth SVG wave dividers with sliders for amplitude, wavelength and layers. Preview live, then copy the SVG code or download it as a file.

Wave controls

Tune the wave, then copy the SVG or download it.

Preview and SVG
Advertisement

How the wave path is built

Each wave is a polyline of 120 points following a sine curve: y equals base plus amplitude times sin(x). The path starts at the bottom-left corner, walks the curve across, then closes along the bottom edge, so the wave reads as a filled divider rather than a floating line.

Why multiple layers look better

Real water and good design both use depth. Each extra layer is phase-shifted and slightly more opaque, which fakes distance: pale waves behind, bold waves in front. Two or three layers is the classic section-divider look.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

SVG Wave Generator FAQs

How do I use the SVG as a section divider?
Paste the SVG between two page sections and set width to 100 percent with height auto. Flip it vertically with transform: scaleY(-1) when you need the wave to cap the top of a section instead of the bottom.
Can I animate the wave?
Yes. Animate the phase value with JavaScript by regenerating the path each frame, or layer two identical SVGs and slide them horizontally with CSS for an endless drift effect.
Why does the SVG stretch on wide screens?
The preserveAspectRatio="none" attribute lets it stretch to any width without keeping proportions. On very wide screens lower the amplitude so the wave does not look exaggerated.
What file format should I download?
Download the .svg file for web use: it scales infinitely and stays tiny. If your CMS only accepts images, convert it to PNG with any free converter at 2x size for crispness.
Can I change the wave color later?
Yes, open the SVG code and replace the fill hex values. Each layer has its own fill attribute, so you can recolor back and front waves independently.
Advertisement