Can I add multiple wave layers?

Yes, each layer has its own amplitude, frequency, phase, color, and opacity.

Can I flip the wave vertically?

Yes, use the Flip vertically switch.

Can I download the SVG file?

Yes, use the Download button to save a .svg file.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

SVG Wave Generator

Generate parametric SVG wave shapes for sections.

Support

Works Offline

Privacy First

No Login

No API

Controls

Height (200px)

Flip vertically

Layer 1

Amplitude (20)

Frequency (1.5)

Phase (0°)

Opacity (0.70)

Color

Layer 2

Amplitude (30)

Frequency (1)

Phase (90°)

Opacity (1.00)

Color

Preview

SVG markup

<svg viewBox="0 0 1200 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <path d="M0.0,100.0 L12.0,101.9 L24.0,103.7 L36.0,105.6 L48.0,107.4 L60.0,109.1 L72.0,110.7 L84.0,112.3 L96.0,113.7 L108.0,115.0 L120.0,116.2 L132.0,117.2 L144.0,118.1 L156.0,118.8 L168.0,119.4 L180.0,119.8 L192.0,120.0 L204.0,120.0 L216.0,119.8 L228.0,119.5 L240.0,119.0 L252.0,118.4 L264.0,117.5 L276.0,116.5 L288.0,115.4 L300.0,114.1 L312.0,112.7 L324.0,111.2 L336.0,109.6 L348.0,107.9 L360.0,106.2 L372.0,104.4 L384.0,102.5 L396.0,100.6 L408.0,98.7 L420.0,96.9 L432.0,95.0 L444.0,93.2 L456.0,91.5 L468.0,89.8 L480.0,88.2 L492.0,86.8 L504.0,85.4 L516.0,84.2 L528.0,83.1 L540.0,82.2 L552.0,81.4 L564.0,80.8 L576.0,80.4 L588.0,80.1 L600.0,80.0 L612.0,80.1 L624.0,80.4 L636.0,80.8 L648.0,81.4 L660.0,82.2 L672.0,83.1 L684.0,84.2 L696.0,85.4 L708.0,86.8 L720.0,88.2 L732.0,89.8 L744.0,91.5 L756.0,93.2 L768.0,95.0 L780.0,96.9 L792.0,98.7 L804.0,100.6 L816.0,102.5 L828.0,104.4 L840.0,106.2 L852.0,107.9 L864.0,109.6 L876.0,111.2 L888.0,112.7 L900.0,114.1 L912.0,115.4 L924.0,116.5 L936.0,117.5 L948.0,118.4 L960.0,119.0 L972.0,119.5 L984.0,119.8 L996.0,120.0 L1008.0,120.0 L1020.0,119.8 L1032.0,119.4 L1044.0,118.8 L1056.0,118.1 L1068.0,117.2 L1080.0,116.2 L1092.0,115.0 L1104.0,113.7 L1116.0,112.3 L1128.0,110.7 L1140.0,109.1 L1152.0,107.4 L1164.0,105.6 L1176.0,103.7 L1188.0,101.9 L1200.0,100.0 L1200,200 L0,200 Z" fill="#6366f1" fill-opacity="0.7" />
  <path d="M0.0,130.0 L12.0,129.9 L24.0,129.8 L36.0,129.5 L48.0,129.1 L60.0,128.5 L72.0,127.9 L84.0,127.1 L96.0,126.3 L108.0,125.3 L120.0,124.3 L132.0,123.1 L144.0,121.9 L156.0,120.5 L168.0,119.1 L180.0,117.6 L192.0,116.1 L204.0,114.5 L216.0,112.8 L228.0,111.0 L240.0,109.3 L252.0,107.5 L264.0,105.6 L276.0,103.8 L288.0,101.9 L300.0,100.0 L312.0,98.1 L324.0,96.2 L336.0,94.4 L348.0,92.5 L360.0,90.7 L372.0,89.0 L384.0,87.2 L396.0,85.5 L408.0,83.9 L420.0,82.4 L432.0,80.9 L444.0,79.5 L456.0,78.1 L468.0,76.9 L480.0,75.7 L492.0,74.7 L504.0,73.7 L516.0,72.9 L528.0,72.1 L540.0,71.5 L552.0,70.9 L564.0,70.5 L576.0,70.2 L588.0,70.1 L600.0,70.0 L612.0,70.1 L624.0,70.2 L636.0,70.5 L648.0,70.9 L660.0,71.5 L672.0,72.1 L684.0,72.9 L696.0,73.7 L708.0,74.7 L720.0,75.7 L732.0,76.9 L744.0,78.1 L756.0,79.5 L768.0,80.9 L780.0,82.4 L792.0,83.9 L804.0,85.5 L816.0,87.2 L828.0,89.0 L840.0,90.7 L852.0,92.5 L864.0,94.4 L876.0,96.2 L888.0,98.1 L900.0,100.0 L912.0,101.9 L924.0,103.8 L936.0,105.6 L948.0,107.5 L960.0,109.3 L972.0,111.0 L984.0,112.8 L996.0,114.5 L1008.0,116.1 L1020.0,117.6 L1032.0,119.1 L1044.0,120.5 L1056.0,121.9 L1068.0,123.1 L1080.0,124.3 L1092.0,125.3 L1104.0,126.3 L1116.0,127.1 L1128.0,127.9 L1140.0,128.5 L1152.0,129.1 L1164.0,129.5 L1176.0,129.8 L1188.0,129.9 L1200.0,130.0 L1200,200 L0,200 Z" fill="#22d3ee" fill-opacity="1" />
</svg>

About the SVG Wave Generator

Create smooth SVG wave dividers with adjustable amplitude, frequency, phase, height, and layered colors. Preview live and download the SVG markup for use as a section background or divider.

Examples

Two-layer wave

amplitude 20/30

Output

<svg viewBox="0 0 1200 200">...</svg>

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Clamp() Calculator

HTML & CSS

Generate fluid typography clamp() CSS from min/max viewport and size.

CSS Scrollbar Styler

HTML & CSS

Design custom scrollbars with live preview.

CSS Transform Playground

HTML & CSS

Combine translate, rotate, scale, and skew with a live preview.

CSS Variables Theme Builder

HTML & CSS

Build a custom property theme with a live preview.

Email Signature Generator

HTML & CSS

Design a professional HTML email signature and copy it into any mail client.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser