Skip to main content

SVG Wave Generator

Generate decorative SVG waves

<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#667eea"/>
      <stop offset="100%" style="stop-color:#764ba2"/>
    </linearGradient>
  </defs>
  <path d="M0,50 L0,50 L10,53.128689300804616 L20,56.180339887498945 L30,59.079809994790935 L40,61.75570504584947 L50,64.14213562373095 L60,66.18033988749895 L70,67.82013048376736 L80,69.02113032590307 L90,69.75376681190275 L100,70 L110,69.75376681190275 L120,69.02113032590307 L130,67.82013048376736 L140,66.18033988749895 L150,64.14213562373095 L160,61.75570504584947 L170,59.079809994790935 L180,56.18033988749895 L190,53.128689300804616 L200,50 L210,46.871310699195384 L220,43.81966011250105 L230,40.92019000520908 L240,38.24429495415054 L250,35.85786437626905 L260,33.819660112501055 L270,32.17986951623264 L280,30.97886967409693 L290,30.246233188097246 L300,30 L310,30.246233188097243 L320,30.978869674096927 L330,32.17986951623264 L340,33.81966011250105 L350,35.85786437626905 L360,38.24429495415053 L370,40.920190005209065 L380,43.81966011250105 L390,46.87131069919538 L400,49.99999999999999 L400,100 L0,100 Z" fill="url(#waveGradient)" opacity="0.3"/>
  <path d="M0,66.66666666666667 L0,66.66666666666667 L10,72.51937632715052 L20,78.14716963761937 L30,83.33377365725474 L40,87.8798701022631 L50,91.61075503574303 L60,94.38305264200528 L70,96.09022507876358 L80,96.66666666666667 L90,96.09022507876358 L100,94.38305264200528 L110,91.61075503574303 L120,87.8798701022631 L130,83.33377365725474 L140,78.14716963761937 L150,72.51937632715052 L160,66.66666666666667 L170,60.81395700618282 L180,55.18616369571398 L190,49.99955967607861 L200,45.453463231070245 L210,41.72257829759032 L220,38.95028069132806 L230,37.24310825456976 L240,36.66666666666667 L250,37.24310825456976 L260,38.950280691328075 L270,41.7225782975903 L280,45.453463231070245 L290,49.999559676078604 L300,55.18616369571396 L310,60.81395700618281 L320,66.66666666666666 L330,72.51937632715052 L340,78.14716963761937 L350,83.33377365725472 L360,87.87987010226308 L370,91.61075503574303 L380,94.38305264200527 L390,96.09022507876358 L400,96.66666666666667 L400,100 L0,100 Z" fill="url(#waveGradient)" opacity="0.5333333333333333"/>
  <path d="M0,83.33333333333334 L0,83.33333333333334 L10,92.67114788756956 L20,101.49295332291521 L30,109.31125526654068 L40,115.69401310833123 L50,120.28851463378481 L60,122.84086695713886 L70,123.21002668265845 L80,121.37559398513949 L90,117.43893990749703 L100,111.61760458079524 L110,104.23327592197128 L120,95.69401310833125 L130,86.47169716244714 L140,77.07595473172411 L150,68.02599603872976 L160,59.82192324163442 L170,52.91709470933212 L180,47.69307236579863 L190,44.43853651742628 L200,43.33333333333334 L210,44.43853651742627 L220,47.69307236579864 L230,52.91709470933209 L240,59.82192324163441 L250,68.02599603872973 L260,77.0759547317241 L270,86.47169716244714 L280,95.69401310833123 L290,104.23327592197127 L300,111.61760458079524 L310,117.43893990749703 L320,121.37559398513949 L330,123.21002668265845 L340,122.84086695713886 L350,120.28851463378481 L360,115.69401310833125 L370,109.31125526654071 L380,101.4929533229152 L390,92.67114788756956 L400,83.33333333333336 L400,100 L0,100 Z" fill="url(#waveGradient)" opacity="0.7666666666666666"/>
</svg>