生成圆润有机的 blob 形状,复杂度 / 随机度 / 种子可调,导出 SVG 与 CSS clip-path,100% 浏览器本地
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><defs><linearGradient id="blobGrad" x1="85.4%" y1="14.6%" x2="14.6%" y2="85.4%"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#06e6d7"/></linearGradient></defs><path fill="url(#blobGrad)" d="M 200 67.1 C 235.98 66.84, 284.46 100.44, 309.27 136.91 C 334.08 173.38, 367.05 253.06, 348.84 285.93 C 330.63 318.8, 248.8 334.61, 200 334.14 C 151.2 333.67, 73.83 315.72, 56.06 283.11 C 38.3 250.5, 69.42 174.46, 93.41 138.46 C 117.4 102.46, 164.02 67.36, 200 67.1 Z"/></svg>
这个工具能做什么
生成平滑圆润的有机 "blob" 形状,就是现在每个落地页 hero 区、头像 遮罩、装饰背景都在用的那种不规则圆团。你来定边缘点的数量(复杂度)、 调随机度(轮廓是偏圆还是偏疙瘩)、设尺寸,工具会围绕一个被随机 扰动过的圆画一条闭合的 Catmull-Rom 样条曲线,所以结果永远是平滑 自闭合的,没有尖角,没有自相交。
形状由一个确定性种子驱动,同一个种子永远生成完全一样的 blob。 这意味着"分享链接"能在别人屏幕上像素级复现你的图形,而"重新 随机"按钮只是换一个新种子。blob 可以填纯色,也可以填两段式线性 渐变,然后三种方式导出:复制原始 SVG 代码、复制 CSS `clip-path: path(...)` 声明把任意 HTML 元素裁成这个形状、或下载 独立的 `.svg` 文件。全部在浏览器本地用带种子的伪随机数发生器 运算(不用 `Math.random`),所以 blob 可复现,你输入的任何东西 都不会离开浏览器标签页。
工具细节
- 输入
- 文件 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 14 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
SVG Blob 有机形状生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
SaaS hero 标题背后的柔和 blob 背景
2024 风格的 SaaS 落地页(Linear、Vercel、Stripe)会在 hero 文字 后面或旁边放一团柔和的渐变 blob。流程:复杂度设 6,随机度约 0.4, 填充切到渐变并选两个品牌色,然后复制内联 SVG。把它放进 hero 区, 做成绝对定位、低层级的元素,加 `opacity: 0.6` 和较重的 CSS `filter: blur(40px)`。模糊后的 blob 读起来像氛围光晕而不是硬 形状,而且因为种子就写在代码里,以后设计改了你还能重新生成出 一模一样的光晕。
把圆形头像裁成有机形状
圆头像满大街都是;用 blob 遮罩的头像一眼就显得更有设计感。 生成一个复杂度 7、低随机度(约 0.25)的 blob 让它保持大致圆形, 复制 `clip-path: path(...)` 导出,应用到头像的 `<img>` 上。照片 就被裁成有机轮廓了,不增加任何额外 DOM。整个团队头像用同一个 种子保持统一风格,或者每人给不同种子做出俏皮的差异。
装饰性区块分隔与 blob "贴纸"
与其用一条笔直的 `<hr>` 或无聊的矩形,不如用不同种子导出几个 blob,填上半透明品牌色,当装饰贴纸散布在功能卡片后面或区块的 上下边缘。因为每次下载都是独立的 `.svg`,你可以直接把文件交给 设计师,或当图片素材丢进 Figma、Webflow、Framer,完全不用写代码。
为设计系统生成一组配套的 blob 变体
设计系统经常需要一族"像但不完全一样"的形状,比如三个看起来像 兄弟的 blob。锁定复杂度和随机度,然后手动递增种子(种子 1001、 1002、1003)。每个种子产出一个独立但调性一致的 blob,而且种子就 记在你的 tokens 文件里,几个月后任何同事都能重新生成出完全相同 的这一组。
用 CSS/JS 补间做会变形的 blob 动画
想要一个会"呼吸"的 hero,可以在两个 blob 路径之间做形变。生成 blob A(种子 100),复制它 SVG 路径的 `d` 属性,再用相同复杂度 生成 blob B(种子 200)让两条路径点数一致,复制它的 `d`。把两者 喂给 SVG 的 `<animate>` 元素或 flubber / anime.js 这类 JS 库做 补间。复杂度一致是让形变干净插值、不出鬼影的关键。
常见踩坑
在两个复杂度不同的 blob 之间做形变。SVG 路径插值要求两条路径有相同数量的曲线段,否则补间会跳变出鬼影。复制 `d` 属性前,务必用完全相同的复杂度值生成起始和结束的 blob。
在老浏览器上依赖 `clip-path: path()`。clip-path 的 path() 形式在 IE 和很老的 Safari/Chrome 上不支持。如果必须兼容老环境,改用内联 SVG 当遮罩图片,或在 `@supports (clip-path: path('M0 0'))` 查询后面放一个圆角矩形兜底。
忘了 clip-path 坐标是绝对像素而不是百分比。path() 导出按 blob 的像素尺寸生成。如果你用 CSS 缩放被裁元素,裁剪不会跟着缩放,把元素的宽高设成跟 blob 尺寸一致,或者直接按目标尺寸重新生成 blob。
隐私说明
这个工具的每一部分(带种子的伪随机数发生器、Catmull-Rom 转贝塞尔 的路径运算、SVG 与 clip-path 的序列化)都是完全在你浏览器标签页里 运行的纯 JavaScript。任何形状、颜色或种子都不会发到服务器,不对你 生成的内容打点,也不记录日志。唯一要留意的隐私点:可分享 URL 会把 当前种子和设置写进 query string,所以你把带着未发布品牌色的"分享 链接"粘到公开频道时,对方服务器的访问日志会留下这些值。普通 blob 无所谓;涉及保密品牌工作时,手动复制 SVG 比分享 URL 更稳妥。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。