SVG 波浪生成器

用 SVG 波浪优雅地分隔页面段落

波浪是分隔两段内容最干净的方式之一——它们为设计注入动感、个性和层次感，而无需一张图片。此 SVG 波浪生成器会生成一个简单的 <path> 元素，包裹在 <svg> 中，搭配 width: 100% 即可延展到任意容器宽度。

控制选项

• 段数 — 波浪的峰数。1 段给出一条柔和的曲线，10 段则呈现起伏密集的图案。
• 振幅 — 每个峰的垂直摆动。低振幅产生柔和的波纹；高振幅带来戏剧性的起伏。
• 种子 — 控制各峰间随机变化的确定性整数。点击 重新生成 可快速切换新形状。
• 翻转 — 在底部分节线（波峰在上，填充在下）与顶部分节线（波峰在下，填充在上）之间切换。
• 填充 — 纯色或任意角度的双色线性渐变。

使用方法

由于 SVG 使用 preserveAspectRatio="none"，你只需用带 CSS width 的容器包裹即可延展到任意宽度——波浪会随页面缩放但保持原有高度。直接把生成的 SVG 粘贴到你的 HTML、React 组件或模板系统中。

<div style="width:100%"><!-- 生成的 svg --></div>

常见用途

• 英雄区与下一模块之间的分节线
• 趣味十足的页脚
• 动画化的背景曲线（路径可使用 CSS 或 SMIL 动画化）
• 定价卡片、证言或特性区后的装饰形状
• 加载占位和分节过渡

路径是确定性的——相同的种子总会生成同样的波浪——所以一旦你找到满意的形状，它就会保持稳定。若需进一步编辑或手动调色，可将 SVG 保存为文件并在矢量编辑器中打开。