SVG 波浪生成器
生成可调节曲线强度、层数以及单色或渐变填充的多层 SVG 波浪图形，并复制代码或下载 .svg 文件。
正在加载工具…
SVG 波浪生成器 — 设置曲线强度，选择要叠加的波浪层数，并使用两种颜色选择单色或自上而下的渐变填充。实时预览会随着你调整控件而重绘，“重新生成”按钮会基于种子重新排布波浪形状，完整的 SVG 代码可随时复制或下载为 .svg 文件。一切都在你的浏览器中生成，任何设置或图像都不会发送到服务器。
SVG 波浪生成器 是什么？
SVG 波浪生成器是一款免费的浏览器内工具，适合想要平滑、自然的波浪分隔线和首屏背景，又不想手动绘制路径的网页设计师和前端开发者。你可以设置曲线强度，叠加 1 到 8 层，翻转波浪让波峰朝下或朝上，并用单色混合或两种 HEX 颜色之间的垂直渐变来填充。每条波浪都由基于种子的伪随机生成器绘制，因此按下“重新生成”会在保持相同设置的前提下给出全新形状，输出是精确、可缩放的 SVG，可直接粘贴到任意 HTML 页面或设计文件中。可用于分区分隔线、页脚、横幅和装饰性背景。
如何使用 SVG 波浪生成器
- 将曲线强度设置为 0 到 100，控制波峰的高度和起伏程度。
- 选择层数（1-8）；层数越多，半透明波浪叠加得越有层次感。
- 使用“翻转”让波峰朝下或朝上。
- 打开“设置”在单色填充和垂直渐变之间切换，并选择起始与结束颜色。
- 按“重新生成”重新排布波浪形状，直到满意为止。
- 复制 SVG 代码，或点击“下载”保存 wave.svg 文件。
示例
渐变分区分隔线
将强度设为 50 左右，保持 3 层，选择从蓝到紫的渐变填充，下载 wave.svg，即可在两个页面区块之间放置一条平滑的分隔线。
醒目的单色首屏波浪
调高强度，将层数设为 1，切换为单色填充，并将波浪翻转朝上，在首屏标题后面呈现一个大而醒目的波峰。
多层页脚背景
使用 5-6 层和中低强度，构建柔和、叠加的半透明波浪，非常适合作为页脚背景。
常见问题
- 曲线强度会改变什么？
- 强度（0-100）控制每个波峰的起伏幅度。较低的值给出柔和的涟漪；较高的值给出高耸、醒目的波峰。预览和 SVG 会随更改即时更新。
- 为什么按“重新生成”会改变形状？
- 每条波浪都由基于种子的伪随机生成器绘制。重新生成会增加种子，让你在保持强度、层数、颜色和填充不变的情况下获得新的波峰排布。
- 单色和渐变填充有什么区别？
- 单色会让每个叠加层在两种颜色之间混合，而渐变会对所有层应用一个从顶部第一种颜色到底部第二种颜色的统一垂直渐变。打开“设置”即可切换并选择两种颜色。
- 如何使用下载的 SVG？
- 输出是标准、可缩放的 SVG 代码。可直接复制到你的 HTML 中，或下载 wave.svg 后导入设计工具或作为图像引用。由于是矢量图，它在任何尺寸下都保持清晰。
- 会有内容上传到服务器吗？
- 不会。波浪完全在你的浏览器中通过本地运算生成，.svg 下载也由内存中的 blob 构建。任何设置、颜色或图像都不会离开你的设备，因此可离线使用并为你的工作保密。