SVG Wave Generator

Generate wave patterns for website sections

Browser ProcessingYour data never leaves your browser

Wave Settings

Wave Count3
Amplitude40px
Smoothness10

Wave Type

Colors

Layer 1:
Opacity:
Layer 2:
Opacity:
Layer 3:
Opacity:

Preview

SVG Code

<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <path d="M 0 60.00 L 26.67 83.51 L 53.33 98.04 L 80.00 98.04 L 106.67 83.51 L 133.33 60.00 L 160.00 36.49 L 186.67 21.96 L 213.33 21.96 L 240.00 36.49 L 266.67 60.00 L 293.33 83.51 L 320.00 98.04 L 346.67 98.04 L 373.33 83.51 L 400.00 60.00 L 426.67 36.49 L 453.33 21.96 L 480.00 21.96 L 506.67 36.49 L 533.33 60.00 L 560.00 83.51 L 586.67 98.04 L 613.33 98.04 L 640.00 83.51 L 666.67 60.00 L 693.33 36.49 L 720.00 21.96 L 746.67 21.96 L 773.33 36.49 L 800.00 60.00 L 800 200 L 0 200 Z" fill="#3b82f6" fill-opacity="1" />
  <path d="M 0 112.51 L 26.67 129.48 L 53.33 132.64 L 80.00 120.79 L 106.67 98.45 L 133.33 74.16 L 160.00 57.19 L 186.67 54.02 L 213.33 65.87 L 240.00 88.21 L 266.67 112.51 L 293.33 129.48 L 320.00 132.64 L 346.67 120.79 L 373.33 98.45 L 400.00 74.16 L 426.67 57.19 L 453.33 54.02 L 480.00 65.87 L 506.67 88.21 L 533.33 112.51 L 560.00 129.48 L 586.67 132.64 L 613.33 120.79 L 640.00 98.45 L 666.67 74.16 L 693.33 57.19 L 720.00 54.02 L 746.67 65.87 L 773.33 88.21 L 800.00 112.51 L 800 200 L 0 200 Z" fill="#60a5fa" fill-opacity="0.8" />
  <path d="M 0 160.33 L 26.67 166.60 L 53.33 157.62 L 80.00 136.82 L 106.67 112.14 L 133.33 93.01 L 160.00 86.73 L 186.67 95.71 L 213.33 116.51 L 240.00 141.19 L 266.67 160.33 L 293.33 166.60 L 320.00 157.62 L 346.67 136.82 L 373.33 112.14 L 400.00 93.01 L 426.67 86.73 L 453.33 95.71 L 480.00 116.51 L 506.67 141.19 L 533.33 160.33 L 560.00 166.60 L 586.67 157.62 L 613.33 136.82 L 640.00 112.14 L 666.67 93.01 L 693.33 86.73 L 720.00 95.71 L 746.67 116.51 L 773.33 141.19 L 800.00 160.33 L 800 200 L 0 200 Z" fill="#93c5fd" fill-opacity="0.6" />
</svg>

Presets