Images & Design

SVG Wave Generator

Build an original wave divider for a page, slide, or illustration. The live preview combines sampled sine curves in translucent layers and exports the exact graphic you see.

Free online tool

Loading tool…

Shape your wave

Width (100–4,096 px)Height (50–2,048 px)Amplitude (%): 18Cycles: 2Layers: 3

Wave color Background

Flip vertically

Original layered sine waves. The SVG scales to any display size; PNG exports at the dimensions above.

Live preview

SVG source

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="400" viewBox="0 0 1200 400"><rect width="1200" height="400" fill="#eef2ff"/><path d="M0.00 152.00 L12.50 161.40 L25.00 170.63 L37.50 179.55 L50.00 188.00 L62.50 195.83 L75.00 202.91 L87.50 209.12 L100.00 214.35 L112.50 218.52 L125.00 221.55 L137.50 223.38 L150.00 224.00 L162.50 223.38 L175.00 221.55 L187.50 218.52 L200.00 214.35 L212.50 209.12 L225.00 202.91 L237.50 195.83 L250.00 188.00 L262.50 179.55 L275.00 170.63 L287.50 161.40 L300.00 152.00 L312.50 142.60 L325.00 133.37 L337.50 124.45 L350.00 116.00 L362.50 108.17 L375.00 101.09 L387.50 94.88 L400.00 89.65 L412.50 85.48 L425.00 82.45 L437.50 80.62 L450.00 80.00 L462.50 80.62 L475.00 82.45 L487.50 85.48 L500.00 89.65 L512.50 94.88 L525.00 101.09 L537.50 108.17 L550.00 116.00 L562.50 124.45 L575.00 133.37 L587.50 142.60 L600.00 152.00 L612.50 161.40 L625.00 170.63 L637.50 179.55 L650.00 188.00 L662.50 195.83 L675.00 202.91 L687.50 209.12 L700.00 214.35 L712.50 218.52 L725.00 221.55 L737.50 223.38 L750.00 224.00 L762.50 223.38 L775.00 221.55 L787.50 218.52 L800.00 214.35 L812.50 209.12 L825.00 202.91 L837.50 195.83 L850.00 188.00 L862.50 179.55 L875.00 170.63 L887.50 161.40 L900.00 152.00 L912.50 142.60 L925.00 133.37 L937.50 124.45 L950.00 116.00 L962.50 108.17 L975.00 101.09 L987.50 94.88 L1000.00 89.65 L1012.50 85.48 L1025.00 82.45 L1037.50 80.62 L1050.00 80.00 L1062.50 80.62 L1075.00 82.45 L1087.50 85.48 L1100.00 89.65 L1112.50 94.88 L1125.00 101.09 L1137.50 108.17 L1150.00 116.00 L1162.50 124.45 L1175.00 133.37 L1187.50 142.60 L1200.00 152.00 L1200 400 L0 400 Z" fill="#6366f1" opacity="0.333"/><path d="M0.00 230.38 L12.50 237.17 L25.00 243.06 L37.50 247.93 L50.00 251.70 L62.50 254.32 L75.00 255.74 L87.50 255.93 L100.00 254.88 L112.50 252.63 L125.00 249.20 L137.50 244.65 L150.00 239.07 L162.50 232.54 L175.00 225.19 L187.50 217.13 L200.00 208.50 L212.50 199.45 L225.00 190.14 L237.50 180.73 L250.00 171.36 L262.50 162.22 L275.00 153.45 L287.50 145.20 L300.00 137.62 L312.50 130.83 L325.00 124.94 L337.50 120.07 L350.00 116.30 L362.50 113.68 L375.00 112.26 L387.50 112.07 L400.00 113.12 L412.50 115.37 L425.00 118.80 L437.50 123.35 L450.00 128.93 L462.50 135.46 L475.00 142.81 L487.50 150.87 L500.00 159.50 L512.50 168.55 L525.00 177.86 L537.50 187.27 L550.00 196.64 L562.50 205.78 L575.00 214.55 L587.50 222.80 L600.00 230.38 L612.50 237.17 L625.00 243.06 L637.50 247.93 L650.00 251.70 L662.50 254.32 L675.00 255.74 L687.50 255.93 L700.00 254.88 L712.50 252.63 L725.00 249.20 L737.50 244.65 L750.00 239.07 L762.50 232.54 L775.00 225.19 L787.50 217.13 L800.00 208.50 L812.50 199.45 L825.00 190.14 L837.50 180.73 L850.00 171.36 L862.50 162.22 L875.00 153.45 L887.50 145.20 L900.00 137.62 L912.50 130.83 L925.00 124.94 L937.50 120.07 L950.00 116.30 L962.50 113.68 L975.00 112.26 L987.50 112.07 L1000.00 113.12 L1012.50 115.37 L1025.00 118.80 L1037.50 123.35 L1050.00 128.93 L1062.50 135.46 L1075.00 142.81 L1087.50 150.87 L1100.00 159.50 L1112.50 168.55 L1125.00 177.86 L1137.50 187.27 L1150.00 196.64 L1162.50 205.78 L1175.00 214.55 L1187.50 222.80 L1200.00 230.38 L1200 400 L0 400 Z" fill="#6366f1" opacity="0.667"/><path d="M0.00 286.95 L12.50 287.94 L25.00 287.70 L37.50 286.23 L50.00 283.57 L62.50 279.74 L75.00 274.82 L87.50 268.90 L100.00 262.07 L112.50 254.46 L125.00 246.18 L137.50 237.39 L150.00 228.24 L162.50 218.87 L175.00 209.46 L187.50 200.15 L200.00 191.12 L212.50 182.52 L225.00 174.48 L237.50 167.16 L250.00 160.67 L262.50 155.13 L275.00 150.63 L287.50 147.25 L300.00 145.05 L312.50 144.06 L325.00 144.30 L337.50 145.77 L350.00 148.43 L362.50 152.26 L375.00 157.18 L387.50 163.10 L400.00 169.93 L412.50 177.54 L425.00 185.82 L437.50 194.61 L450.00 203.76 L462.50 213.13 L475.00 222.54 L487.50 231.85 L500.00 240.88 L512.50 249.48 L525.00 257.52 L537.50 264.84 L550.00 271.33 L562.50 276.87 L575.00 281.37 L587.50 284.75 L600.00 286.95 L612.50 287.94 L625.00 287.70 L637.50 286.23 L650.00 283.57 L662.50 279.74 L675.00 274.82 L687.50 268.90 L700.00 262.07 L712.50 254.46 L725.00 246.18 L737.50 237.39 L750.00 228.24 L762.50 218.87 L775.00 209.46 L787.50 200.15 L800.00 191.12 L812.50 182.52 L825.00 174.48 L837.50 167.16 L850.00 160.67 L862.50 155.13 L875.00 150.63 L887.50 147.25 L900.00 145.05 L912.50 144.06 L925.00 144.30 L937.50 145.77 L950.00 148.43 L962.50 152.26 L975.00 157.18 L987.50 163.10 L1000.00 169.93 L1012.50 177.54 L1025.00 185.82 L1037.50 194.61 L1050.00 203.76 L1062.50 213.13 L1075.00 222.54 L1087.50 231.85 L1100.00 240.88 L1112.50 249.48 L1125.00 257.52 L1137.50 264.84 L1150.00 271.33 L1162.50 276.87 L1175.00 281.37 L1187.50 284.75 L1200.00 286.95 L1200 400 L0 400 Z" fill="#6366f1" opacity="1.000"/></svg>

Image processing and generated artwork stay in your browser. Files are not uploaded by this tool.

GET STARTED

How to use the SVG Wave Generator

01
Set the canvas width and height, then choose the number of wave cycles.
02
Change amplitude, layer count, wave color, and background. Flip vertically to create a top-edge decoration.
03
Download a scalable SVG, render a PNG at the chosen dimensions, or copy the SVG source.

Examples

Quiet page divider

Use 1200 × 240, amplitude 10%, one cycle, and two layers. The long, shallow curve creates a subtle section transition.

Lively illustrated background

Use 1200 × 400, amplitude 30%, three cycles, and four layers. Match the background to the page section that will hold the graphic.

How the wave is constructed

Each layer follows a sine curve sampled at 48 segments per cycle. Successive layers receive a vertical offset, a phase shift, and a different opacity. Paths close against the canvas edge, creating filled bands rather than thin line strokes. At large zoom levels the sampled path consists of straight segments.

Use SVG or PNG

SVG keeps the path geometry and can scale with a responsive layout. PNG fixes the dimensions and color rendering into pixels. The background is deliberately opaque, so match it to your page or edit the generated SVG after downloading if you need a different composition.

What to know

Maximum canvas size is 4,096 × 2,048 pixels.
These are static illustrations, not animated waves or physically simulated water.

Common questions

Are these Bézier waves?

No. This tool samples a sine function into line segments. It uses enough samples for a smooth appearance at typical banner sizes, while keeping the geometry predictable.

Does a flipped wave change the export?

Yes. The vertical reflection is saved in the SVG and applied to PNG rendering.

Can I reuse the same wave later?

Yes. The output is deterministic for the same width, height, amplitude, cycles, layers, colors, and flip setting. Save the SVG to preserve the exact result.

Sources & references

MDN: SVG path commands