SVG 波浪生成器
免费在线 SVG 波浪生成器：可叠加 1-5 层平滑波浪，调节基线、振幅、波长与平滑度，应用双色渐变并导出矢量源码。
SVG 波浪生成器是做什么的？
它把装饰性波浪形状生成可直接使用的 SVG 代码。你可以叠加 1-5 层波浪，每层都有独立的基线高度、振幅、波长与平滑度，并且所有图层共享一条双色线性渐变。
波浪曲线是怎么画出来的？
每一层都由内置的路径生成器产出：波形按半个波长分段，每段用三次贝塞尔控制点绘制。这样文件极小，而且在任何缩放级别下都保持完全平滑。
平滑度滑杆改变的是什么？
0% 时各段退化为直线，波形呈锯齿状；调高滑杆会让贝塞尔控制点外移，100% 时得到完整的正弦形曲线。
导出的 SVG 可以用在哪里？
任何接受 HTML 或 SVG 的地方都可以：首屏背景、页面板块分隔线、页脚、演示文稿和设计工具。把复制的代码直接粘进 HTML，或用下载按钮保存 .svg 文件。
波浪放大后还会清晰吗？
会。导出内容保留 1440x480 的 viewBox，是纯矢量几何图形。拉伸到 100% 页面宽度或放大到印刷尺寸，曲线都不会模糊或出现像素点。
随机生成按钮是怎么工作的？
它会随机选择 1-5 的层数、为每个图层参数取新的随机值，并生成两个协调的随机颜色，然后立即重绘预览。不满意就多按几次。
可以使用自己的品牌色吗？
可以。两个取色器分别设置所有图层共享的线性渐变的起止色，改一下就能让整组波浪同时换色。
数据会上传到服务器吗？
不会。生成器完全在浏览器里用原生 JavaScript 运行，你的颜色与设置不会离开页面，导出文件也是在本机生成的。
如何使用SVG 波浪生成器
SVG 波浪生成器可生成干净、即贴即用的多层波浪 SVG 代码。每一层都是由双色线性渐变填充的平滑三次贝塞尔曲线，非常适合做首屏背景、页面分隔线和页脚装饰。所有内容均在浏览器中生成，不会上传任何数据。
- 在「层数」选择器中选择 1-5 层。图层按从后到前的顺序绘制，新图层会覆盖在之前的图层之上。
- 用两个取色器选择渐变的起始色和结束色，所有图层共享这条线性渐变。
- 用每层的四个滑杆微调：「基线高度」上下移动波浪，「振幅」控制波峰高度，「波长」控制相邻波峰的水平距离，「平滑度」在 0% 折线与 100% 完整正弦形贝塞尔曲线之间过渡。
- 按「随机生成」可以瞬间得到全新的层数、形状与颜色组合，直到满意为止。
- 按「下载 SVG」保存 .svg 文件，或按「复制源码」把完整 SVG 标记复制到剪贴板，直接粘贴进任何 HTML 文件或设计工具即可使用。
用作网站板块分隔线时，把 SVG 放在两个区块之间并让其拉伸到 100% 宽度——viewBox 会保证曲线在任意尺寸下不变形。低平滑度配短波长是手绘感，全平滑配长波长则像平静的海面。
相关工具
- SVG优化器 在浏览器中即时优化和压缩SVG文件。移除元数据、注释、编辑器冗余数据，文件大小最多可减少60%。
- SVG转PNG转换器 在浏览器中即时将SVG转换为PNG、JPEG或WebP。支持自定义缩放、尺寸和背景色。免费、隐私保护、无需上传。
- PNG 转 SVG 转换器 免费在线 PNG 转 SVG 工具。将 PNG、JPG 等位图转换为可缩放的矢量 SVG，可调颜色数与细节，全程浏览器本地处理，无需上传。
- 创意圆角生成器 免费在线创意圆角生成器。拖拽 8 个手柄或选择 blob 预设，快速创建有机 CSS 形状并复制 border-radius 代码。
- 颜色转换器 免费在线颜色转换器。即时转换 HEX、RGB、HSL、HSV 格式，带可视化拾色器。100% 隐私保护，浏览器本地运行。
- CSS 缓动函数生成器 免费在线 CSS 缓动生成器。在交互曲线上拖拽 cubic-bezier 控制点，内置 18 种预设，小球循环动画实时对比，一键复制 timing function。
- CSS 文字阴影生成器 免费在线 CSS text-shadow 生成器。多层阴影可调偏移、模糊、颜色与透明度，内置霓虹、3D、复古、光晕等预设，实时预览并一键复制代码。
- CSS clip-path 裁剪生成器 免费在线 CSS clip-path 生成器。支持 polygon、circle、ellipse、inset 四种模式，顶点可拖拽，实时预览并一键复制 CSS 代码。