SVG Wave Generator

Generate organic SVG wave shapes for section dividers and backgrounds. All processing happens in your browser.

SVG
<svg viewBox="0 0 1200 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <path d="M 0 200 L 0 60 Q 0 20.026296563471014 100 40.99663235339954 Q 200 61.96696814332807 300 70.40042535439174 Q 400 78.83388256545541 500 59.94916290040051 Q 600 41.0644432353456 700 45.58118045849835 Q 800 50.09791768165111 900 42.900391857047 Q 1000 35.702866032442884 1100 66.88638825610875 L 1200 98.06991047977462 L 1200 200 Z" fill="rgba(99, 102, 241, 1)" />
  <path d="M 0 200 L 0 86.66666666666667 Q 0 53.22121185550579 100 55.06469758233493 Q 200 56.90818330916407 300 66.37277970311492 Q 400 75.83737609706576 500 95.30889516445706 Q 600 114.78041423184837 700 88.60122747402752 Q 800 62.422040716206695 900 62.83040690965058 Q 1000 63.23877310309445 1100 58.649383116186954 L 1200 54.05999312927946 L 1200 200 Z" fill="rgba(79, 82, 193, 0.9)" />
  <path d="M 0 200 L 0 113.33333333333333 Q 0 86.22829428522688 100 102.5853886777399 Q 200 118.9424830702529 300 128.62781002430972 Q 400 138.31313697836654 500 127.60317800529597 Q 600 116.8932190322254 700 126.61284245980237 Q 800 136.33246588737933 900 114.04333709370655 Q 1000 91.75420830003378 1100 90.36674748395266 L 1200 88.97928666787155 L 1200 200 Z" fill="rgba(59, 61, 145, 0.8)" />
</svg>
#6366f1
Layers3
Complexity6
Amplitude40
Height200px