SVG 波浪生成器 —— 在线生成网页波浪分隔（免费）

你在落地页上常看到的「波浪形分界线」——一个色块的底边不是直线，而是平滑起伏的波浪——本质就是一段 SVG 路径（path）。它用三次贝塞尔曲线把一串控制点连成光滑曲线，再用一个填充色块把曲线下方填满。手写这段 path 的 d 属性几乎不可能调准，所以大家要么用 Haikei、GetWaves 这类在线工具生成，要么从设计稿里抠。设计猫的波浪生成器直接在你浏览器里按振幅和波数算出这段路径，所见即所得，复制出来就是干净的内联 SVG。

调一条好看的波浪，关键是振幅和波数的配合。振幅是波峰到波谷的高度：太小看起来像直线、没存在感，太大会吃掉太多版面、显得吵。波数是一行里有几个完整起伏：1–2 个波数显得舒展大气、适合 hero 区下方的大分隔，3–4 个波数更活泼、适合卡片或装饰条。一个实用技巧是把同一条波浪叠两到三层、各给一点透明度和轻微错位，就能做出「分层海浪」的纵深感——这正是很多 SaaS 落地页的招牌视觉。

落地到代码时，SVG 比 PNG 更合适：它无损缩放、在任何屏幕密度下都锐利，体积往往只有几百字节，还能用 CSS 的 fill 改色或做动画。把生成的 SVG 内联进 HTML、绝对定位到 section 的顶部或底部即可（记得 preserveAspectRatio="none" 让它随宽度拉伸铺满）。如果你的工作流必须用位图（比如贴进 PPT 或某些 CMS），再用「下载 PNG」导出透明背景的位图。全程在设计猫浏览器本地完成，不上传、不注册、无次数限制。