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

XML

<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="#2563eb" 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.

Popular uses

svg wave generator
wave divider
svg background
section wave

Examples

Two-layer wave

amplitude 20/30

Output

XML<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 Transform Playground

HTML & CSS

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

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Cubic-Bézier & Spring Physics Studio

HTML & CSS

Shape easing curves and physical springs with live animation previews.

HTML Viewer with CSS & JS Tabs (Live Preview)

HTML & CSS

Edit HTML, CSS, and JS in tabs with an instant sandboxed live preview.

Favicon Generator

Images

Turn any image into a full favicon pack with .ico, PNGs, manifest and HTML.

Image Compressor

Images

Shrink JPEG, PNG, and WebP images without a server.

Works well with

Next steps from other categories.

Image to SVG Vectorizer

Images

Trace PNG or JPG images into clean, scalable SVG paths.

SVG Optimizer

Images

Strip comments, metadata, and whitespace from SVG markup.

SVG Path Visual Inspector & Editor

Images

Visualise, drag-edit, transform and minify SVG path d data in your browser.

SVG to PNG Converter

Images

Convert SVG files to PNG images at any scale.

All HTML & CSS tools

Frequently asked questions

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