img/waves_.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="100%"
   height="100%"
   id="svg"
   viewBox="0 0 1440 400"
   class="transition duration-300 ease-in-out delay-150"
   version="1.1"
   sodipodi:docname="waves_.svg"
   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
   inkscape:export-filename="waves.svg"
   inkscape:export-xdpi="96"
   inkscape:export-ydpi="96"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview107"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     showgrid="false"
     inkscape:zoom="0.56666667"
     inkscape:cx="635.29412"
     inkscape:cy="-17.647059"
     inkscape:window-width="1366"
     inkscape:window-height="715"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg" />
  <style
     id="style59">
          .path-0{
            animation:pathAnim-0 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-0{
            0%{
              d: path(&quot;M 0,400 C 0,400 0,80 0,80 C 299.5,80 599,80 839,80 C 1079,80 1259.5,80 1440,80 C 1440,80 1440,400 1440,400 Z&quot;);
            }
            25%{
              d: path(&quot;M 0,400 C 0,400 0,80 0,80 C 249,67.5 498,55 738,55 C 978,55 1209,67.5 1440,80 C 1440,80 1440,400 1440,400 Z&quot;);
            }
            50%{
              d: path(&quot;M 0,400 C 0,400 0,80 0,80 C 184,76 368,72 608,72 C 848,72 1144,76 1440,80 C 1440,80 1440,400 1440,400 Z&quot;);
            }
            75%{
              d: path(&quot;M 0,400 C 0,400 0,80 0,80 C 208.5,94 417,108 657,108 C 897,108 1168.5,94 1440,80 C 1440,80 1440,400 1440,400 Z&quot;);
            }
            100%{
              d: path(&quot;M 0,400 C 0,400 0,80 0,80 C 299.5,80 599,80 839,80 C 1079,80 1259.5,80 1440,80 C 1440,80 1440,400 1440,400 Z&quot;);
            }
          }</style>
  <defs
     id="defs66">
    <linearGradient
       id="gradient"
       x1="96%"
       y1="31%"
       x2="4%"
       y2="69%">
      <stop
         offset="5%"
         stop-color="#8ed1fc"
         id="stop61" />
      <stop
         offset="95%"
         stop-color="#00d084"
         id="stop63" />
    </linearGradient>
  </defs>
  <path
     d="M 33.529412,400 C -14.585624,411.32811 3.5261513,196.67319 0,80 h 839 601 c 2.1138,224.17909 15.1471,316.7157 -16.3235,319.55882 z"
     stroke="none"
     stroke-width="0"
     fill="url(#gradient)"
     fill-opacity="0.265"
     class="transition-all duration-300 ease-in-out delay-150 path-0"
     id="path68"
     sodipodi:nodetypes="cccccc" />
  <style
     id="style70">
          .path-1{
            animation:pathAnim-1 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-1{
            0%{
              d: path(&quot;M 0,400 C 0,400 0,160 0,160 C 296,158 592,156 832,156 C 1072,156 1256,158 1440,160 C 1440,160 1440,400 1440,400 Z&quot;);
            }
            25%{
              d: path(&quot;M 0,400 C 0,400 0,160 0,160 C 246,172 492,184 732,184 C 972,184 1206,172 1440,160 C 1440,160 1440,400 1440,400 Z&quot;);
            }
            50%{
              d: path(&quot;M 0,400 C 0,400 0,160 0,160 C 222.5,146 445,132 685,132 C 925,132 1182.5,146 1440,160 C 1440,160 1440,400 1440,400 Z&quot;);
            }
            75%{
              d: path(&quot;M 0,400 C 0,400 0,160 0,160 C 305.5,168.5 611,177 851,177 C 1091,177 1265.5,168.5 1440,160 C 1440,160 1440,400 1440,400 Z&quot;);
            }
            100%{
              d: path(&quot;M 0,400 C 0,400 0,160 0,160 C 296,158 592,156 832,156 C 1072,156 1256,158 1440,160 C 1440,160 1440,400 1440,400 Z&quot;);
            }
          }</style>
  <defs
     id="defs78">
    <linearGradient
       id="linearGradient76"
       x1="96%"
       y1="31%"
       x2="4%"
       y2="69%">
      <stop
         offset="5%"
         stop-color="#8ed1fc"
         id="stop72" />
      <stop
         offset="95%"
         stop-color="#00d084"
         id="stop74" />
    </linearGradient>
  </defs>
  <path
     d="M 35.735294,399.55883 C -21.076089,404.74848 6.6143643,205.58865 0,160 c 296,-2 592,-4 832,-4 240,0 424,2 608,4 -5.1231,143.61434 15.3481,238.63051 -17.6471,238.67647 z"
     stroke="none"
     stroke-width="0"
     fill="url(#gradient)"
     fill-opacity="0.4"
     class="transition-all duration-300 ease-in-out delay-150 path-1"
     id="path80"
     sodipodi:nodetypes="ccsccc" />
  <style
     id="style82">
          .path-2{
            animation:pathAnim-2 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-2{
            0%{
              d: path(&quot;M 0,400 C 0,400 0,240 0,240 C 188,237.5 376,235 616,235 C 856,235 1148,237.5 1440,240 C 1440,240 1440,400 1440,400 Z&quot;);
            }
            25%{
              d: path(&quot;M 0,400 C 0,400 0,240 0,240 C 243,242 486,244 726,244 C 966,244 1203,242 1440,240 C 1440,240 1440,400 1440,400 Z&quot;);
            }
            50%{
              d: path(&quot;M 0,400 C 0,400 0,240 0,240 C 274.5,253.5 549,267 789,267 C 1029,267 1234.5,253.5 1440,240 C 1440,240 1440,400 1440,400 Z&quot;);
            }
            75%{
              d: path(&quot;M 0,400 C 0,400 0,240 0,240 C 213.5,237 427,234 667,234 C 907,234 1173.5,237 1440,240 C 1440,240 1440,400 1440,400 Z&quot;);
            }
            100%{
              d: path(&quot;M 0,400 C 0,400 0,240 0,240 C 188,237.5 376,235 616,235 C 856,235 1148,237.5 1440,240 C 1440,240 1440,400 1440,400 Z&quot;);
            }
          }</style>
  <defs
     id="defs90">
    <linearGradient
       id="linearGradient88"
       x1="96%"
       y1="31%"
       x2="4%"
       y2="69%">
      <stop
         offset="5%"
         stop-color="#8ed1fc"
         id="stop84" />
      <stop
         offset="95%"
         stop-color="#00d084"
         id="stop86" />
    </linearGradient>
  </defs>
  <path
     d="M 29.558823,398.2353 C -6.671762,398.36756 2.2058823,253.62745 0.88235294,237.79412 188.88235,235.29412 376,235 616,235 c 240,0 532,2.5 824,5 0.7321,116.90157 0.839,158.76916 -16.3235,158.67647 z"
     stroke="none"
     stroke-width="0"
     fill="url(#gradient)"
     fill-opacity="0.53"
     class="transition-all duration-300 ease-in-out delay-150 path-2"
     id="path92"
     sodipodi:nodetypes="ccsccc" />
  <style
     id="style94">
          .path-3{
            animation:pathAnim-3 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-3{
            0%{
              d: path(&quot;M 0,400 C 0,400 0,320 0,320 C 267.5,305 535,290 775,290 C 1015,290 1227.5,305 1440,320 C 1440,320 1440,400 1440,400 Z&quot;);
            }
            25%{
              d: path(&quot;M 0,400 C 0,400 0,320 0,320 C 290.5,316.5 581,313 821,313 C 1061,313 1250.5,316.5 1440,320 C 1440,320 1440,400 1440,400 Z&quot;);
            }
            50%{
              d: path(&quot;M 0,400 C 0,400 0,320 0,320 C 200.5,329.5 401,339 641,339 C 881,339 1160.5,329.5 1440,320 C 1440,320 1440,400 1440,400 Z&quot;);
            }
            75%{
              d: path(&quot;M 0,400 C 0,400 0,320 0,320 C 289,333.5 578,347 818,347 C 1058,347 1249,333.5 1440,320 C 1440,320 1440,400 1440,400 Z&quot;);
            }
            100%{
              d: path(&quot;M 0,400 C 0,400 0,320 0,320 C 267.5,305 535,290 775,290 C 1015,290 1227.5,305 1440,320 C 1440,320 1440,400 1440,400 Z&quot;);
            }
          }</style>
  <defs
     id="defs102">
    <linearGradient
       id="linearGradient100"
       x1="96%"
       y1="31%"
       x2="4%"
       y2="69%">
      <stop
         offset="5%"
         stop-color="#8ed1fc"
         id="stop96" />
      <stop
         offset="95%"
         stop-color="#00d084"
         id="stop98" />
    </linearGradient>
  </defs>
  <path
     d="M 27.352941,399.11765 C -12.520467,400.21531 3.5609649,350.27693 0,320 c 267.5,-15 535,-30 775,-30 240,0 452.5,15 665,30 -2.3086,32.82641 7.6049,79.75532 -22.9412,80 z"
     stroke="none"
     stroke-width="0"
     fill="url(#gradient)"
     fill-opacity="1"
     class="transition-all duration-300 ease-in-out delay-150 path-3"
     id="path104"
     sodipodi:nodetypes="ccsccc" />
  <rect
     style="fill:none"
     id="rect529"
     width="199.41176"
     height="54.705883"
     x="-33.529411"
     y="407.64706" />
  <path
     style="fill:#000000"
     d="m 11.029412,344.11765 c 2.352941,-228.23529 1.17647,-114.11765 0,0 z"
     id="path533"
     sodipodi:nodetypes="cc" />
</svg>