SVG wave generator for section dividers
Generate SVG wave section dividers (height, amplitude, frequency, color), with export.
🔒 100% client-side — no data sent
Create SVG wave section dividers for your pages: adjust height, amplitude, frequency, phase and color, then copy or download the SVG. Perfect to dress up the transition between two sections. Everything is generated locally.
What is it for?
- ▸ Separate two sections of a landing page
- ▸ Create a wavy transition at the top or bottom of a block
- ▸ Generate a light decorative background
- ▸ Export a fluid, full-width SVG
FAQ
How do I add the wave to my page?
Paste the SVG directly into your HTML, or use it as a background image. The preserveAspectRatio attribute allows full-width stretching.
What are amplitude and frequency for?
Amplitude sets the height of the waves, frequency the number of ripples across the width.
Can I change the color afterwards?
Yes, edit the path's fill attribute in the SVG, or the color here before exporting.
Is the SVG free to use?
Yes, the generated SVG is yours and can be embedded without restriction.
Related tools
Aspect ratio · calculator Calculate an aspect ratio (16:9…) and derive a missing proportional dimension. Barcode generator Generate a barcode (EAN-13, Code128, UPC) from a value, downloadable, in your browser. Base64 → image Decode a data URI or Base64 into a viewable, downloadable image, in your browser. CSS border-radius · generator Create CSS rounded corners (border-radius) with a live preview and copy-ready code. CSS box-shadow · generator Generate a CSS box-shadow with a live preview and copy-ready code. Green screen remover Make a background color (green/blue screen) transparent and export a PNG, in your browser.