登录

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 85.55 C 244.09 74.18 360.54 52.69 391.33 89.54 C 422.11 126.39 416.61 259.28 384.72 306.65 C 352.83 354.01 253.31 378.50 200.00 373.73 C 146.69 368.96 77.06 314.02 64.86 278.02 C 52.66 242.02 104.29 189.82 126.81 157.74 C 149.33 125.66 155.91 96.92 200.00 85.55 Z" fill="#7fb2ff"/>
</svg>

CSS clip-path

clip-path: path('M 200.00 85.55 C 244.09 74.18 360.54 52.69 391.33 89.54 C 422.11 126.39 416.61 259.28 384.72 306.65 C 352.83 354.01 253.31 378.50 200.00 373.73 C 146.69 368.96 77.06 314.02 64.86 278.02 C 52.66 242.02 104.29 189.82 126.81 157.74 C 149.33 125.66 155.91 96.92 200.00 85.55 Z');

使用示例

🖼️ 图片遮罩

.avatar {
  width: 240px;
  height: 240px;
  object-fit: cover;
  clip-path: path('M 200.00 85.55 C 244.09 74.18 360.54 52.69 391.33 89.54 C 422.11 126.39 416.61 259.28 384.72 306.65 C 352.83 354.01 253.31 378.50 200.00 373.73 C 146.69 368.96 77.06 314.02 64.86 278.02 C 52.66 242.02 104.29 189.82 126.81 157.74 C 149.33 125.66 155.91 96.92 200.00 85.55 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 叠加

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