Revela-v4/public/img/mochawaves.svg

<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 590"
    xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
    <style>
          .path-0{
            animation:pathAnim-0 15s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-0{
            0%{
              d: path("M 0,600 L 0,112 C 133.2,136.13333333333333 266.4,160.26666666666668 417,163 C 567.6,165.73333333333332 735.5999999999999,147.06666666666666 909,135 C 1082.4,122.93333333333334 1261.2,117.46666666666667 1440,112 L 1440,600 L 0,600 Z");
            }
            25%{
              d: path("M 0,600 L 0,112 C 166.53333333333336,123.60000000000001 333.0666666666667,135.20000000000002 475,129 C 616.9333333333333,122.79999999999998 734.2666666666667,98.79999999999998 891,93 C 1047.7333333333333,87.20000000000002 1243.8666666666668,99.60000000000001 1440,112 L 1440,600 L 0,600 Z");
            }
            50%{
              d: path("M 0,600 L 0,112 C 178.66666666666669,132.53333333333333 357.33333333333337,153.06666666666666 507,164 C 656.6666666666666,174.93333333333334 777.3333333333333,176.26666666666668 928,166 C 1078.6666666666667,155.73333333333332 1259.3333333333335,133.86666666666667 1440,112 L 1440,600 L 0,600 Z");
            }
            75%{
              d: path("M 0,600 L 0,112 C 152,116.4 304,120.8 482,107 C 660,93.2 864,61.199999999999996 1028,59 C 1192,56.800000000000004 1316,84.4 1440,112 L 1440,600 L 0,600 Z");
            }
            100%{
              d: path("M 0,600 L 0,112 C 133.2,136.13333333333333 266.4,160.26666666666668 417,163 C 567.6,165.73333333333332 735.5999999999999,147.06666666666666 909,135 C 1082.4,122.93333333333334 1261.2,117.46666666666667 1440,112 L 1440,600 L 0,600 Z");
            }
          }</style>
    <defs>
        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
            <stop offset="5%" stop-color="#181825"></stop>
            <stop offset="95%" stop-color="#11111b"></stop>
        </linearGradient>
    </defs>
    <path d="M 0,600 L 0,112 C 133.2,136.13333333333333 266.4,160.26666666666668 417,163 C 567.6,165.73333333333332 735.5999999999999,147.06666666666666 909,135 C 1082.4,122.93333333333334 1261.2,117.46666666666667 1440,112 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
    <style>
          .path-1{
            animation:pathAnim-1 15s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-1{
            0%{
              d: path("M 0,600 L 0,262 C 126.53333333333336,275.4666666666667 253.06666666666672,288.93333333333334 423,294 C 592.9333333333333,299.06666666666666 806.2666666666667,295.73333333333335 983,289 C 1159.7333333333333,282.26666666666665 1299.8666666666668,272.1333333333333 1440,262 L 1440,600 L 0,600 Z");
            }
            25%{
              d: path("M 0,600 L 0,262 C 111.46666666666664,236.13333333333333 222.93333333333328,210.26666666666668 393,211 C 563.0666666666667,211.73333333333332 791.7333333333333,239.06666666666666 976,252 C 1160.2666666666667,264.93333333333334 1300.1333333333332,263.4666666666667 1440,262 L 1440,600 L 0,600 Z");
            }
            50%{
              d: path("M 0,600 L 0,262 C 164.66666666666663,293.3333333333333 329.33333333333326,324.66666666666663 508,314 C 686.6666666666667,303.33333333333337 879.3333333333335,250.66666666666669 1037,235 C 1194.6666666666665,219.33333333333331 1317.3333333333333,240.66666666666666 1440,262 L 1440,600 L 0,600 Z");
            }
            75%{
              d: path("M 0,600 L 0,262 C 122.13333333333333,279.4666666666667 244.26666666666665,296.93333333333334 392,303 C 539.7333333333333,309.06666666666666 713.0666666666668,303.73333333333335 892,295 C 1070.9333333333332,286.26666666666665 1255.4666666666667,274.1333333333333 1440,262 L 1440,600 L 0,600 Z");
            }
            100%{
              d: path("M 0,600 L 0,262 C 126.53333333333336,275.4666666666667 253.06666666666672,288.93333333333334 423,294 C 592.9333333333333,299.06666666666666 806.2666666666667,295.73333333333335 983,289 C 1159.7333333333333,282.26666666666665 1299.8666666666668,272.1333333333333 1440,262 L 1440,600 L 0,600 Z");
            }
          }</style>
    <defs>
        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
            <stop offset="5%" stop-color="#181825"></stop>
            <stop offset="95%" stop-color="#11111b"></stop>
        </linearGradient>
    </defs>
    <path d="M 0,600 L 0,262 C 126.53333333333336,275.4666666666667 253.06666666666672,288.93333333333334 423,294 C 592.9333333333333,299.06666666666666 806.2666666666667,295.73333333333335 983,289 C 1159.7333333333333,282.26666666666665 1299.8666666666668,272.1333333333333 1440,262 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
    <style>
          .path-2{
            animation:pathAnim-2 15s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-2{
            0%{
              d: path("M 0,600 L 0,412 C 126,431.20000000000005 252,450.40000000000003 417,459 C 582,467.59999999999997 786,465.6 963,456 C 1140,446.4 1290,429.2 1440,412 L 1440,600 L 0,600 Z");
            }
            25%{
              d: path("M 0,600 L 0,412 C 186.93333333333334,388 373.8666666666667,364 512,368 C 650.1333333333333,372 739.4666666666667,404 886,416 C 1032.5333333333333,428 1236.2666666666667,420 1440,412 L 1440,600 L 0,600 Z");
            }
            50%{
              d: path("M 0,600 L 0,412 C 139.33333333333331,406.4 278.66666666666663,400.8 438,405 C 597.3333333333334,409.2 776.6666666666667,423.20000000000005 947,426 C 1117.3333333333333,428.79999999999995 1278.6666666666665,420.4 1440,412 L 1440,600 L 0,600 Z");
            }
            75%{
              d: path("M 0,600 L 0,412 C 168.66666666666663,412.1333333333333 337.33333333333326,412.2666666666667 491,413 C 644.6666666666667,413.7333333333333 783.3333333333335,415.06666666666666 939,415 C 1094.6666666666665,414.93333333333334 1267.3333333333333,413.4666666666667 1440,412 L 1440,600 L 0,600 Z");
            }
            100%{
              d: path("M 0,600 L 0,412 C 126,431.20000000000005 252,450.40000000000003 417,459 C 582,467.59999999999997 786,465.6 963,456 C 1140,446.4 1290,429.2 1440,412 L 1440,600 L 0,600 Z");
            }
          }</style>
    <defs>
        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
            <stop offset="5%" stop-color="#181825"></stop>
            <stop offset="95%" stop-color="#11111b"></stop>
        </linearGradient>
    </defs>
    <path d="M 0,600 L 0,412 C 126,431.20000000000005 252,450.40000000000003 417,459 C 582,467.59999999999997 786,465.6 963,456 C 1140,446.4 1290,429.2 1440,412 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
</svg>