top.svg

<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 500" 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,500 C 0,500 0,100 0,100 C 109.12918660287079,97.13875598086125 218.25837320574158,94.27751196172248 318,91 C 417.7416267942584,87.72248803827752 508.0956937799044,84.02870813397129 590,83 C 671.9043062200956,81.97129186602871 745.3588516746411,83.60765550239235 841,78 C 936.6411483253589,72.39234449760765 1054.468899521531,59.54066985645933 1158,62 C 1261.531100478469,64.45933014354067 1350.7655502392345,82.22966507177034 1440,100 C 1440,100 1440,500 1440,500 Z");
            }
            25%{
              d: path("M 0,500 C 0,500 0,100 0,100 C 108.1531100478469,122.30622009569379 216.3062200956938,144.61244019138758 302,135 C 387.6937799043062,125.38755980861244 450.92822966507174,83.85645933014355 558,85 C 665.0717703349283,86.14354066985645 815.9808612440191,129.96172248803828 915,128 C 1014.0191387559809,126.03827751196172 1061.1483253588517,78.29665071770334 1140,66 C 1218.8516746411483,53.70334928229666 1329.4258373205741,76.85167464114832 1440,100 C 1440,100 1440,500 1440,500 Z");
            }
            50%{
              d: path("M 0,500 C 0,500 0,100 0,100 C 109.14832535885168,82.49760765550239 218.29665071770336,64.99521531100478 302,66 C 385.70334928229664,67.00478468899522 443.9617224880383,86.51674641148324 524,92 C 604.0382775119617,97.48325358851676 705.8564593301435,88.93779904306221 810,91 C 914.1435406698565,93.06220095693779 1020.6124401913876,105.73205741626795 1126,109 C 1231.3875598086124,112.26794258373205 1335.6937799043062,106.13397129186603 1440,100 C 1440,100 1440,500 1440,500 Z");
            }
            75%{
              d: path("M 0,500 C 0,500 0,100 0,100 C 99.11004784688996,88.80382775119617 198.2200956937799,77.60765550239235 296,73 C 393.7799043062201,68.39234449760765 490.22966507177034,70.37320574162678 583,75 C 675.7703349282297,79.62679425837322 764.8612440191388,86.89952153110048 846,84 C 927.1387559808612,81.10047846889952 1000.3253588516748,68.02870813397129 1098,69 C 1195.6746411483252,69.97129186602871 1317.8373205741627,84.98564593301435 1440,100 C 1440,100 1440,500 1440,500 Z");
            }
            100%{
              d: path("M 0,500 C 0,500 0,100 0,100 C 109.12918660287079,97.13875598086125 218.25837320574158,94.27751196172248 318,91 C 417.7416267942584,87.72248803827752 508.0956937799044,84.02870813397129 590,83 C 671.9043062200956,81.97129186602871 745.3588516746411,83.60765550239235 841,78 C 936.6411483253589,72.39234449760765 1054.468899521531,59.54066985645933 1158,62 C 1261.531100478469,64.45933014354067 1350.7655502392345,82.22966507177034 1440,100 C 1440,100 1440,500 1440,500 Z");
            }
          }</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#eb144c44"></stop><stop offset="95%" stop-color="#0693e344"></stop></linearGradient></defs><path d="M 0,500 C 0,500 0,100 0,100 C 109.12918660287079,97.13875598086125 218.25837320574158,94.27751196172248 318,91 C 417.7416267942584,87.72248803827752 508.0956937799044,84.02870813397129 590,83 C 671.9043062200956,81.97129186602871 745.3588516746411,83.60765550239235 841,78 C 936.6411483253589,72.39234449760765 1054.468899521531,59.54066985645933 1158,62 C 1261.531100478469,64.45933014354067 1350.7655502392345,82.22966507177034 1440,100 C 1440,100 1440,500 1440,500 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 250)"></path><style>
          .path-1{
            animation:pathAnim-1 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-1{
            0%{
              d: path("M 0,500 C 0,500 0,200 0,200 C 92.21052631578945,206.29665071770336 184.4210526315789,212.5933014354067 284,216 C 383.5789473684211,219.4066985645933 490.52631578947376,219.92344497607655 579,223 C 667.4736842105262,226.07655502392345 737.4736842105265,231.71291866028704 829,232 C 920.5263157894735,232.28708133971296 1033.578947368421,227.2248803827751 1139,221 C 1244.421052631579,214.7751196172249 1342.2105263157896,207.38755980861245 1440,200 C 1440,200 1440,500 1440,500 Z");
            }
            25%{
              d: path("M 0,500 C 0,500 0,200 0,200 C 99.09090909090907,204.05741626794259 198.18181818181813,208.11483253588517 280,202 C 361.81818181818187,195.88516746411483 426.3636363636364,179.59808612440193 529,179 C 631.6363636363636,178.40191387559807 772.3636363636364,193.49282296650716 873,190 C 973.6363636363636,186.50717703349284 1034.1818181818182,164.4306220095694 1122,163 C 1209.8181818181818,161.5693779904306 1324.909090909091,180.7846889952153 1440,200 C 1440,200 1440,500 1440,500 Z");
            }
            50%{
              d: path("M 0,500 C 0,500 0,200 0,200 C 127.41626794258374,219.85645933014354 254.8325358851675,239.7129186602871 333,233 C 411.1674641148325,226.2870813397129 440.0861244019138,193.00478468899522 541,189 C 641.9138755980862,184.99521531100478 814.8229665071771,210.26794258373207 912,222 C 1009.1770334928229,233.73205741626793 1030.622009569378,231.92344497607655 1106,226 C 1181.377990430622,220.07655502392345 1310.688995215311,210.03827751196172 1440,200 C 1440,200 1440,500 1440,500 Z");
            }
            75%{
              d: path("M 0,500 C 0,500 0,200 0,200 C 113.20574162679426,185.17703349282294 226.41148325358853,170.35406698564591 326,170 C 425.58851674641147,169.64593301435409 511.5598086124402,183.76076555023923 611,183 C 710.4401913875598,182.23923444976077 823.3492822966507,166.60287081339715 908,165 C 992.6507177033493,163.39712918660285 1049.043062200957,175.82775119617224 1133,184 C 1216.956937799043,192.17224880382776 1328.4784688995214,196.08612440191388 1440,200 C 1440,200 1440,500 1440,500 Z");
            }
            100%{
              d: path("M 0,500 C 0,500 0,200 0,200 C 92.21052631578945,206.29665071770336 184.4210526315789,212.5933014354067 284,216 C 383.5789473684211,219.4066985645933 490.52631578947376,219.92344497607655 579,223 C 667.4736842105262,226.07655502392345 737.4736842105265,231.71291866028704 829,232 C 920.5263157894735,232.28708133971296 1033.578947368421,227.2248803827751 1139,221 C 1244.421052631579,214.7751196172249 1342.2105263157896,207.38755980861245 1440,200 C 1440,200 1440,500 1440,500 Z");
            }
          }</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#eb144c66"></stop><stop offset="95%" stop-color="#0693e366"></stop></linearGradient></defs><path d="M 0,500 C 0,500 0,200 0,200 C 92.21052631578945,206.29665071770336 184.4210526315789,212.5933014354067 284,216 C 383.5789473684211,219.4066985645933 490.52631578947376,219.92344497607655 579,223 C 667.4736842105262,226.07655502392345 737.4736842105265,231.71291866028704 829,232 C 920.5263157894735,232.28708133971296 1033.578947368421,227.2248803827751 1139,221 C 1244.421052631579,214.7751196172249 1342.2105263157896,207.38755980861245 1440,200 C 1440,200 1440,500 1440,500 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-1" transform="rotate(-180 720 250)"></path><style>
          .path-2{
            animation:pathAnim-2 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-2{
            0%{
              d: path("M 0,500 C 0,500 0,300 0,300 C 63.55980861244021,314.5645933014354 127.11961722488041,329.12918660287085 243,333 C 358.8803827751196,336.87081339712915 527.0813397129186,330.04784688995215 621,314 C 714.9186602870814,297.95215311004785 734.5550239234449,272.67942583732054 812,269 C 889.4449760765551,265.32057416267946 1024.6985645933016,283.23444976076553 1139,292 C 1253.3014354066984,300.76555023923447 1346.650717703349,300.38277511961724 1440,300 C 1440,300 1440,500 1440,500 Z");
            }
            25%{
              d: path("M 0,500 C 0,500 0,300 0,300 C 69.57894736842107,311.9712918660287 139.15789473684214,323.9425837320574 238,320 C 336.84210526315786,316.0574162679426 464.9473684210526,296.200956937799 558,299 C 651.0526315789474,301.799043062201 709.0526315789475,327.25358851674645 816,328 C 922.9473684210525,328.74641148325355 1078.842105263158,304.7846889952153 1191,296 C 1303.157894736842,287.2153110047847 1371.578947368421,293.6076555023924 1440,300 C 1440,300 1440,500 1440,500 Z");
            }
            50%{
              d: path("M 0,500 C 0,500 0,300 0,300 C 120.8133971291866,280.8038277511962 241.6267942583732,261.60765550239233 324,272 C 406.3732057416268,282.39234449760767 450.3062200956938,322.37320574162686 540,335 C 629.6937799043062,347.62679425837314 765.1483253588518,332.89952153110045 875,324 C 984.8516746411482,315.10047846889955 1069.1004784688996,312.0287081339713 1159,309 C 1248.8995215311004,305.9712918660287 1344.4497607655503,302.9856459330143 1440,300 C 1440,300 1440,500 1440,500 Z");
            }
            75%{
              d: path("M 0,500 C 0,500 0,300 0,300 C 89.33014354066987,313.4354066985646 178.66028708133973,326.87081339712915 261,319 C 343.33971291866027,311.12918660287085 418.6889952153109,281.9521531100479 531,282 C 643.3110047846891,282.0478468899521 792.5837320574163,311.32057416267946 904,318 C 1015.4162679425837,324.67942583732054 1088.9760765550238,308.7655502392344 1172,302 C 1255.0239234449762,295.2344497607656 1347.5119617224882,297.61722488038276 1440,300 C 1440,300 1440,500 1440,500 Z");
            }
            100%{
              d: path("M 0,500 C 0,500 0,300 0,300 C 63.55980861244021,314.5645933014354 127.11961722488041,329.12918660287085 243,333 C 358.8803827751196,336.87081339712915 527.0813397129186,330.04784688995215 621,314 C 714.9186602870814,297.95215311004785 734.5550239234449,272.67942583732054 812,269 C 889.4449760765551,265.32057416267946 1024.6985645933016,283.23444976076553 1139,292 C 1253.3014354066984,300.76555023923447 1346.650717703349,300.38277511961724 1440,300 C 1440,300 1440,500 1440,500 Z");
            }
          }</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#eb144c88"></stop><stop offset="95%" stop-color="#0693e388"></stop></linearGradient></defs><path d="M 0,500 C 0,500 0,300 0,300 C 63.55980861244021,314.5645933014354 127.11961722488041,329.12918660287085 243,333 C 358.8803827751196,336.87081339712915 527.0813397129186,330.04784688995215 621,314 C 714.9186602870814,297.95215311004785 734.5550239234449,272.67942583732054 812,269 C 889.4449760765551,265.32057416267946 1024.6985645933016,283.23444976076553 1139,292 C 1253.3014354066984,300.76555023923447 1346.650717703349,300.38277511961724 1440,300 C 1440,300 1440,500 1440,500 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-2" transform="rotate(-180 720 250)"></path><style>
          .path-3{
            animation:pathAnim-3 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-3{
            0%{
              d: path("M 0,500 C 0,500 0,400 0,400 C 92.29665071770336,410.7464114832536 184.59330143540672,421.49282296650716 293,425 C 401.4066985645933,428.50717703349284 525.9234449760766,424.7751196172249 625,409 C 724.0765550239234,393.2248803827751 797.7129186602871,365.4066985645933 892,367 C 986.2870813397129,368.5933014354067 1101.2248803827752,399.5980861244019 1196,410 C 1290.7751196172248,420.4019138755981 1365.3875598086124,410.20095693779905 1440,400 C 1440,400 1440,500 1440,500 Z");
            }
            25%{
              d: path("M 0,500 C 0,500 0,400 0,400 C 119.34928229665073,412.6794258373206 238.69856459330146,425.3588516746412 339,424 C 439.30143540669854,422.6411483253588 520.555023923445,407.244019138756 593,399 C 665.444976076555,390.755980861244 729.0813397129187,389.6650717703349 818,387 C 906.9186602870813,384.3349282296651 1021.1196172248804,380.0956937799043 1129,382 C 1236.8803827751196,383.9043062200957 1338.44019138756,391.95215311004785 1440,400 C 1440,400 1440,500 1440,500 Z");
            }
            50%{
              d: path("M 0,500 C 0,500 0,400 0,400 C 125.72248803827753,399.36842105263156 251.44497607655506,398.7368421052632 332,389 C 412.55502392344494,379.2631578947368 447.9425837320573,360.42105263157896 543,371 C 638.0574162679427,381.57894736842104 792.7846889952154,421.57894736842104 913,430 C 1033.2153110047846,438.42105263157896 1118.9186602870814,415.2631578947368 1201,405 C 1283.0813397129186,394.7368421052632 1361.5406698564593,397.36842105263156 1440,400 C 1440,400 1440,500 1440,500 Z");
            }
            75%{
              d: path("M 0,500 C 0,500 0,400 0,400 C 79.60765550239233,415.6555023923445 159.21531100478467,431.311004784689 246,419 C 332.78468899521533,406.688995215311 426.7464114832537,366.41148325358853 537,365 C 647.2535885167463,363.58851674641147 773.799043062201,401.0430622009569 882,418 C 990.200956937799,434.9569377990431 1080.0574162679427,431.4162679425837 1170,425 C 1259.9425837320573,418.5837320574163 1349.9712918660287,409.2918660287081 1440,400 C 1440,400 1440,500 1440,500 Z");
            }
            100%{
              d: path("M 0,500 C 0,500 0,400 0,400 C 92.29665071770336,410.7464114832536 184.59330143540672,421.49282296650716 293,425 C 401.4066985645933,428.50717703349284 525.9234449760766,424.7751196172249 625,409 C 724.0765550239234,393.2248803827751 797.7129186602871,365.4066985645933 892,367 C 986.2870813397129,368.5933014354067 1101.2248803827752,399.5980861244019 1196,410 C 1290.7751196172248,420.4019138755981 1365.3875598086124,410.20095693779905 1440,400 C 1440,400 1440,500 1440,500 Z");
            }
          }</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#eb144cff"></stop><stop offset="95%" stop-color="#0693e3ff"></stop></linearGradient></defs><path d="M 0,500 C 0,500 0,400 0,400 C 92.29665071770336,410.7464114832536 184.59330143540672,421.49282296650716 293,425 C 401.4066985645933,428.50717703349284 525.9234449760766,424.7751196172249 625,409 C 724.0765550239234,393.2248803827751 797.7129186602871,365.4066985645933 892,367 C 986.2870813397129,368.5933014354067 1101.2248803827752,399.5980861244019 1196,410 C 1290.7751196172248,420.4019138755981 1365.3875598086124,410.20095693779905 1440,400 C 1440,400 1440,500 1440,500 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-3" transform="rotate(-180 720 250)"></path></svg>