Wave SVG Generator

Generate smooth wave SVG dividers for page sections with custom colors. Copy-ready code for any website. Free online, no signup.

Preparing private browser tool…

Your file will stay on this device.

Related tools

Blob SVG Generator

Generate organic blob SVG shapes with live preview and copy-ready code. Customize size, complexity, and color. Free, no signup.

Color Picker

Pick colors and convert between HEX, RGB, HSL formats instantly. Copy color codes with one click. Free online tool.

File Hash

Generate MD5, SHA-1, SHA-256 checksums from files in your browser. Verify file integrity without uploading. Free and private.

Base64 Encoder

Encode and decode Base64 strings instantly. Supports text and file input. Free online tool, no upload, runs in your browser.

Text Case Converter

Convert text between UPPER, lower, Title, camelCase, snake_case, and more. Free online tool with one-click copy.

UUID Generator

Generate version 4 UUIDs instantly. Create 1 to 100 UUIDs at once with one-click copy. Free, runs in your browser.

Frequently asked questions

How to use as section divider?
Place SVG between sections with width: 100%, display: block, and preserveAspectRatio='none'.
Can I animate the wave?
Yes. Animate the d attribute with SMIL or CSS, or translate duplicated waves horizontally on loop.
Why pixelated when scaled?
Remove fixed width/height and rely on viewBox plus CSS width.
What can I adjust?
One to four stacked waves, amplitude 5 to 120, frequency 1 to 8, canvas width 400 to 2000 and height 80 to 400, with a colour and opacity per wave.
Is the wave shape mathematically exact?
No. Each wave is a run of quadratic curves whose control points follow a sine, which reads as a wave but is not a true sine curve. It is built for section dividers rather than for plotting signals.