波浪 SVG 生成器

如何使用

1. 设层数。一层是一道干净的浪；三到四层就是页面分隔常用的叠浪效果。
2. 拖振幅决定浪尖高度，拖波长决定一个完整波 cycle 的宽度。波长小则水波碎，波长长则浪涌缓。
3. 设图形的高度与所有层共用的不透明度。
4. 在色行里给每层从左到右配一个颜色。暂时用不到的层也会把颜色存着。
5. 复制 SVG，用 position: absolute 加 bottom: 0 放到上方区块的底部或下方区块的顶部。

常见用途

• 页脚与区块分隔 —— 拉伸的波浪横在不同底色两块内容之间。
• 首屏背景 —— 大幅低振幅的波浪衬在标题下，像地平线或水面。
• 引导页插画 —— 两三层浪让静态的空状态页有了动势。
• 邮件与落地页草图 —— 内联 SVG 不发起图片请求，缩放也干净。

为何保证隐私

路径由页面内的滑块取值计算，预览就是你复制到的那段标记。没有上传，也没有在服务端渲染任何图片。

常见问题

问：为什么预览会随窗口拉伸？ 答：viewBox 固定 1440 单位宽，preserveAspectRatio="none" 让浏览器把图形拉满容器。分隔条正是这样铺满任意屏幕且无需平铺。

问：怎么把波浪翻过来或朝上？ 答：给 SVG 外包一层 transform: rotate(180deg) 的容器，或把文件放到区块顶部。路径本身始终从浪尖向下填充。

问：能用超过四层吗？ 答：工具支持四层，覆盖了绝大多数分隔设计。要更多层，复制一行 <path> 改填充色即可，相位间距保持一致。

问：层与层之间会混色吗？ 答：不会。每层是一条带不透明度的路径，从后往前画，重叠区域靠透明叠加视觉混合，不是渐变。