SVG 波浪生成器
生成流畅的 SVG 波浪曲线,用来分隔页面的两个区块,比一条直线更柔和;振幅、频率和颜色均可完全自由调节。
预览
工作原理
波浪由一连串三次贝塞尔曲线构成,每个「波峰」在基线的上方和下方交替出现,形成没有折角的流畅轨迹。波峰数量(频率)和高度(振幅)可以独立调节,填充颜色同样可调。
如何把这个波浪用作两个区块之间的分隔?
复制 SVG 代码,将其绝对定位到某个有色区块的底部(或使用「翻转」选项放在顶部),宽度设为 100%:波浪会覆盖该区块与下一区块之间的过渡处。下一区块的背景色须与 SVG 的填充色一致,才能实现无缝衔接。
设定的宽度必须与我页面的宽度完全一致吗?
不必:借助 preserveAspectRatio="none" 属性和 CSS 中的百分比宽度,SVG 会自动拉伸以占满容器的可用宽度,即使它的原始宽度与您的页面宽度并不完全一致。
100% 本地生成:曲线完全在您的浏览器中计算,不会向任何服务器发送数据。