SVG Blob 生成器
SVG Blob 生成器（随机有机形状生成器），是指按点数、随机度与平滑度一键生成不规则流体形状，实时预览并导出 SVG 代码的前端工具。它免费、无需注册，支持纯色、渐变与描边，可复制 path 路径、CSS 背景或 clip-path，也能下载 SVG 与 PNG。同一个种子永远得到同一个形状，便于复现与分享；生成的曲线保证不自相交。计算全在浏览器本地完成，内容不上传。
- 形状占画布面积 50.5%
- 曲线不自相交 ✓
- path 共 6 段贝塞尔、SVG 约 351 字节；精度从 2 位降到 1 位可省 44 字节
候选形状（点一个即采用该种子）
完整独立 SVG 文件，样式全部写成呈现属性，粘进 HTML 即可显示
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" width="480" height="480"> <path d="M 233.5 38.4 C 286.9 39.6 365.3 102.3 395.3 153.4 C 425.4 204.4 443.1 296.7 413.9 344.8 C 384.7 392.8 277.9 443.1 220.2 441.6 C 162.4 440 91.5 384.7 67.2 335.5 C 43 286.3 46.9 196 74.7 146.4 C 102.4 96.9 180.1 37.3 233.5 38.4 Z" fill="#ff7a59"/> </svg>
取值范围：点数 3~12，随机度与平滑度 0~100，画布 64~1024px，留白 0~40%。
如何使用SVG Blob 生成器
调点数、随机度与平滑度，点「随机一个」或从 8 个候选里挑一个形状，「上一个」可以回退。
选纯色、渐变或仅描边，设好画布尺寸与留白，预览底色可切浅色、深色或棋盘格。
在 SVG 代码、path 路径、CSS 背景与 clip-path 之间切换复制，或下载 SVG、PNG。
关于SVG Blob 生成器的常见问题
- SVG Blob 生成器会上传我的数据吗？
- 不会。形状由你填的种子与参数在浏览器本地现算，SVG 文本在本地拼装，PNG 也是在本地画布上绘制后直接下载，没有任何内容发往服务器。本工具只在本地存储里记住导出格式、坐标精度、画布边长这类展示偏好，种子、点数与形状数值都不保存。
- 手机浏览器里怎么用 SVG Blob 生成器？
- 手机上直接打开本页即可：滑杆和数字框都能触控操作，按钮命中区按 44px 设计，候选形状四个一排。复制代码后粘贴到备忘录或聊天里发给电脑；下载的 SVG 与 PNG 会进系统的下载目录。窄屏下参数区与预览区改为上下排列。
- SVG Blob 生成器生成的形状可以商用吗？
- 形状不是来自素材库，而是由你选定的参数与随机种子在本地按公式现算出来的，本站对生成结果不主张任何权利，你可以自由用在网页、海报或应用界面里。本站不提供法律意见，若项目对素材来源有严格审查，请以你所在团队或法务的要求为准。
- 怎么用 blob 生成器复现同一个形状？
- 记下种子和四个形状参数就行。同一个种子加上同样的点数、随机度与平滑度，在任何浏览器、任何设备上都会算出逐字节相同的 path，因为随机源只用整数运算、不依赖时间与系统。比如默认种子 deertools、6 个点、随机度 50、平滑度 100，path 永远以 M 233.5 38.4 开头。画布边长、留白与精度只影响坐标缩放与小数位，不影响形状本身。
- 网页背景的不规则 blob 色块怎么做？
- 先在本工具里调出喜欢的形状和颜色，然后二选一：要在 HTML 里改色或加动画，复制「SVG 代码」直接内联进页面；只想当装饰，复制「CSS 背景」那三行贴到容器的样式里，再用 background-position 与 background-size 控制位置和大小。色块想要柔和一些，可以把颜色写成带透明度的 rgba，本工具会输出成 fill-opacity。
- blob 生成器做的形状怎么当 CSS 背景图？
- 切到「CSS 背景」标签复制即可，它把整段 SVG 压成一行 data URI 塞进 background-image，附带 no-repeat 与 contain。转义只做最小必要：双引号改成单引号，% # < > { } 与非 ASCII 字符做百分号编码，比 base64 更短也更好读。注意 data URI 里的颜色是写死的，外部 CSS 改不了，需要换色就回来改参数再复制一次。
- SVG blob 怎么做变形动画？
- 展开「变形动画」面板，选 2~4 个关键帧和 2~20 秒的时长，本工具会用同一点数生成几个形状，写进 SMIL 的 animate 元素里让 d 属性循环插值。要点是所有关键帧的路径命令结构必须完全一致，本工具每个形状都是 M 加若干段 C 再加 Z，所以同点数一定能平滑变形，换了点数就不行。
- blob 生成器导出的 SVG 怎么改颜色？
- 最简单的是在本工具里改色后重新复制。拿到代码后想手改，就找 path 上的 fill 属性；渐变模式下改 defs 里两个 stop 的 stop-color。内联进 HTML 的 SVG 还可以用 CSS 覆盖，比如给 path 写 fill: currentColor 跟随文字颜色。做成 CSS 背景或 PNG 的就只能改参数重新导出。
- SVG Blob 和 border-radius 做的 blob 有什么区别？
- border-radius 的 blob 是给元素写 8 个百分比圆角，本质是四段椭圆弧拼成的软方块，形状自由度有限，也没法导出成图形文件；好处是直接作用在元素上，阴影和边框都保留。SVG Blob 是任意点数的贝塞尔曲线，可以导出 SVG、PNG，能做背景装饰与变形动画。只需要圆润的卡片或头像，用圆角生成器就够了。
- SVG Blob 生成器能导出透明背景 PNG 吗？
- 能。PNG 用同一条 path 在本地画布上重绘，形状以外的区域是透明的，可以选 1 倍或 2 倍分辨率，2 倍适合高清屏。PNG 是位图，放大会糊，需要任意缩放的场景请用 SVG。如果你要把已有的 SVG 文件转成 PNG，这不是本工具的范围，可以去姊妹站的图片工具处理。
SVG Blob 生成器参数速查表
Blob 指网页设计里那种边缘圆润、轮廓随意的色块，也有人叫液态形状、流体形状或有机形状。本工具在中文里也被叫作随机形状生成器、SVG 形状生成器；英文叫法是 blob generator、svg blob generator 或 blob shape generator，类似 blobmaker 的在线工具。它生成的就是一个不规则形状的 SVG 路径，下表是全部参数的含义与取值。
| 参数 | 取值 | 含义 |
|---|---|---|
| 点数 | 3~12，默认 6 | 控制点个数，点越多轮廓越「皱」 |
| 随机度 | 0~100，默认 50 | 0 为正多边形或正圆，越大半径与角度抖动越明显 |
| 平滑度 | 0~100，默认 100 | 100 为圆润曲线，0 为直线多边形（尖角 blob） |
| 画布边长 | 64~1024px，默认 480 | viewBox 正方形边长，也是导出的宽高 |
| 留白 | 0~40%，默认 8% | 形状包围盒到画布边的距离，按精确包围盒计算 |
| 坐标精度 | 0 / 1 / 2 位小数 | 默认 1 位；默认形状在 0、1、2 位时 SVG 约 281、351、395 字节 |
| 导出物 | 适合 | 限制 |
|---|---|---|
| 内联 SVG 代码 | 直接写进 HTML，可用 CSS 改色、加交互 | 会增加 HTML 体积 |
| path 路径 | 粘进 Figma 或自己的 path 元素 | 只有形状，不含颜色 |
| CSS 背景 | 当装饰背景，不改动 HTML 结构 | 颜色写死，外部 CSS 改不了色 |
| CSS clip-path | 把图片或元素裁成 blob 形状 | 坐标是固定像素，只在 480×480 等指定尺寸上一致 |
| PNG 图片 | 发给不能用 SVG 的地方（文档、社交平台） | 位图，放大会糊 |
SVG Blob 是怎么生成的：点数、随机度与平滑度
SVG 有机形状的生成分三步。第一步，在单位圆上按点数等分角度放置控制点；随机度决定每个点的半径缩短多少、角度偏离多少，半径最短到 50%，角度偏离不超过四分之一个等分角，所以控制点始终按顺时针排好队。第二步，把首尾相接的控制点用闭合的 Catmull-Rom 样条连起来，再换算成三次贝塞尔曲线，平滑度就是控制柄长短的系数。第三步，按曲线的精确包围盒把形状缩放、居中到画布里。
第三步之所以要算精确包围盒，是因为 Catmull-Rom 曲线会越过控制点向外凸：如果按控制点的范围缩放，曲线鼓出去的部分就会被画布裁掉。本工具对每段贝塞尔求导数为零的点，得到真正的最左、最右、最上、最下，留白因此是精确的。随机度为 0、点数 12 时得到的近似正圆，在默认留白下占画布面积 55.3%；默认形状占 50.5%。
样式只影响外观不影响形状：blob 渐变用两色线性渐变，角度按 CSS 的口径（0° 朝上、顺时针）；描边会向外扩半个线宽，本工具在归一时把它并入留白，粗描边也不会被 viewBox 裁掉。颜色先解析再以 hex 写进 SVG，带透明度时拆成 fill-opacity，兼容性更好。
同一个种子为什么永远得到同一个形状
种子是一段文字，本工具先把它哈希成整数，再喂给一个只用整数运算的伪随机数发生器，每个控制点固定取两次随机数。整数运算在任何浏览器里结果都一样，所以同一个种子、同样的参数，在电脑、手机、不同浏览器上都会算出逐字节相同的 path。默认种子 deertools 生成的路径永远以 M 233.5 38.4 开头。
点「随机一个」时页面会用浏览器的安全随机数生成 8 位新种子，每点一次就是一个随机 blob，最近 30 个种子留在本页的历史里，「上一个」「下一个」可以来回翻。候选网格用当前种子加后缀派生出 8 个种子，例如 deertools-1 与 deertools-2，点中哪个就采用哪个种子，同样可以复现。想把某个形状发给同事，把种子和参数一起发过去就够了。
为什么 blob 形状不会自己打结
随机曲线最怕自相交：轮廓打个结，填充就会出现奇怪的镂空。本工具从参数的取值范围上避免这件事，而不是生成后再检查重来。控制点的半径不小于外圈的 50%，相邻两点的角度间隔不小于半个等分角，控制柄长度只有相隔两点连线的六分之一，在这样的范围里曲线沿着极角单调前进，绕中心一圈回到起点。
这不是一条普适的数学定理，而是经扫描验证的安全域：单测对 3~12 个点、五档随机度、三档平滑度、每格 200 个种子逐一检查采样点的极角是否单调，并抽样做逐段相交判定。运行时本工具仍会把每段贝塞尔切成 32 份逐段自检，信息条显示「曲线不自相交」；万一检查不通过会直接告诉你，不会悄悄隐藏。
blob 背景怎么用：内联 SVG、CSS 背景与 clip-path
SVG path 生成后可直接粘进 Figma，或放进你自己写的 SVG 里。做网页装饰时最常用的是两种：内联 SVG 写进 HTML，可以随时用 CSS 改颜色、加悬停效果；CSS blob 背景则把整段 SVG 编码进 background-image，不动 HTML 结构，适合给区块铺一个装饰色块，缺点是颜色写死。
clip-path 的 path() 能把图片或任意元素裁成 blob 形状，但它的坐标是固定像素，不随元素缩放：本工具导出的坐标只在与画布同尺寸的元素上和预览一致，元素换尺寸就要把画布边长调成同样大小再复制。需要随元素等比缩放的裁剪，可以改用内联 SVG 的 clipPath 配合 objectBoundingBox，或者先用 Clip-path 生成器 做多边形版本。只需要圆润的卡片或头像，用 圆角生成器 写 border-radius 就够了，还能保留阴影。
要把已有的 SVG 文件转成 PNG、或者编辑图片，请到姊妹站在线图片处理处理；本工具只导出自己生成的这个形状。
blob 变形动画：SMIL 与 CSS 的兼容性
blob 动画最常见的做法是让 path 的 d 属性在几个形状之间来回插值，也就是 SVG 变形动画。浏览器能插值的硬条件是两条路径的命令个数与类型逐一相同：本工具所有形状都是 M 加若干段 C 再加 Z，平滑度为 0 时也照样输出 C 命令，所以同点数的任意两个形状都能平滑过渡，换了点数就只能跳变。
兼容性方面，SMIL 的 animate 元素在当前版本的 Chrome、Firefox 与 Safari 里都能播放，导出的 SVG 作为 img 或 CSS 背景引用时也会动；而用 CSS 的 d: path() 做动画 Safari 不支持，所以本工具只导出 SMIL 版本。关键帧种子按 deertools、deertools~1、deertools~2 派生，每帧单独归一到同一画布，插值中间帧的留白不保证精确。系统开启「减少动态效果」时，本页预览只显示首帧，导出物不受影响。