前端-介绍一个好用的波浪背景生成器
前提：介绍一个好用的波浪背景生成器Svg Wave，它是一款轻量级、免费且功能强大的在线工具，专为UI设计师或网页开发者设计，用于快速生成可定制的矢量SVG波浪背景，生成SVG代码也可直接插入并运用于前端项目中。
在线网站(简洁)：Svg波浪背景生成器
在线网站(官网推荐站点)：Svg Wave - 一个免费且美丽的渐变SVG波形发生器。
一、核心功能
1.参数化波形设计
（1）基础形态：支持调整波浪层数、波峰数量（单峰/多峰）、振幅高度及波形复杂度（平滑/锯齿状）。
（2）动态控制：通过滑动条实时调节波浪间距、偏移量，实现波浪的灵活布局。
（3）高级效果：内置“波浪翻转”功能（上下镜像）、“渐变动画”选项（自动生成CSS关键帧代码），支持为波形添加动态视觉效果。
2.视觉风格定制
（1）渐变填充：提供线性/径向渐变模式，支持多色节点（2-6色）及透明度调节（0-100%）。
（2）纯色方案：内置200+预设色板（含Material Design、Pantone年度色等），支持HEX/RGB/HSLA多格式输入。
3.输出与兼容性
（1）多格式导出：一键生成SVG（矢量无损）、PNG（支持1x-4x分辨率）及CSS代码（含Base64编码），适配不同开发场景。
（2）无障碍支持：生成SVG文件可嵌入<title>和<desc>标签，满足WCAG 2.1无障碍标准。
二、技术特性与优势
1.性能优化
（1）波形渲染依赖原生<svg>元素，复杂场景下内存占用较Canvas方案降低60%。
（2）默认启用will-change: transform属性，提升动画帧率（移动端稳定60fps）。
（3）提供“懒加载”选项，通过Intersection Observer API实现波形在视口内按需渲染。
2.跨平台兼容
（1）兼容Chrome 80+、Firefox 75+、Safari 13+及Edge 80+，移动端适配iOS 12+/Android 9+。
（2）输出代码通过PostCSS自动添加浏览器前缀（如-webkit-），覆盖99%的全球用户设备。
（3）支持IE11，但部分渐变动画效果可能降级为静态展示。
3.优势
（1）设计效率提升
相较于传统工具（如Adobe Illustrator），Svg Wave将波形设计时间从30分钟缩短至3分钟，支持实时预览与参数联动。
提供“随机生成”，一键生成波形+预设。
（2）开发成本
生成的SVG代码可直接嵌入HTML，无需额外处理（如压缩、优化），减少前端工程师工作量。
支持与Figma、Sketch等设计工具插件集成（如Figma SVG Wave插件），实现设计-开发流程闭环。
三、应用场景
1.网页设计
（1）装饰：登录框背景，产品官网动态波浪分隔符等。
（2）404页面：通过波浪动画引导用户返回首页。
（3）数据可视化：图表背景（如折线图、面积图）。
2.移动端开发
（1）启动屏动画：为App生成加载页波浪过渡效果。
3.广告或营销
（1）活动页面：结合品牌主色调生成专属波浪背景。
（2）社交媒体：为Banner图添加动态波浪元素。
（3）印刷物料：导出高分辨率PNG用于海报、名片等线下场景（需注意CMYK色域转换）。
四、使用建议与注意事项
复杂波形（>5层）建议使用<defs>定义重复路径，减少DOM节点数量。
动画效果建议通过CSS @keyframes实现，避免直接操作DOM属性。
响应式设计中，通过媒体查询调整波形振幅（如移动端缩小30%）。
避免在代码中嵌入敏感信息（如API Key），SVG文件可能被直接查看。
输出代码无任何版权限制，可自由用于商业项目。
列子及效果
以下是直接在html中使用：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><svg width="100%" height="100%" id="svg" viewBox="0 0 1440 690" 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,700 L 0,105 C 49.80861244019138,127.5598218298131 99.61722488038276,150.1196436596262 147,143 C 194.38277511961724,135.8803563403738 239.33971291866027,99.08124719130825 279,86 C 318.66028708133973,72.91875280869175 353.0239234449761,83.55536757514076 405,86 C 456.9760765550239,88.44463242485924 526.5645933014354,82.69728250812868 578,82 C 629.4354066985646,81.30271749187132 662.7177033492824,85.65550239234452 702,78 C 741.2822966507176,70.34449760765548 786.5645933014351,50.68070792249332 847,56 C 907.4354066985649,61.31929207750668 983.0239234449762,91.62166591768222 1028,104 C 1072.9760765550238,116.37833408231778 1087.3397129186606,110.83262840677786 1126,115 C 1164.6602870813394,119.16737159322214 1227.6172248803828,133.0478204552063 1284,133 C 1340.3827751196172,132.9521795447937 1390.1913875598086,118.97608977239685 1440,105 L 1440,700 L 0,700 Z");}25%{d: path("M 0,700 L 0,105 C 55.70165745856353,118.9331200930503 111.40331491712706,132.8662401861006 156,141 C 200.59668508287294,149.1337598138994 234.08839779005524,151.46815934864784 284,144 C 333.91160220994476,136.53184065135216 400.2430939226519,119.26112241930795 456,123 C 511.7569060773481,126.73887758069205 556.9392265193371,151.48735097412037 591,152 C 625.0607734806629,152.51264902587963 648,128.78947368421052 696,113 C 744,97.21052631578947 817.0607734806629,89.35475428903752 876,98 C 934.9392265193371,106.64524571096248 979.756906077348,131.79150915963945 1022,126 C 1064.243093922652,120.20849084036055 1103.9116022099447,83.47920907240477 1154,85 C 1204.0883977900553,86.52079092759523 1264.5966850828727,126.2916545507415 1314,136 C 1363.4033149171273,145.7083454492585 1401.7016574585637,125.35417272462925 1440,105 L 1440,700 L 0,700 Z");}50%{d: path("M 0,700 L 0,105 C 46.55511644505539,123.05429696793465 93.11023289011078,141.1085939358693 135,143 C 176.88976710988922,144.8914060641307 214.1141848846123,130.61992122445744 264,131 C 313.8858151153877,131.38007877554256 376.4330275714399,146.411721166301 436,135 C 495.5669724285601,123.588278833699 552.1537048296282,85.73319411033863 592,80 C 631.8462951703718,74.26680588966137 654.9521531100479,100.6555023923445 694,107 C 733.0478468899521,113.3444976076555 788.0376827301804,99.64479632028336 840,86 C 891.9623172698196,72.35520367971664 940.8971159692301,58.76531232652198 997,60 C 1053.10288403077,61.23468767347802 1116.3738533928995,77.2939543736287 1164,84 C 1211.6261466071005,90.7060456263713 1243.6074704591717,88.05887017896325 1287,90 C 1330.3925295408283,91.94112982103675 1385.196264770414,98.47056491051838 1440,105 L 1440,700 L 0,700 Z");}75%{d: path("M 0,700 L 0,105 C 53.48606888894764,77.7226466467525 106.97213777789528,50.44529329350498 160,54 C 213.02786222210472,57.55470670649502 265.59751777736653,91.94147347273255 310,120 C 354.40248222263347,148.05852652726745 390.63779111263847,169.7888128155648 439,153 C 487.36220888736153,136.2111871844352 547.8513177720796,80.90327526500833 602,83 C 656.1486822279204,85.09672473499167 703.9569377990431,144.5980861244019 745,152 C 786.0430622009569,159.4019138755981 820.3209310317482,114.704380237384 863,109 C 905.6790689682518,103.295619762616 956.7593380739643,136.58439292606204 1001,132 C 1045.2406619260357,127.41560707393798 1082.6417166723943,84.95804805836791 1132,77 C 1181.3582833276057,69.04195194163209 1242.6737952364588,95.5834148404663 1296,106 C 1349.3262047635412,116.4165851595337 1394.6631023817706,110.70829257976685 1440,105 L 1440,700 L 0,700 Z");}100%{d: path("M 0,700 L 0,105 C 49.80861244019138,127.5598218298131 99.61722488038276,150.1196436596262 147,143 C 194.38277511961724,135.8803563403738 239.33971291866027,99.08124719130825 279,86 C 318.66028708133973,72.91875280869175 353.0239234449761,83.55536757514076 405,86 C 456.9760765550239,88.44463242485924 526.5645933014354,82.69728250812868 578,82 C 629.4354066985646,81.30271749187132 662.7177033492824,85.65550239234452 702,78 C 741.2822966507176,70.34449760765548 786.5645933014351,50.68070792249332 847,56 C 907.4354066985649,61.31929207750668 983.0239234449762,91.62166591768222 1028,104 C 1072.9760765550238,116.37833408231778 1087.3397129186606,110.83262840677786 1126,115 C 1164.6602870813394,119.16737159322214 1227.6172248803828,133.0478204552063 1284,133 C 1340.3827751196172,132.9521795447937 1390.1913875598086,118.97608977239685 1440,105 L 1440,700 L 0,700 Z");}}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#0693e3"></stop><stop offset="95%" stop-color="#8ED1FC"></stop></linearGradient></defs><path d="M 0,700 L 0,105 C 49.80861244019138,127.5598218298131 99.61722488038276,150.1196436596262 147,143 C 194.38277511961724,135.8803563403738 239.33971291866027,99.08124719130825 279,86 C 318.66028708133973,72.91875280869175 353.0239234449761,83.55536757514076 405,86 C 456.9760765550239,88.44463242485924 526.5645933014354,82.69728250812868 578,82 C 629.4354066985646,81.30271749187132 662.7177033492824,85.65550239234452 702,78 C 741.2822966507176,70.34449760765548 786.5645933014351,50.68070792249332 847,56 C 907.4354066985649,61.31929207750668 983.0239234449762,91.62166591768222 1028,104 C 1072.9760765550238,116.37833408231778 1087.3397129186606,110.83262840677786 1126,115 C 1164.6602870813394,119.16737159322214 1227.6172248803828,133.0478204552063 1284,133 C 1340.3827751196172,132.9521795447937 1390.1913875598086,118.97608977239685 1440,105 L 1440,700 L 0,700 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"></path><style>.path-1{animation:pathAnim-1 4s;animation-timing-function: linear;animation-iteration-count: infinite;}@keyframes pathAnim-1{0%{d: path("M 0,700 L 0,245 C 60.12150730920722,262.3918422374369 120.24301461841443,279.7836844748738 169,274 C 217.75698538158557,268.2163155251262 255.14944883554944,239.2571043379418 301,238 C 346.85055116445056,236.7428956620582 401.1591900393878,263.1878981733591 449,267 C 496.8408099606122,270.8121018266409 538.2137910068994,251.99130296862194 590,243 C 641.7862089931006,234.00869703137806 703.9856459330146,234.84688995215308 743,236 C 782.0143540669854,237.15311004784692 797.8436252610429,238.62113722276558 837,253 C 876.1563747389571,267.3788627772344 938.6398530228132,294.6685611567845 993,295 C 1047.3601469771868,295.3314388432155 1093.596962647704,268.70461815009645 1148,263 C 1202.403037352296,257.29538184990355 1264.97229638637,272.5129662428296 1315,273 C 1365.02770361363,273.4870337571704 1402.513851806815,259.2435168785852 1440,245 L 1440,700 L 0,700 Z");}25%{d: path("M 0,700 L 0,245 C 42.05027888656852,235.02060588437442 84.10055777313704,225.04121176874884 134,237 C 183.89944222686296,248.95878823125116 241.64804779402044,282.85575880937904 291,291 C 340.35195220597956,299.14424119062096 381.30725105078113,281.53575299373495 427,282 C 472.69274894921887,282.46424700626505 523.122948002855,301.0012292156811 573,295 C 622.877051997145,288.9987707843189 672.200956937799,258.4593301435407 718,247 C 763.799043062201,235.5406698564593 806.073224245949,243.1614502101562 859,257 C 911.926775754051,270.8385497898438 975.5061460784054,290.8948690158344 1024,275 C 1072.4938539215946,259.1051309841656 1105.9021914404293,207.25907372650613 1145,197 C 1184.0978085595707,186.74092627349387 1228.8850881598773,218.06883607814112 1279,233 C 1329.1149118401227,247.93116392185888 1384.5574559200613,246.46558196092946 1440,245 L 1440,700 L 0,700 Z");}50%{d: path("M 0,700 L 0,245 C 47.58827883369902,234.45601258293902 95.17655766739804,223.91202516587805 145,219 C 194.82344233260196,214.08797483412195 246.88204816410695,214.80791191942686 295,229 C 343.11795183589305,243.19208808057314 387.29524967617436,270.85632715641435 428,279 C 468.70475032382564,287.14367284358565 505.93695313119565,275.76677945491554 559,272 C 612.0630468688043,268.23322054508446 680.9569377990432,272.0765550239235 738,270 C 795.0430622009568,267.9234449760765 840.235295672632,259.9270004493906 881,265 C 921.764704327368,270.0729995506094 958.1018795104287,288.21544317851385 1009,289 C 1059.8981204895713,289.78455682148615 1125.3571862856538,273.211226836554 1168,270 C 1210.6428137143462,266.788773163446 1230.4693753469562,276.9396494752703 1272,275 C 1313.5306246530438,273.0603505247297 1376.7653123265218,259.0301752623649 1440,245 L 1440,700 L 0,700 Z");}75%{d: path("M 0,700 L 0,245 C 60.346956039017684,250.58776335615534 120.69391207803537,256.17552671231067 159,248 C 197.30608792196463,239.82447328768936 213.57130772687617,217.8856565069127 263,205 C 312.42869227312383,192.1143434930873 395.0208570144598,188.2818472600386 444,206 C 492.9791429855402,223.7181527399614 508.3452642152846,262.98695445293293 558,272 C 607.6547357847154,281.01304554706707 691.5980861244019,259.77033492822966 743,241 C 794.4019138755981,222.22966507177034 813.2623912871076,205.9317058341484 850,199 C 886.7376087128924,192.0682941658516 941.3523487271673,194.50284173517673 993,199 C 1044.6476512728327,203.49715826482327 1093.328213804224,210.05692722514476 1150,226 C 1206.671786195776,241.94307277485524 1271.3347960559358,267.2694493642444 1321,272 C 1370.6652039440642,276.7305506357556 1405.332601972032,260.86527531787783 1440,245 L 1440,700 L 0,700 Z");}100%{d: path("M 0,700 L 0,245 C 60.12150730920722,262.3918422374369 120.24301461841443,279.7836844748738 169,274 C 217.75698538158557,268.2163155251262 255.14944883554944,239.2571043379418 301,238 C 346.85055116445056,236.7428956620582 401.1591900393878,263.1878981733591 449,267 C 496.8408099606122,270.8121018266409 538.2137910068994,251.99130296862194 590,243 C 641.7862089931006,234.00869703137806 703.9856459330146,234.84688995215308 743,236 C 782.0143540669854,237.15311004784692 797.8436252610429,238.62113722276558 837,253 C 876.1563747389571,267.3788627772344 938.6398530228132,294.6685611567845 993,295 C 1047.3601469771868,295.3314388432155 1093.596962647704,268.70461815009645 1148,263 C 1202.403037352296,257.29538184990355 1264.97229638637,272.5129662428296 1315,273 C 1365.02770361363,273.4870337571704 1402.513851806815,259.2435168785852 1440,245 L 1440,700 L 0,700 Z");}}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#0693e3"></stop><stop offset="95%" stop-color="#8ED1FC"></stop></linearGradient></defs><path d="M 0,700 L 0,245 C 60.12150730920722,262.3918422374369 120.24301461841443,279.7836844748738 169,274 C 217.75698538158557,268.2163155251262 255.14944883554944,239.2571043379418 301,238 C 346.85055116445056,236.7428956620582 401.1591900393878,263.1878981733591 449,267 C 496.8408099606122,270.8121018266409 538.2137910068994,251.99130296862194 590,243 C 641.7862089931006,234.00869703137806 703.9856459330146,234.84688995215308 743,236 C 782.0143540669854,237.15311004784692 797.8436252610429,238.62113722276558 837,253 C 876.1563747389571,267.3788627772344 938.6398530228132,294.6685611567845 993,295 C 1047.3601469771868,295.3314388432155 1093.596962647704,268.70461815009645 1148,263 C 1202.403037352296,257.29538184990355 1264.97229638637,272.5129662428296 1315,273 C 1365.02770361363,273.4870337571704 1402.513851806815,259.2435168785852 1440,245 L 1440,700 L 0,700 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"></path><style>.path-2{animation:pathAnim-2 4s;animation-timing-function: linear;animation-iteration-count: infinite;}@keyframes pathAnim-2{0%{d: path("M 0,700 L 0,385 C 38.53359856194983,393.30480583679184 77.06719712389966,401.60961167358374 120,414 C 162.93280287610034,426.39038832641626 210.26481006635123,442.8663591424569 269,419 C 327.73518993364877,395.1336408575431 397.8735626106955,330.9249517565889 451,332 C 504.1264373893045,333.0750482434111 540.2409394908667,399.4338338311877 588,403 C 635.7590605091333,406.5661661688123 695.1626794258375,347.3397129186603 745,345 C 794.8373205741625,342.6602870813397 835.1083428057838,397.2073144941711 880,404 C 924.8916571942162,410.7926855058289 974.403949351027,369.8310291046552 1015,364 C 1055.596050648973,358.1689708953448 1087.2758597901081,387.4685690872082 1137,398 C 1186.7241402098919,408.5314309127918 1254.4926114885404,400.29469454651195 1308,395 C 1361.5073885114596,389.70530545348805 1400.75369425573,387.35265272674405 1440,385 L 1440,700 L 0,700 Z");}25%{d: path("M 0,700 L 0,385 C 44.88870972005604,360.50162573686856 89.77741944011208,336.0032514737371 144,347 C 198.22258055988792,357.9967485262629 261.77903195960766,404.4886198419202 308,406 C 354.22096804039234,407.5113801580798 383.1064527214571,364.04226915858203 427,348 C 470.8935472785429,331.95773084141797 529.7951571545639,343.34230352375164 581,357 C 632.2048428454361,370.65769647624836 675.7129186602872,386.58851674641147 726,398 C 776.2870813397128,409.41148325358853 833.3531682042877,416.3036294906025 875,398 C 916.6468317957123,379.6963705093975 942.8744085225621,336.19696529117874 982,342 C 1021.1255914774379,347.80303470882126 1073.149197705464,402.90850934468267 1125,414 C 1176.850802294536,425.09149065531733 1228.5288006555816,392.1689973300907 1281,380 C 1333.4711993444184,367.8310026699093 1386.7355996722092,376.4155013349547 1440,385 L 1440,700 L 0,700 Z");}50%{d: path("M 0,700 L 0,385 C 34.85302281318566,386.1744957572233 69.70604562637132,387.3489915144466 125,370 C 180.29395437362868,352.6510084855534 256.0288403077004,316.7785296994369 305,334 C 353.9711596922996,351.2214703005631 376.1785931428269,421.5368896878057 412,435 C 447.8214068571731,448.4631103121943 497.25678712099193,405.07391154934044 556,387 C 614.7432128790081,368.92608845065956 682.7942583732057,376.16746411483257 735,374 C 787.2057416267943,371.83253588516743 823.5661793861854,360.2562319913294 863,375 C 902.4338206138146,389.7437680086706 944.9410240820534,430.8076079198499 988,430 C 1031.0589759179466,429.1923920801501 1074.669724285601,386.51333632927117 1133,382 C 1191.330275714399,377.48666367072883 1264.3800787755426,411.1390467630654 1318,418 C 1371.6199212244574,424.8609532369346 1405.8099606122287,404.9304766184673 1440,385 L 1440,700 L 0,700 Z");}75%{d: path("M 0,700 L 0,385 C 43.60112612017235,417.7963731528721 87.2022522403447,450.59274630574424 141,432 C 194.7977477596553,413.40725369425576 258.79211715879353,343.42538792989507 311,339 C 363.20788284120647,334.57461207010493 403.6292791244812,395.7057019746755 451,416 C 498.3707208755188,436.2942980253245 552.6907663432816,415.75180417140285 590,399 C 627.3092336567184,382.24819582859715 647.6076555023924,369.2870813397129 698,378 C 748.3923444976076,386.7129186602871 828.8786116471488,417.09987046974544 880,432 C 931.1213883528512,446.90012953025456 952.8778979090118,446.31343678130537 1000,421 C 1047.1221020909882,395.68656321869463 1119.6097967168043,345.64638240503314 1165,341 C 1210.3902032831957,336.35361759496686 1228.6829152237701,377.1010335985619 1270,392 C 1311.3170847762299,406.8989664014381 1375.658542388115,395.94948320071904 1440,385 L 1440,700 L 0,700 Z");}100%{d: path("M 0,700 L 0,385 C 38.53359856194983,393.30480583679184 77.06719712389966,401.60961167358374 120,414 C 162.93280287610034,426.39038832641626 210.26481006635123,442.8663591424569 269,419 C 327.73518993364877,395.1336408575431 397.8735626106955,330.9249517565889 451,332 C 504.1264373893045,333.0750482434111 540.2409394908667,399.4338338311877 588,403 C 635.7590605091333,406.5661661688123 695.1626794258375,347.3397129186603 745,345 C 794.8373205741625,342.6602870813397 835.1083428057838,397.2073144941711 880,404 C 924.8916571942162,410.7926855058289 974.403949351027,369.8310291046552 1015,364 C 1055.596050648973,358.1689708953448 1087.2758597901081,387.4685690872082 1137,398 C 1186.7241402098919,408.5314309127918 1254.4926114885404,400.29469454651195 1308,395 C 1361.5073885114596,389.70530545348805 1400.75369425573,387.35265272674405 1440,385 L 1440,700 L 0,700 Z");}}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#0693e3"></stop><stop offset="95%" stop-color="#8ED1FC"></stop></linearGradient></defs><path d="M 0,700 L 0,385 C 38.53359856194983,393.30480583679184 77.06719712389966,401.60961167358374 120,414 C 162.93280287610034,426.39038832641626 210.26481006635123,442.8663591424569 269,419 C 327.73518993364877,395.1336408575431 397.8735626106955,330.9249517565889 451,332 C 504.1264373893045,333.0750482434111 540.2409394908667,399.4338338311877 588,403 C 635.7590605091333,406.5661661688123 695.1626794258375,347.3397129186603 745,345 C 794.8373205741625,342.6602870813397 835.1083428057838,397.2073144941711 880,404 C 924.8916571942162,410.7926855058289 974.403949351027,369.8310291046552 1015,364 C 1055.596050648973,358.1689708953448 1087.2758597901081,387.4685690872082 1137,398 C 1186.7241402098919,408.5314309127918 1254.4926114885404,400.29469454651195 1308,395 C 1361.5073885114596,389.70530545348805 1400.75369425573,387.35265272674405 1440,385 L 1440,700 L 0,700 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"></path><style>.path-3{animation:pathAnim-3 4s;animation-timing-function: linear;animation-iteration-count: infinite;}@keyframes pathAnim-3{0%{d: path("M 0,700 L 0,525 C 44.669843241957224,509.1995294615242 89.33968648391445,493.39905892304847 145,494 C 200.66031351608555,494.60094107695153 267.3110973062994,511.60329376933043 311,523 C 354.6889026937006,534.3967062306696 375.415924290888,540.18776599963 420,551 C 464.584075709112,561.81223400037 533.0252055301489,577.64564223215 590,574 C 646.9747944698511,570.35435776785 692.4832535885167,547.2296650717703 735,527 C 777.5167464114833,506.7703349282297 817.0417801157841,489.4356974807687 861,495 C 904.9582198842159,500.5643025192313 953.3496259483466,529.0275450051548 996,524 C 1038.6503740516534,518.9724549948452 1075.5597160908296,480.45412249861226 1128,482 C 1180.4402839091704,483.54587750138774 1248.4115096883343,525.1559650003965 1303,539 C 1357.5884903116657,552.8440349996035 1398.7942451558329,538.9220174998018 1440,525 L 1440,700 L 0,700 Z");}25%{d: path("M 0,700 L 0,525 C 62.431415051944285,548.5503185386872 124.86283010388857,572.1006370773745 166,572 C 207.13716989611143,571.8993629226255 226.98009463639005,548.1477702291893 263,528 C 299.01990536360995,507.8522297708107 351.21679135055115,491.3082820058685 409,502 C 466.78320864944885,512.6917179941315 530.1527399614054,550.6191017473367 576,544 C 621.8472600385946,537.3808982526633 650.1722488038278,486.21531100478467 694,489 C 737.8277511961722,491.78468899521533 797.1582648232837,548.5196542335245 850,553 C 902.8417351767163,557.4803457664755 949.1946919030374,509.70607206111714 1004,502 C 1058.8053080969626,494.29392793888286 1122.062967564567,526.6560575220069 1171,524 C 1219.937032435433,521.3439424779931 1254.5534378386951,483.6696978508552 1297,478 C 1339.4465621613049,472.3303021491448 1389.7232810806524,498.6651510745724 1440,525 L 1440,700 L 0,700 Z");}50%{d: path("M 0,700 L 0,525 C 54.14630310079568,541.0890850934468 108.29260620159135,557.1781701868937 149,565 C 189.70739379840865,572.8218298131063 216.97587829443023,572.3764043458721 263,565 C 309.02412170556977,557.6235956541279 373.8038806206879,543.3162124296175 435,542 C 496.1961193793121,540.6837875703825 553.8085992228184,552.3587459356579 600,556 C 646.1914007771816,559.6412540643421 680.9617224880384,555.2488038277512 726,563 C 771.0382775119616,570.7511961722488 826.3445108250281,590.6460387533374 874,570 C 921.6554891749719,549.3539612466626 961.6602342118483,488.1670411588992 1007,476 C 1052.3397657881517,463.8329588411008 1103.0145523275792,500.6857966110656 1155,509 C 1206.9854476724208,517.3142033889344 1260.2815564778346,497.0897723968383 1308,495 C 1355.7184435221654,492.9102276031617 1397.8592217610826,508.95511380158086 1440,525 L 1440,700 L 0,700 Z");}75%{d: path("M 0,700 L 0,525 C 37.817692775383975,508.172367760184 75.63538555076795,491.344735520368 134,491 C 192.36461444923205,490.655264479632 271.27615057231225,506.7934256787121 314,513 C 356.72384942768775,519.2065743212879 363.2600121599831,515.4815617647836 409,514 C 454.7399878400169,512.5184382352164 539.6838007877554,513.2803272621534 594,506 C 648.3161992122446,498.7196727378466 672.0047846889952,483.39712918660285 710,487 C 747.9952153110048,490.60287081339715 800.2970604562638,513.1311559914351 858,515 C 915.7029395437362,516.8688440085649 978.80697348595,498.0782468476566 1026,508 C 1073.19302651405,517.9217531523434 1104.4750455999365,556.5558566179387 1152,567 C 1199.5249544000635,577.4441433820613 1263.2928441143038,559.6983266805889 1314,548 C 1364.7071558856962,536.3016733194111 1402.353577942848,530.6508366597055 1440,525 L 1440,700 L 0,700 Z");}100%{d: path("M 0,700 L 0,525 C 44.669843241957224,509.1995294615242 89.33968648391445,493.39905892304847 145,494 C 200.66031351608555,494.60094107695153 267.3110973062994,511.60329376933043 311,523 C 354.6889026937006,534.3967062306696 375.415924290888,540.18776599963 420,551 C 464.584075709112,561.81223400037 533.0252055301489,577.64564223215 590,574 C 646.9747944698511,570.35435776785 692.4832535885167,547.2296650717703 735,527 C 777.5167464114833,506.7703349282297 817.0417801157841,489.4356974807687 861,495 C 904.9582198842159,500.5643025192313 953.3496259483466,529.0275450051548 996,524 C 1038.6503740516534,518.9724549948452 1075.5597160908296,480.45412249861226 1128,482 C 1180.4402839091704,483.54587750138774 1248.4115096883343,525.1559650003965 1303,539 C 1357.5884903116657,552.8440349996035 1398.7942451558329,538.9220174998018 1440,525 L 1440,700 L 0,700 Z");}}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#0693e3"></stop><stop offset="95%" stop-color="#8ED1FC"></stop></linearGradient></defs><path d="M 0,700 L 0,525 C 44.669843241957224,509.1995294615242 89.33968648391445,493.39905892304847 145,494 C 200.66031351608555,494.60094107695153 267.3110973062994,511.60329376933043 311,523 C 354.6889026937006,534.3967062306696 375.415924290888,540.18776599963 420,551 C 464.584075709112,561.81223400037 533.0252055301489,577.64564223215 590,574 C 646.9747944698511,570.35435776785 692.4832535885167,547.2296650717703 735,527 C 777.5167464114833,506.7703349282297 817.0417801157841,489.4356974807687 861,495 C 904.9582198842159,500.5643025192313 953.3496259483466,529.0275450051548 996,524 C 1038.6503740516534,518.9724549948452 1075.5597160908296,480.45412249861226 1128,482 C 1180.4402839091704,483.54587750138774 1248.4115096883343,525.1559650003965 1303,539 C 1357.5884903116657,552.8440349996035 1398.7942451558329,538.9220174998018 1440,525 L 1440,700 L 0,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-3"></path></svg>
</body>
</html>Svg Wave波形
若文章对你有帮助，点赞、收藏加关注吧！