如何使用 Get Waves 生成 SVG 波浪?

更新时间

Get Waves 是一个免费的在线 SVG 波浪生成器，打开网页即可选择曲线类型、调整复杂度并随机化，然后把生成的波浪以 SVG 代码或文件形式用于网页和设计稿。它适合需要快速给页面、海报或 UI 加一条装饰性波浪、又不想手动画矢量路径的人。网站页面显示它现已并入 Haikei.app，并提供了 Figma 插件，如果你在 Figma 里工作可以直接用插件生成。

操作步骤

  1. 打开网站：访问 getwaves.io，页面标题为 “Get Waves – Create SVG waves for your next design”，主区域标题是 “Make some waves!”。
  2. 选择曲线类型：在生成器里挑选一种波浪曲线样式，作为当前波浪的基础形状。
  3. 调整复杂度：拖动复杂度参数，改变波浪的起伏数量和密集程度，直到接近你要的节奏。
  4. 随机化：点随机化按钮，让工具重新生成一条波浪，多试几次挑出满意的一条。
  5. 导出：把结果复制为 SVG 代码，或下载 SVG 文件，再粘贴/导入到你的网页或设计工具中。

预期结果：你会得到一段纯 SVG 代码或一个 .svg 文件，里面是一条可缩放、不失真的矢量波浪，能直接放进 HTML 或设计稿。

生成后怎么用

  • 嵌入网页：把复制的 SVG 代码贴进 HTML 中需要的位置，作为区块之间的分隔或背景装饰。因为是矢量，放大缩小都清晰。
  • 放进设计工具：下载 SVG 后导入 Figma、Sketch 等工具，作为图形元素继续排版。
  • 在 Figma 内直接生成：页面提示 “You can now make waves directly in Figma! Get the Figma plugin”，需要的话安装该插件，在 Figma 里完成同样的生成流程。

常见卡点

  • 找不到下载/复制入口：生成器通常把导出按钮放在波浪预览附近，先确认已经生成了一条波浪再找导出。
  • 波浪太密或太平：回到复杂度参数调整，而不是反复随机化；随机化改变的是形状，复杂度控制的是起伏密度。
  • 想要更多形状：页面 “More products” 提到同类工具 Blobmaker.app，如果波浪不够用可以去看它。
  • 找不到旧版入口：页面说明 Get Waves 现在是 Haikei.app 的一部分，若原站功能有变化，可从 Haikei.app 进入。

适用条件

Get Waves 适合需要快速产出装饰性 SVG 波浪的网页和 UI 设计场景，免费使用、无需复杂配置。它生成的是静态矢量波浪，不涉及数据可视化或动态动画；如果你要的是随数据变化的图表波浪，这个工具不适用。