assets/animated-wave.svg

<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><style>
          .path-0{
            animation:pathAnim-0 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-0{
            0%{
              d: path("M 0,400 C 0,400 0,133 0,133 C 114.79425837320576,139.91866028708134 229.58851674641153,146.83732057416267 326,153 C 422.4114832535885,159.16267942583733 500.4401913875597,164.5693779904306 600,168 C 699.5598086124403,171.4306220095694 820.6507177033493,172.88516746411486 904,173 C 987.3492822966507,173.11483253588514 1032.956937799043,171.88995215311004 1116,165 C 1199.043062200957,158.11004784688996 1319.5215311004786,145.555023923445 1440,133 C 1440,133 1440,400 1440,400 Z");
            }
            25%{
              d: path("M 0,400 C 0,400 0,133 0,133 C 85.23444976076553,123.00956937799043 170.46889952153106,113.01913875598086 274,114 C 377.53110047846894,114.98086124401914 499.3588516746412,126.933014354067 607,121 C 714.6411483253588,115.066985645933 808.0956937799041,91.2488038277512 899,95 C 989.9043062200959,98.7511961722488 1078.2583732057417,130.07177033492823 1168,141 C 1257.7416267942583,151.92822966507177 1348.870813397129,142.46411483253587 1440,133 C 1440,133 1440,400 1440,400 Z");
            }
            50%{
              d: path("M 0,400 C 0,400 0,133 0,133 C 102.11483253588517,131.54545454545456 204.22966507177034,130.0909090909091 303,118 C 401.77033492822966,105.9090909090909 497.1961722488038,83.1818181818182 590,90 C 682.8038277511962,96.8181818181818 772.9856459330143,133.18181818181816 860,141 C 947.0143540669857,148.81818181818184 1030.8612440191387,128.09090909090907 1127,122 C 1223.1387559808613,115.90909090909092 1331.5693779904307,124.45454545454547 1440,133 C 1440,133 1440,400 1440,400 Z");
            }
            75%{
              d: path("M 0,400 C 0,400 0,133 0,133 C 125.8468899521531,140.00478468899522 251.6937799043062,147.00956937799043 335,156 C 418.3062200956938,164.99043062200957 459.07177033492826,175.96650717703346 552,168 C 644.9282296650717,160.03349282296654 790.019138755981,133.1244019138756 897,135 C 1003.980861244019,136.8755980861244 1072.8516746411483,167.5358851674641 1157,172 C 1241.1483253588517,176.4641148325359 1340.5741626794259,154.73205741626793 1440,133 C 1440,133 1440,400 1440,400 Z");
            }
            100%{
              d: path("M 0,400 C 0,400 0,133 0,133 C 114.79425837320576,139.91866028708134 229.58851674641153,146.83732057416267 326,153 C 422.4114832535885,159.16267942583733 500.4401913875597,164.5693779904306 600,168 C 699.5598086124403,171.4306220095694 820.6507177033493,172.88516746411486 904,173 C 987.3492822966507,173.11483253588514 1032.956937799043,171.88995215311004 1116,165 C 1199.043062200957,158.11004784688996 1319.5215311004786,145.555023923445 1440,133 C 1440,133 1440,400 1440,400 Z");
            }
          }</style><defs><linearGradient id="gradient" x1="50%" y1="100%" x2="50%" y2="0%"><stop offset="5%" stop-color="#fe428e"></stop><stop offset="95%" stop-color="#a0f0ea"></stop></linearGradient></defs><path d="M 0,400 C 0,400 0,133 0,133 C 114.79425837320576,139.91866028708134 229.58851674641153,146.83732057416267 326,153 C 422.4114832535885,159.16267942583733 500.4401913875597,164.5693779904306 600,168 C 699.5598086124403,171.4306220095694 820.6507177033493,172.88516746411486 904,173 C 987.3492822966507,173.11483253588514 1032.956937799043,171.88995215311004 1116,165 C 1199.043062200957,158.11004784688996 1319.5215311004786,145.555023923445 1440,133 C 1440,133 1440,400 1440,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path><style>
          .path-1{
            animation:pathAnim-1 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-1{
            0%{
              d: path("M 0,400 C 0,400 0,266 0,266 C 85.63636363636365,244.57416267942585 171.2727272727273,223.14832535885168 253,227 C 334.7272727272727,230.85167464114832 412.5454545454545,259.98086124401914 524,271 C 635.4545454545455,282.01913875598086 780.5454545454546,274.9282296650718 891,275 C 1001.4545454545454,275.0717703349282 1077.2727272727273,282.3062200956938 1163,282 C 1248.7272727272727,281.6937799043062 1344.3636363636365,273.8468899521531 1440,266 C 1440,266 1440,400 1440,400 Z");
            }
            25%{
              d: path("M 0,400 C 0,400 0,266 0,266 C 63.16746411483251,258.13397129186603 126.33492822966502,250.26794258373207 243,259 C 359.665071770335,267.73205741626793 529.8277511961722,293.0622009569378 623,299 C 716.1722488038278,304.9377990430622 732.3540669856459,291.48325358851673 811,285 C 889.6459330143541,278.51674641148327 1030.755980861244,279.00478468899524 1146,277 C 1261.244019138756,274.99521531100476 1350.622009569378,270.4976076555024 1440,266 C 1440,266 1440,400 1440,400 Z");
            }
            50%{
              d: path("M 0,400 C 0,400 0,266 0,266 C 100.25837320574163,248.08612440191388 200.51674641148327,230.17224880382773 305,232 C 409.48325358851673,233.82775119617227 518.1913875598086,255.3971291866029 613,259 C 707.8086124401914,262.6028708133971 788.7177033492825,248.23923444976072 868,254 C 947.2822966507175,259.7607655502393 1024.9377990430623,285.64593301435406 1120,291 C 1215.0622009569377,296.35406698564594 1327.531100478469,281.17703349282294 1440,266 C 1440,266 1440,400 1440,400 Z");
            }
            75%{
              d: path("M 0,400 C 0,400 0,266 0,266 C 104.70813397129183,243.3492822966507 209.41626794258366,220.69856459330143 309,228 C 408.58373205741634,235.30143540669857 503.043062200957,272.555023923445 598,284 C 692.956937799043,295.444976076555 788.4114832535885,281.08133971291863 881,276 C 973.5885167464115,270.91866028708137 1063.311004784689,275.11961722488036 1156,275 C 1248.688995215311,274.88038277511964 1344.3444976076555,270.4401913875598 1440,266 C 1440,266 1440,400 1440,400 Z");
            }
            100%{
              d: path("M 0,400 C 0,400 0,266 0,266 C 85.63636363636365,244.57416267942585 171.2727272727273,223.14832535885168 253,227 C 334.7272727272727,230.85167464114832 412.5454545454545,259.98086124401914 524,271 C 635.4545454545455,282.01913875598086 780.5454545454546,274.9282296650718 891,275 C 1001.4545454545454,275.0717703349282 1077.2727272727273,282.3062200956938 1163,282 C 1248.7272727272727,281.6937799043062 1344.3636363636365,273.8468899521531 1440,266 C 1440,266 1440,400 1440,400 Z");
            }
          }</style><defs><linearGradient id="gradient" x1="50%" y1="100%" x2="50%" y2="0%"><stop offset="5%" stop-color="#fe428e"></stop><stop offset="95%" stop-color="#a0f0ea"></stop></linearGradient></defs><path d="M 0,400 C 0,400 0,266 0,266 C 85.63636363636365,244.57416267942585 171.2727272727273,223.14832535885168 253,227 C 334.7272727272727,230.85167464114832 412.5454545454545,259.98086124401914 524,271 C 635.4545454545455,282.01913875598086 780.5454545454546,274.9282296650718 891,275 C 1001.4545454545454,275.0717703349282 1077.2727272727273,282.3062200956938 1163,282 C 1248.7272727272727,281.6937799043062 1344.3636363636365,273.8468899521531 1440,266 C 1440,266 1440,400 1440,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1"></path></svg>