SVG Blob 生成器 —— 在线生成有机不规则形状(免费)
SVG Blob 生成器帮你做出那种有机、不规则的圆润形状(blob),常用来当头像底衬、装饰斑块、图片蒙版。调边数和不规则度、换颜色、点随机换一个,实时预览,一键复制 SVG 或导出 PNG。设计猫纯前端、不上传——每个 blob 都在你浏览器里现算。
SVG Blob 生成器是设计猫的免费在线工具,全程在你的浏览器本地完成:打开即用、做完即下载。文件不上传服务器,无需注册、无次数限制。
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" width="500" height="500"><path fill="#FB7185" d="M 444.6 250.0 C 443.6 301.4, 387.9 366.1, 336.3 399.4 C 284.6 432.7, 183.1 474.7, 134.6 449.8 C 86.2 424.9, 37.4 302.5, 45.6 250.0 C 53.7 197.5, 134.0 161.2, 183.4 134.7 C 232.8 108.1, 298.4 71.6, 341.9 90.8 C 385.4 110.0, 445.5 198.6, 444.6 250.0 Z"/></svg>
纯前端实时生成的有机形状,导出单 path 的内联 SVG(可当蒙版/改色)或透明背景 PNG。
blob 形状是怎么生成的,又能用在哪?
blob 就是那种没有尖角、边缘平滑起伏的「有机斑块」,这几年在头像底衬、Hero 装饰、图片蒙版里非常流行,因为它比正圆和矩形更柔和、更有亲和力。它的生成原理是:在一个圆周上均匀取 N 个点,给每个点的半径加一点随机扰动(这就是「不规则度」),再用光滑的闭合贝塞尔曲线把这些点连起来。点数越多、扰动越大,形状越复杂越「歪」。设计猫直接在浏览器里跑这套算法,所以你拖滑块就能实时看到 blob 变形。
用 blob 有几个甜区。一是当头像或图标的底衬:在用户头像下面垫一个品牌色的 blob,立刻比方框头像更生动。二是当 Hero 区的装饰:放一两个大 blob、给低饱和的品牌色和一点模糊,画面就有了呼吸感而不空。三是当图片蒙版:把 blob 的 path 用作 SVG clipPath 或 CSS 的 clip-path,照片就被裁成有机形状,比圆角矩形精致得多。注意别贪多——一个页面一两个 blob 是点缀,满屏 blob 会显得廉价。
导出时优先用 SVG:blob 本质是一条闭合 path,几百字节、无损缩放、还能用 CSS 改 fill 或做缓慢的形变动画(morph)。直接复制内联 SVG 即可;要当蒙版就把 path 塞进 <clipPath> 引用。如果目标环境只吃位图,用「下载 PNG」导出透明背景版本。整套生成与导出都在设计猫浏览器本地完成,不上传、不注册、无限次。
如何使用 SVG Blob 生成器?
- 1调「边数」控制 blob 的复杂度(少=圆润,多=褶皱多)。
- 2调「不规则度」控制它有多「歪」(0=接近圆,高=很有机)。
- 3点「随机」骰子生成全新形状,直到挑到顺眼的。
- 4改颜色,再点「复制 SVG」或「下载 PNG」用进你的设计里。
为什么用设计猫SVG Blob 生成器?
- 本地生成、不上传:纯浏览器算光滑闭合曲线,秒出。
- 干净的单 path SVG:体积极小,可当头像蒙版、装饰背景,无损缩放。
- 随机有种子:每次随机都是一个可重现的完整形状,挑选高效。
常见问题
blob 的「边数」和「不规则度」分别是什么?
边数是圆周上取的控制点个数,越多形状越复杂、褶皱越细;不规则度是每个点半径随机偏移的幅度,0 接近正圆、越大越歪越有机。两者配合决定 blob 的样子。
能把它当图片蒙版裁照片吗?
可以。复制出 blob 的 path,放进 SVG 的 <clipPath> 并让图片引用它,或用作 CSS clip-path,照片就会被裁成这个有机形状。
导出的 SVG 能改颜色和做动画吗?
能。它是一条单 path,用 CSS 的 fill 改色即可;想要形变动画可在两个 blob 的 path 间做 morph 过渡(需库或 SMIL)。
每次随机出来的形状能重现吗?
设计猫的随机基于可控参数,相同的边数、不规则度与种子会得到相同形状;点随机即换一组参数生成新 blob,挑到满意再复制。
更新于 · 设计猫团队
