<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css-wave</title>
<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,125 0,125 C 31.9377447237775,138.53596542733925 63.875489447555,152.07193085467847 104,161 C 144.124510552445,169.92806914532153 192.4357869335575,174.2482420086253 228,156 C 263.5642130664425,137.7517579913747 286.381362818215,96.93510111082026 323,98 C 359.618637181785,99.06489888917974 410.0387617935826,142.01135354809364 454,149 C 497.9612382064174,155.98864645190636 535.4635900074551,127.0194846968052 568,129 C 600.5364099925449,130.9805153031948 628.1068781765972,163.91070766468567 658,159 C 687.8931218234028,154.08929233531433 720.1088972861561,111.33768464445207 759,96 C 797.8911027138439,80.66231535554793 843.4575326787786,92.738553757506 883,92 C 922.5424673212214,91.261446242494 956.0609719987285,77.70810032552393 992,80 C 1027.9390280012715,82.29189967447607 1066.2985793263076,100.42904494039826 1111,120 C 1155.7014206736924,139.57095505960174 1206.744710696041,160.57571991288293 1237,158 C 1267.255289303959,155.42428008711707 1276.7225778895277,129.26807540806996 1316,132 C 1355.2774221104723,134.73192459193004 1424.364977745849,166.35197845483714 1450,170 C 1475.635022254151,173.64802154516286 1457.8175111270755,149.32401077258143 1440,125 C 1440,125 1440,500 1440,500 Z"
);
}
25% {
d: path(
"M 0,500 C 0,500 0,125 0,125 C 27.636106107528775,129.59629255102212 55.27221221505755,134.19258510204423 99,137 C 142.72778778494245,139.80741489795577 202.54725724729855,140.82595214284515 239,136 C 275.45274275270145,131.17404785715485 288.53875879574815,120.5036063265751 317,134 C 345.46124120425185,147.4963936734249 389.2977075697089,185.1596225508545 429,171 C 468.7022924302911,156.8403774491455 504.2704109254164,90.85790347000687 547,88 C 589.7295890745836,85.14209652999313 639.6206487286253,145.40876356911798 677,157 C 714.3793512713747,168.59123643088202 739.2469941600826,131.50704225352115 773,112 C 806.7530058399174,92.49295774647887 849.3913746310448,90.5630674167975 893,87 C 936.6086253689552,83.4369325832025 981.1875073157378,78.2406880792889 1016,86 C 1050.8124926842622,93.7593119207111 1075.8585961060041,114.47418026604691 1113,127 C 1150.1414038939959,139.52581973395309 1199.378108260246,143.86259085652352 1231,148 C 1262.621891739754,152.13740914347648 1276.6289708530107,156.07545630785904 1310,139 C 1343.3710291469893,121.92454369214097 1396.1060083277114,83.83558391204028 1421,78 C 1445.8939916722886,72.16441608795972 1442.9469958361442,98.58220804397986 1440,125 C 1440,125 1440,500 1440,500 Z"
);
}
50% {
d: path(
"M 0,500 C 0,500 0,125 0,125 C 42.631659160952495,131.01778908082446 85.26331832190499,137.03557816164894 126,136 C 166.736681678095,134.96442183835106 205.57838587333248,126.87547643422869 237,132 C 268.4216141266675,137.1245235657713 292.42313818476504,155.46251610143636 328,152 C 363.57686181523496,148.53748389856364 410.72906138760766,123.27445916002588 446,105 C 481.27093861239234,86.72554083997412 504.66061626480473,75.43964725846007 538,85 C 571.3393837351953,94.56035274153993 614.6284735531736,124.96695180613386 662,122 C 709.3715264468264,119.03304819386614 760.825489522501,82.69254551700446 792,83 C 823.174510477499,83.30745448299554 834.0695683568229,120.26286612584826 871,123 C 907.9304316431771,125.73713387415174 970.8962370502074,94.25598997960246 1007,97 C 1043.1037629497926,99.74401002039754 1052.3454834423476,136.71317395574187 1087,152 C 1121.6545165576524,167.28682604425813 1181.7218291804018,160.89131419743 1220,153 C 1258.2781708195982,145.10868580257 1274.7671998360458,135.72156925453808 1312,122 C 1349.2328001639542,108.27843074546192 1407.2093714754153,90.2224087844177 1432,90 C 1456.7906285245847,89.7775912155823 1448.3953142622922,107.38879560779115 1440,125 C 1440,125 1440,500 1440,500 Z"
);
}
75% {
d: path(
"M 0,500 C 0,500 0,125 0,125 C 34.21256355579126,124.16355979746086 68.42512711158253,123.32711959492171 103,122 C 137.57487288841747,120.67288040507829 172.51205510946116,118.85508141777399 210,115 C 247.48794489053884,111.14491858222601 287.52665245057284,105.25255473398238 324,114 C 360.47334754942716,122.74744526601762 393.38133508824734,146.13469964629647 435,151 C 476.61866491175266,155.86530035370353 526.9480071964376,142.20864668083192 567,145 C 607.0519928035624,147.79135331916808 636.8266361260022,167.03071363037603 668,158 C 699.1733638739978,148.96928636962397 731.7454482995535,111.66849879766401 769,104 C 806.2545517004465,96.33150120233599 848.1915706757841,118.29529117896786 890,131 C 931.8084293242159,143.70470882103214 973.4882689973103,147.1503364864646 1009,137 C 1044.5117310026897,126.84966351353542 1073.855353334975,103.10336287517383 1107,111 C 1140.144646665025,118.89663712482617 1177.0903176627903,158.43621201284003 1217,167 C 1256.9096823372097,175.56378798715997 1299.7833760138642,153.15178907346615 1340,139 C 1380.2166239861358,124.84821092653385 1417.7761782817531,118.95663169329538 1434,118 C 1450.2238217182469,117.04336830670462 1445.1119108591233,121.02168415335231 1440,125 C 1440,125 1440,500 1440,500 Z"
);
}
100% {
d: path(
"M 0,500 C 0,500 0,125 0,125 C 31.9377447237775,138.53596542733925 63.875489447555,152.07193085467847 104,161 C 144.124510552445,169.92806914532153 192.4357869335575,174.2482420086253 228,156 C 263.5642130664425,137.7517579913747 286.381362818215,96.93510111082026 323,98 C 359.618637181785,99.06489888917974 410.0387617935826,142.01135354809364 454,149 C 497.9612382064174,155.98864645190636 535.4635900074551,127.0194846968052 568,129 C 600.5364099925449,130.9805153031948 628.1068781765972,163.91070766468567 658,159 C 687.8931218234028,154.08929233531433 720.1088972861561,111.33768464445207 759,96 C 797.8911027138439,80.66231535554793 843.4575326787786,92.738553757506 883,92 C 922.5424673212214,91.261446242494 956.0609719987285,77.70810032552393 992,80 C 1027.9390280012715,82.29189967447607 1066.2985793263076,100.42904494039826 1111,120 C 1155.7014206736924,139.57095505960174 1206.744710696041,160.57571991288293 1237,158 C 1267.255289303959,155.42428008711707 1276.7225778895277,129.26807540806996 1316,132 C 1355.2774221104723,134.73192459193004 1424.364977745849,166.35197845483714 1450,170 C 1475.635022254151,173.64802154516286 1457.8175111270755,149.32401077258143 1440,125 C 1440,125 1440,500 1440,500 Z"
);
}
}
</style>
<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,250 0,250 C 33.1908480614436,245.17573189059374 66.3816961228872,240.3514637811875 101,238 C 135.6183038771128,235.6485362188125 171.66406356989475,235.76987676584366 205,239 C 238.33593643010525,242.23012323415634 268.9620495975339,248.56902915543782 312,246 C 355.0379504024661,243.43097084456218 410.48773803996954,231.95400661240495 450,219 C 489.51226196003046,206.04599338759505 513.0869982425878,191.61494439494234 549,205 C 584.9130017574122,218.38505560505766 633.1642689896794,259.58621580782574 674,267 C 714.8357310103206,274.41378419217426 748.2559257986946,248.04019237375476 785,237 C 821.7440742013054,225.95980762624524 861.8120278155421,230.25301469715538 892,236 C 922.1879721844579,241.74698530284462 942.4959629391366,248.9477488376238 982,258 C 1021.5040370608634,267.0522511623762 1080.204120427911,277.95598995234946 1125,268 C 1169.795879572089,258.04401004765054 1200.6875553492198,227.2282913529785 1225,212 C 1249.3124446507802,196.7717086470215 1267.04565817521,197.13084463573662 1308,207 C 1348.95434182479,216.86915536426338 1413.12981194994,236.24833010407525 1439,245 C 1464.87018805006,253.75166989592475 1452.4350940250301,251.87583494796237 1440,250 C 1440,250 1440,500 1440,500 Z"
);
}
25% {
d: path(
"M 0,500 C 0,500 0,250 0,250 C 41.11928921075335,248.3897043603909 82.2385784215067,246.77940872078184 123,239 C 163.7614215784933,231.22059127921816 204.16497552472657,217.27206947726359 233,218 C 261.8350244752734,218.72793052273641 279.1015194795869,234.132313370164 311,251 C 342.8984805204131,267.867686629836 389.42894655692595,286.1986770420805 433,288 C 476.57105344307405,289.8013229579195 517.1826942927094,275.07297846151414 558,259 C 598.8173057072906,242.92702153848583 639.8402762722367,225.509409111863 677,230 C 714.1597237277633,234.490590888137 747.4562006183442,260.889385091034 784,263 C 820.5437993816558,265.110614908966 860.3349212543866,242.933050524001 900,234 C 939.6650787456134,225.066949475999 979.2041143641095,229.37841281296193 1010,244 C 1040.7958856358905,258.6215871870381 1062.848621289175,283.5532982241511 1095,277 C 1127.151378710825,270.4467017758489 1169.4014004791902,232.4083942904337 1210,225 C 1250.5985995208098,217.5916057095663 1289.5457767940643,240.813124614114 1337,248 C 1384.4542232059357,255.186875385886 1440.415492344553,246.33910725311029 1459,244 C 1477.584507655447,241.66089274688971 1458.7922538277235,245.83044637344486 1440,250 C 1440,250 1440,500 1440,500 Z"
);
}
50% {
d: path(
"M 0,500 C 0,500 0,250 0,250 C 24.823020328995966,243.39113241965703 49.64604065799193,236.78226483931402 92,234 C 134.35395934200807,231.21773516068598 194.2388576970282,232.2620730624009 234,224 C 273.7611423029718,215.7379269375991 293.3985285538951,198.16944291108248 319,203 C 344.6014714461049,207.83055708891752 376.1670280873912,235.06015529326925 422,253 C 467.8329719126088,270.93984470673075 527.93335909654,279.58993591584044 568,288 C 608.06664090346,296.41006408415956 628.0995355264489,304.580101043369 660,290 C 691.9004644735511,275.419898956631 735.668498797664,238.08965991068365 776,236 C 816.331501202336,233.91034008931635 853.2264692828948,267.0612593138965 887,279 C 920.7735307171052,290.9387406861035 951.4256240707564,281.6653028337302 994,282 C 1036.5743759292436,282.3346971662698 1091.0710344340791,292.2775293511828 1125,296 C 1158.9289655659209,299.7224706488172 1172.290238192927,297.2245797615386 1205,285 C 1237.709761807073,272.7754202384614 1289.768012794212,250.8241516026627 1333,241 C 1376.231987205788,231.1758483973373 1410.6377106302252,233.47881382781063 1427,237 C 1443.3622893697748,240.52118617218937 1441.6811446848874,245.26059308609467 1440,250 C 1440,250 1440,500 1440,500 Z"
);
}
75% {
d: path(
"M 0,500 C 0,500 0,250 0,250 C 27.74860672242547,251.97944092024795 55.49721344485094,253.95888184049588 91,242 C 126.50278655514906,230.04111815950412 169.75975294302168,204.14391355826444 213,211 C 256.2402470569783,217.85608644173556 299.4637747830624,257.46546392644626 338,256 C 376.5362252169376,254.53453607355374 410.38514792472876,211.99423073595062 445,213 C 479.61485207527124,214.00576926404938 514.9956335180227,258.5576131297513 550,256 C 585.0043664819773,253.4423868702487 619.6323180031806,203.77531674504414 657,204 C 694.3676819968194,204.22468325495586 734.4750944692546,254.34111989007212 773,255 C 811.5249055307454,255.65888010992788 848.467304119801,206.86020369466732 882,203 C 915.532695880199,199.13979630533268 945.6556890515411,240.2180653312586 981,246 C 1016.3443109484589,251.7819346687414 1056.9099396740346,222.2675349802981 1098,223 C 1139.0900603259654,223.7324650197019 1180.7045522523206,254.711794747549 1215,267 C 1249.2954477476794,279.288205252451 1276.271851316683,272.885286029506 1313,273 C 1349.728148683317,273.114713970494 1396.2080424809476,279.7470611344269 1419,277 C 1441.7919575190524,274.2529388655731 1440.8959787595263,262.12646943278656 1440,250 C 1440,250 1440,500 1440,500 Z"
);
}
100% {
d: path(
"M 0,500 C 0,500 0,250 0,250 C 33.1908480614436,245.17573189059374 66.3816961228872,240.3514637811875 101,238 C 135.6183038771128,235.6485362188125 171.66406356989475,235.76987676584366 205,239 C 238.33593643010525,242.23012323415634 268.9620495975339,248.56902915543782 312,246 C 355.0379504024661,243.43097084456218 410.48773803996954,231.95400661240495 450,219 C 489.51226196003046,206.04599338759505 513.0869982425878,191.61494439494234 549,205 C 584.9130017574122,218.38505560505766 633.1642689896794,259.58621580782574 674,267 C 714.8357310103206,274.41378419217426 748.2559257986946,248.04019237375476 785,237 C 821.7440742013054,225.95980762624524 861.8120278155421,230.25301469715538 892,236 C 922.1879721844579,241.74698530284462 942.4959629391366,248.9477488376238 982,258 C 1021.5040370608634,267.0522511623762 1080.204120427911,277.95598995234946 1125,268 C 1169.795879572089,258.04401004765054 1200.6875553492198,227.2282913529785 1225,212 C 1249.3124446507802,196.7717086470215 1267.04565817521,197.13084463573662 1308,207 C 1348.95434182479,216.86915536426338 1413.12981194994,236.24833010407525 1439,245 C 1464.87018805006,253.75166989592475 1452.4350940250301,251.87583494796237 1440,250 C 1440,250 1440,500 1440,500 Z"
);
}
}
</style>
<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,375 0,375 C 43.405592201052215,396.6086867564264 86.81118440210443,418.21737351285276 124,405 C 161.18881559789557,391.78262648714724 192.1608545926345,343.7391927050154 226,348 C 259.8391454073655,352.2608072949846 296.5453972273575,408.8258556670856 331,412 C 365.4546027726425,415.1741443329144 397.6575564979354,364.95738462664224 431,343 C 464.3424435020646,321.04261537335776 498.82437678090093,327.34460582634557 539,340 C 579.1756232190991,352.65539417365443 625.0449363784608,371.6641920679756 663,381 C 700.9550636215392,390.3358079320244 730.9958777052559,389.99862590175206 767,398 C 803.0041222947441,406.00137409824794 844.9715528005156,422.34130432501644 881,407 C 917.0284471994844,391.65869567498356 947.117911092682,344.6361567981821 981,334 C 1014.882088907318,323.3638432018179 1052.5568028287564,349.11406848225505 1094,373 C 1135.4431971712436,396.88593151774495 1180.6548775922922,418.9075692727976 1215,403 C 1249.3451224077078,387.0924307272024 1272.8236868020751,333.25565442655454 1318,334 C 1363.1763131979249,334.74434557344546 1430.0503751994072,390.06981302098444 1454,406 C 1477.9496248005928,421.93018697901556 1458.9748124002963,398.4650934895078 1440,375 C 1440,375 1440,500 1440,500 Z"
);
}
25% {
d: path(
"M 0,500 C 0,500 0,375 0,375 C 38.483055899663015,353.5421479837316 76.96611179932603,332.08429596746316 118,336 C 159.03388820067397,339.91570403253684 202.6186087023588,369.20496411387904 236,372 C 269.3813912976412,374.79503588612096 292.5594533912388,351.0958475770209 329,343 C 365.4405466087612,334.9041524229791 415.1435777326861,342.4116455780376 460,362 C 504.8564222673139,381.5883544219624 544.8662356780168,413.25757011082857 571,409 C 597.1337643219832,404.74242988917143 609.3914795552469,364.55807397864805 645,365 C 680.6085204447531,365.44192602135195 739.5678461009962,406.51013397457916 779,400 C 818.4321538990038,393.48986602542084 838.3371360407682,339.40139012303524 877,341 C 915.6628639592318,342.59860987696476 973.0836097359304,399.8843055332799 1009,421 C 1044.9163902640696,442.1156944667201 1059.3284250155102,427.0613877438449 1094,407 C 1128.6715749844898,386.9386122561551 1183.6026902020283,361.87014349134057 1227,348 C 1270.3973097979717,334.12985650865943 1302.2608141763772,331.4580382907929 1336,343 C 1369.7391858236228,354.5419617092071 1405.3540530924638,380.2977033454878 1423,388 C 1440.6459469075362,395.7022966545122 1440.322973453768,385.3511483272561 1440,375 C 1440,375 1440,500 1440,500 Z"
);
}
50% {
d: path(
"M 0,500 C 0,500 0,375 0,375 C 45.45348689694303,371.34444230810897 90.90697379388607,367.68888461621793 123,358 C 155.09302620611393,348.31111538378207 173.8255917213987,332.58890384323723 208,338 C 242.1744082786013,343.41109615676277 291.79065932051907,369.9555000108331 333,367 C 374.20934067948093,364.0444999891669 407.0117709965251,331.58909611343046 449,342 C 490.9882290034749,352.41090388656954 542.1622566933806,405.6881155354452 573,406 C 603.8377433066194,406.3118844645548 614.3392022299527,353.65844174478866 647,340 C 679.6607977700473,326.34155825521134 734.4809343868087,351.67811748540026 781,375 C 827.5190656131913,398.32188251459974 865.7370602228125,419.6290883136105 895,407 C 924.2629397771875,394.3709116863895 944.5708247219408,347.8055292601577 977,353 C 1009.4291752780592,358.1944707398423 1053.9796408894247,415.1487946457588 1092,412 C 1130.0203591105753,408.8512053542412 1161.5106117203602,345.59929215680694 1200,334 C 1238.4893882796398,322.40070784319306 1283.9779122291336,362.4540367270135 1326,375 C 1368.0220877708664,387.5459632729865 1406.5777393631047,372.584560935139 1425,368 C 1443.4222606368953,363.415439064861 1441.7111303184477,369.2077195324305 1440,375 C 1440,375 1440,500 1440,500 Z"
);
}
75% {
d: path(
"M 0,500 C 0,500 0,375 0,375 C 26.232313969730868,368.5802827530094 52.464627939461735,362.16056550601877 93,364 C 133.53537206053826,365.83943449398123 188.3738022118839,375.9380207289343 232,373 C 275.6261977881161,370.0619792710657 308.04016321300253,354.08735157824395 344,356 C 379.95983678699747,357.91264842175605 419.4655449361059,377.7125729580898 452,393 C 484.5344550638941,408.2874270419102 510.0976570425737,419.0623565893966 543,401 C 575.9023429574263,382.9376434106034 616.1438268935991,336.03800068432383 662,338 C 707.8561731064009,339.96199931567617 759.3270353830297,390.78564067330814 791,397 C 822.6729646169703,403.21435932669186 834.5480315742815,364.81943662244356 868,342 C 901.4519684257185,319.18056337755644 956.4808383198447,311.9366128369174 997,329 C 1037.5191616801553,346.0633871630826 1063.52861514634,387.43411202988676 1098,398 C 1132.47138485366,408.56588797011324 1175.4047010947954,388.3269390435355 1219,384 C 1262.5952989052046,379.6730609564645 1306.8525804744781,391.2581317959712 1343,386 C 1379.1474195255219,380.7418682040288 1407.1849770072922,358.64053377257966 1422,354 C 1436.8150229927078,349.35946622742034 1438.407511496354,362.1797331137102 1440,375 C 1440,375 1440,500 1440,500 Z"
);
}
100% {
d: path(
"M 0,500 C 0,500 0,375 0,375 C 43.405592201052215,396.6086867564264 86.81118440210443,418.21737351285276 124,405 C 161.18881559789557,391.78262648714724 192.1608545926345,343.7391927050154 226,348 C 259.8391454073655,352.2608072949846 296.5453972273575,408.8258556670856 331,412 C 365.4546027726425,415.1741443329144 397.6575564979354,364.95738462664224 431,343 C 464.3424435020646,321.04261537335776 498.82437678090093,327.34460582634557 539,340 C 579.1756232190991,352.65539417365443 625.0449363784608,371.6641920679756 663,381 C 700.9550636215392,390.3358079320244 730.9958777052559,389.99862590175206 767,398 C 803.0041222947441,406.00137409824794 844.9715528005156,422.34130432501644 881,407 C 917.0284471994844,391.65869567498356 947.117911092682,344.6361567981821 981,334 C 1014.882088907318,323.3638432018179 1052.5568028287564,349.11406848225505 1094,373 C 1135.4431971712436,396.88593151774495 1180.6548775922922,418.9075692727976 1215,403 C 1249.3451224077078,387.0924307272024 1272.8236868020751,333.25565442655454 1318,334 C 1363.1763131979249,334.74434557344546 1430.0503751994072,390.06981302098444 1454,406 C 1477.9496248005928,421.93018697901556 1458.9748124002963,398.4650934895078 1440,375 C 1440,375 1440,500 1440,500 Z"
);
}
}
</style>
</head>
<body>
<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"
>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#002bdc66"></stop>
<stop offset="95%" stop-color="#32ded466"></stop>
</linearGradient>
</defs>
<path
d="M 0,500 C 0,500 0,125 0,125 C 31.9377447237775,138.53596542733925 63.875489447555,152.07193085467847 104,161 C 144.124510552445,169.92806914532153 192.4357869335575,174.2482420086253 228,156 C 263.5642130664425,137.7517579913747 286.381362818215,96.93510111082026 323,98 C 359.618637181785,99.06489888917974 410.0387617935826,142.01135354809364 454,149 C 497.9612382064174,155.98864645190636 535.4635900074551,127.0194846968052 568,129 C 600.5364099925449,130.9805153031948 628.1068781765972,163.91070766468567 658,159 C 687.8931218234028,154.08929233531433 720.1088972861561,111.33768464445207 759,96 C 797.8911027138439,80.66231535554793 843.4575326787786,92.738553757506 883,92 C 922.5424673212214,91.261446242494 956.0609719987285,77.70810032552393 992,80 C 1027.9390280012715,82.29189967447607 1066.2985793263076,100.42904494039826 1111,120 C 1155.7014206736924,139.57095505960174 1206.744710696041,160.57571991288293 1237,158 C 1267.255289303959,155.42428008711707 1276.7225778895277,129.26807540806996 1316,132 C 1355.2774221104723,134.73192459193004 1424.364977745849,166.35197845483714 1450,170 C 1475.635022254151,173.64802154516286 1457.8175111270755,149.32401077258143 1440,125 C 1440,125 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"
></path>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#002bdc88"></stop>
<stop offset="95%" stop-color="#32ded488"></stop>
</linearGradient>
</defs>
<path
d="M 0,500 C 0,500 0,250 0,250 C 33.1908480614436,245.17573189059374 66.3816961228872,240.3514637811875 101,238 C 135.6183038771128,235.6485362188125 171.66406356989475,235.76987676584366 205,239 C 238.33593643010525,242.23012323415634 268.9620495975339,248.56902915543782 312,246 C 355.0379504024661,243.43097084456218 410.48773803996954,231.95400661240495 450,219 C 489.51226196003046,206.04599338759505 513.0869982425878,191.61494439494234 549,205 C 584.9130017574122,218.38505560505766 633.1642689896794,259.58621580782574 674,267 C 714.8357310103206,274.41378419217426 748.2559257986946,248.04019237375476 785,237 C 821.7440742013054,225.95980762624524 861.8120278155421,230.25301469715538 892,236 C 922.1879721844579,241.74698530284462 942.4959629391366,248.9477488376238 982,258 C 1021.5040370608634,267.0522511623762 1080.204120427911,277.95598995234946 1125,268 C 1169.795879572089,258.04401004765054 1200.6875553492198,227.2282913529785 1225,212 C 1249.3124446507802,196.7717086470215 1267.04565817521,197.13084463573662 1308,207 C 1348.95434182479,216.86915536426338 1413.12981194994,236.24833010407525 1439,245 C 1464.87018805006,253.75166989592475 1452.4350940250301,251.87583494796237 1440,250 C 1440,250 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"
></path>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#002bdcff"></stop>
<stop offset="95%" stop-color="#32ded4ff"></stop>
</linearGradient>
</defs>
<path
d="M 0,500 C 0,500 0,375 0,375 C 43.405592201052215,396.6086867564264 86.81118440210443,418.21737351285276 124,405 C 161.18881559789557,391.78262648714724 192.1608545926345,343.7391927050154 226,348 C 259.8391454073655,352.2608072949846 296.5453972273575,408.8258556670856 331,412 C 365.4546027726425,415.1741443329144 397.6575564979354,364.95738462664224 431,343 C 464.3424435020646,321.04261537335776 498.82437678090093,327.34460582634557 539,340 C 579.1756232190991,352.65539417365443 625.0449363784608,371.6641920679756 663,381 C 700.9550636215392,390.3358079320244 730.9958777052559,389.99862590175206 767,398 C 803.0041222947441,406.00137409824794 844.9715528005156,422.34130432501644 881,407 C 917.0284471994844,391.65869567498356 947.117911092682,344.6361567981821 981,334 C 1014.882088907318,323.3638432018179 1052.5568028287564,349.11406848225505 1094,373 C 1135.4431971712436,396.88593151774495 1180.6548775922922,418.9075692727976 1215,403 C 1249.3451224077078,387.0924307272024 1272.8236868020751,333.25565442655454 1318,334 C 1363.1763131979249,334.74434557344546 1430.0503751994072,390.06981302098444 1454,406 C 1477.9496248005928,421.93018697901556 1458.9748124002963,398.4650934895078 1440,375 C 1440,375 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"
></path>
</svg>
</body>
</html>
文档参考
https://www.lingdaima.com/svgwave/
https://codepen.io/Chokcoco/pen/awxYWZ
https://www.webtopic.com/css-wave-animation-examples/
1395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
