SVG 不规则形状(blob)怎么生成?随机有机图形从画到导出

打开 2024 年以后的任何一个落地页,你大概率会在标题旁边看到一团软软的、圆润又不规则的色块。它不是圆,也不是椭圆,边缘像被手捏过一样有点起伏。这种形状有个专门的名字:blob。它现在几乎是现代 UI 的标配装饰,但很多人不知道它其实是一段干净的 SVG 路径,可以随机生成、可以复现、放大到任意尺寸都不糊。

blob 到底是什么形状

blob 本质上是一个被"扰动"过的圆。先在一个圆周上均匀放 N 个点,然后把每个点沿着半径方向往里或往外推一段随机距离,圆就变成了一团高低不平的轮廓。如果直接把这些点用直线连起来,你得到的是一个锯齿多边形,很丑。真正让它平滑的是连接方式:用一条闭合的 Catmull-Rom 样条曲线穿过所有点,再转成三次贝塞尔曲线写进 SVG 的 d 属性。

Catmull-Rom 的特点是曲线会精确穿过每一个控制点,并在每个点处匹配前后切线,所以整条轮廓是 C1 连续的,没有尖角,也不会自相交,而且首尾自动闭合。这就是为什么一个数学上很简单的"圆 + 随机扰动",画出来却是那种有设计感的柔和团块。

复杂度和随机度,两个旋钮决定长相

生成 blob 真正能调的就两个参数。复杂度是边缘点的数量,点越多,轮廓能弯折的次数越多。随机度控制每个点被推出去的幅度,也就是轮廓偏圆还是偏疙瘩。

这两个旋钮组合出完全不同的气质。高复杂度配高随机度,会得到尖锐、复杂、像变形虫的轮廓;低复杂度则更接近一个柔和的圆角三角形或方形。如果你只是想要经典的那种 hero blob,5 到 7 个点配中等随机度基本就是最佳区间,再多反而显得乱。在 SVG Blob 有机形状生成器里拖动这两个滑块,形状会实时跟着变,比凭空想象快得多。

一个真实例子:hero 背景里的氛围光晕

我自己最常用的一个场景,是给 SaaS 落地页的标题做背景光晕。做法很具体:复杂度设 6,随机度调到 0.4 左右,填充从纯色切到两段式线性渐变,选两个品牌色,然后复制内联 SVG。

把这段 SVG 放进 hero 区,做成绝对定位、低层级的元素,加上 opacity: 0.6 和一个比较重的 filter: blur(40px)。模糊之后,这团 blob 就不再读作一个硬边形状,而是一片浮在文字后面的氛围光。导出的路径大概长这样:<path d="M210 90 C260 95 ... Z" fill="url(#g)"/>,一个闭合的 d 字符串加一个渐变填充,整段不到 1KB。关键是种子号就写在我的代码注释里,几个月后设计改版,我还能输入同一个种子,生成出像素级一模一样的那团光晕。

为什么放大永远不糊

blob 是 SVG,SVG 是矢量。它存的不是一格一格的像素,而是一串描述曲线的坐标和命令。浏览器渲染时按当前显示尺寸现算这条贝塞尔曲线,所以无论你把它拉到手机上的 80 像素,还是 4K 大屏上的 1200 像素,边缘都是按当下分辨率重新光栅化的,永远是锐利的。

这和 PNG 截图完全不同。如果你把一个 blob 截成 200 像素的 PNG,再放到 800 像素的容器里,它会被拉伸四倍,边缘糊成马赛克。用矢量就没有这个问题,一个文件走遍所有尺寸。如果导出的路径冗余小数位太多,文件偏大,可以再过一道 SVG 优化压缩工具把坐标精度和无用属性裁掉,体积还能再小一截。

三种导出方式各管什么用

生成完之后有三种拿走它的方式,对应三类用途。

复制原始 SVG 代码,适合 blob 本身就是要展示的视觉,比如装饰背景、图标、贴纸。直接把这段 markup 塞进 HTML 就行。

复制 CSS clip-path: path(...) 声明,适合你想把一个已有元素裁成 blob 轮廓,而不想往 DOM 里多塞一个 SVG。比如把一张照片或一个头像的 <img> 裁成有机形状,一行 CSS 搞定,不增加任何额外节点。要注意 clip-path: path() 在当前 Chrome、Edge、Safari、Firefox 支持良好,但老浏览器不认。

下载独立的 .svg 文件,适合交给设计师,或当图片素材丢进 Figma、Webflow、Framer。每次下载都是一个自包含的文件,完全不用写代码。

有一个容易踩的坑值得单独说:如果你想做两个 blob 之间的形变动画,必须用完全相同的复杂度生成起始和结束形状,否则两条路径点数不一致,补间会跳变出鬼影。

收尾

blob 看着像随手画的有机形状,底下其实是一套可控、可复现、可缩放的矢量逻辑。种子决定唯一性,复杂度和随机度决定长相,SVG 保证清晰,clip-path 负责裁切。理解了这几层,你就能把它从"网上随便找一个"升级成"按需求精确生成"。配色环节如果想更讲究,可以先去渐变生成器调好两个色标再回填进 blob,整套流程都在浏览器本地完成,不上传任何东西。

Made by Toolora · Updated 2026-06-13