SVG 不规则形状生成器

SVG blob 生成器是什么？

SVG blob 生成器会在圆周上取若干个点，再用平滑的贝塞尔曲线把它们连起来，生成闭合的有机形状。结果是一个柔和、流动的轮廓，也就是你在营销页首屏背后、头像周围或者落地页上常见的那种彩色背景图形。

Blob 恰好介于几何与随机之间。调整点数，可以得到软糖形（3 至 4 个点）、鹅卵石形（5 至 6 个点）或杂乱的形状（10 个以上）。调整随机度滑块，可以从接近圆形一直变到夸张扭曲。随时点击骰子按钮，就能生成一个全新的种子。

一切都在你的浏览器中运行。可以导出为可复制粘贴的 SVG 代码片段、可下载的 .svg 文件，或者一个 CSS clip-path 值，直接应用到任意 HTML 元素上，把它裁剪成这个形状。

制作 blob 时你会学到

• 三次贝塞尔曲线让形状变得平滑：每对相邻的点都有两个控制柄，经过计算让每个连接处的切线保持连续。
• 这里用到的 Catmull-Rom 样条会根据相邻点自动推算出这些控制柄，所以你不必手动调整控制点来保持曲线平滑。
• CSS 的 clip-path: path(...) 可以把 blob 形状应用到任意元素上，比如图片、div、视频，而且不影响它的布局盒子。
• 用 SVG 渲染的形状可以无限缩放而不出现像素化，这一点和 PNG 不同，而且只有几百字节大小。

生成 blob 的步骤

1. 1

   选择点数

   点数少（3 至 5 个）会生成软糖形状。点数多（8 至 12 个）会生成鹅卵石般的不规则形状。

2. 2

   设置随机度

   0% 是一个圆。50% 会得到柔和的不规则曲线。100% 会得到夸张扭曲、极具张力的轮廓。

3. 3

   选择颜色或渐变

   使用纯色填充，或者开启“渐变”，选择两种颜色和一个角度。和常见的首屏设计风格很搭。

4. 4

   随机生成并导出

   点击骰子生成新的种子。满意之后，复制 SVG、复制 CSS clip-path，或者下载 .svg 文件。

blob 最适合用在哪里

blob 的几种常见用法，以及需要注意的地方。

可以试试的 blob 示例

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Welcome to Coddy</h1></section>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

使用 SVG blob 的常见错误

• 忘了写 viewBox，却给 <svg> 设置了固定的宽高。这样形状无法响应式缩放，应该用 viewBox 配合 CSS 中的宽高。
• 每一帧都对大面积填充路径做动画。路径光栅化开销很大，要么用 transform/opacity，要么用 CSS 滤镜预先模糊，交给 GPU 处理。
• 把内联 <svg> 复制到 Tailwind/Bootstrap 里，结果继承了 display: inline 而不是 block。默认的基线间隙会在形状下方留出几个像素。
• 把 blob 用作按钮形状，却忘了鼠标事件仍然在矩形包围盒上触发，而不是在曲线轮廓上。如果需要精确的点击检测，就在里面放一个真正的 <button>。
• 在移动端叠加很多高模糊度的不透明 blob。合计的重绘开销会让低端设备的帧率明显下降。

SVG blob 生成器常见问题