登录

SVG Blob 生成器

生成平滑、随机的有机 SVG 形状 — 复制 SVG 或 CSS clip-path

6
3 (果冻豆)12 (混沌)
50%
0% (圆形)100% (狂野)

预览

SVG 代码

.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M 200.00 121.41 C 232.49 120.67 273.07 112.16 301.26 141.54 C 329.45 170.91 386.00 254.01 369.12 297.64 C 352.24 341.27 241.71 411.77 200.00 403.31 C 158.29 394.84 134.48 289.74 118.87 246.84 C 103.26 203.94 92.81 166.83 106.33 145.92 C 119.85 125.01 167.51 122.14 200.00 121.41 Z" fill="#7fb2ff"/>
</svg>

CSS clip-path

clip-path: path('M 200.00 121.41 C 232.49 120.67 273.07 112.16 301.26 141.54 C 329.45 170.91 386.00 254.01 369.12 297.64 C 352.24 341.27 241.71 411.77 200.00 403.31 C 158.29 394.84 134.48 289.74 118.87 246.84 C 103.26 203.94 92.81 166.83 106.33 145.92 C 119.85 125.01 167.51 122.14 200.00 121.41 Z');

使用示例

🖼️ 图片遮罩

.avatar {
  width: 240px;
  height: 240px;
  object-fit: cover;
  clip-path: path('M 200.00 121.41 C 232.49 120.67 273.07 112.16 301.26 141.54 C 329.45 170.91 386.00 254.01 369.12 297.64 C 352.24 341.27 241.71 411.77 200.00 403.31 C 158.29 394.84 134.48 289.74 118.87 246.84 C 103.26 203.94 92.81 166.83 106.33 145.92 C 119.85 125.01 167.51 122.14 200.00 121.41 Z');
}

🎨 Hero 背景

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

关于 SVG Blob

SVG Blob 生成器通过在圆周上采样点并用平滑的贝塞尔曲线连接，创建封闭的有机形状。你看到的营销页面英雄区域、头像遮罩、彩色背景 blob 都是这类形状。

Blob 介于几何和随机之间。调整控制点数量可以得到果冻豆（3-4）、鹅卵石（5-6）或混沌（10+）形状。调整随机度可以从近圆形到极度扭曲。

三次贝塞尔曲线赋予 blob 平滑度 — 使用 Catmull-Rom 样条自动推导控制手柄，无需手动调整控制点即可保持曲线平滑。

适用场景：

• Hero 背景 — 绝对定位在内容后面

• 图片遮罩 — 应用 CSS clip-path 到 <img>

• 头像形状 — 用 div 包裹头像并应用 clip-path

• 区域分隔符 — 拉伸 blob 作为 section 底部装饰

• 装饰点缀 — 多个半透明 blob 叠加

所有计算在浏览器本地完成，无需上传任何数据。