SVG 波浪生成器

生成平滑、尖峰或阶梯状的 SVG 波浪，支持多层、振幅和随机种子。可下载 .svg，或复制为用于分隔区块的 CSS 背景 data URI。

波浪设置

颜色

波浪样式

位置

复杂度（段数）

振幅%

图层

不透明度

宽度px

高度px

随机种子

相同的设置和种子总会生成相同的形状。

预览

SVG 代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>

CSS 背景（data URI）

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");

什么是 SVG 波浪生成器？

用 SVG 创建波浪形状，用于区块分隔线和背景。可以选择平滑曲线、尖锐的峰或阶梯，叠加最多五层，把波浪翻转到顶部，并导出为 .svg 文件或可直接粘贴的 CSS background-image data URI。

如何使用 SVG 波浪生成器

选择“颜色”和“波浪样式”（平滑、尖峰、阶梯）以及“位置”（底部或顶部）。
调整“复杂度”“振幅”“图层”“不透明度”“宽度”和“高度”。
点击“随机生成”或输入“随机种子”，得到不同但可重现的波浪。
点击“下载 .svg”，或复制 SVG 代码。
或者复制“CSS 背景（data URI）”，无需单独文件即可使用该波浪。

示例

输入

Complexity 2, amplitude 0, 1440×320, color #0099ff

输出

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>

振幅为 0 时得到一条平线，可以看清贝塞尔曲线的精确构造。

何时使用 SVG 波浪生成器

适合波浪形的区块分隔线、页脚和首屏背景。preserveAspectRatio="none" 让波浪可以拉伸到任意宽度，适合全宽分隔线；对于必须保持比例的插画，请在矢量编辑器中编辑 SVG。

SVG 波浪生成器的工作原理

宽度被分成相等的段；每个点的高度是基线加上按振幅缩放的带种子伪随机偏移（mulberry32）。平滑波浪让 Catmull-Rom 样条穿过各点，并转换为三次贝塞尔 C 命令；尖峰使用直线，阶梯使用水平/垂直线。路径会闭合到底部（或顶部）边缘。多层使用不同的基线和种子，不透明度越靠前越高。data URI 保持 SVG 可读，只对不安全的字符进行百分号编码。