SVG 色块（Blob）生成器
创建平滑的有机 SVG 色块形状，可调节锚点数、随机程度和种子。支持纯色、渐变或描边填充，可下载 .svg 或复制 CSS data URI。
色块设置
填充
相同的设置和种子总会生成相同的形状。
预览
SVG 代码
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>
CSS 背景（data URI）
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");相关工具
查看全部什么是 SVG 色块生成器？
生成平滑的有机色块形状（SVG）。可控制锚点数量、形状的不规则程度和大小，选择纯色、渐变或描边填充，并导出为 .svg 文件或 CSS data URI。
如何使用 SVG 色块生成器
- 选择“填充”（纯色、渐变或仅描边）及颜色。
- 设置“锚点数”“随机程度”和“尺寸”。
- 点击“随机生成”，或输入“随机种子”得到特定形状。
- 点击“下载 .svg”，或复制 SVG 代码。
- 或者复制“CSS 背景（data URI）”。
示例
输入
Points 4, randomness 0, size 100, solid #8a3ffc
输出
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>
何时使用 SVG 色块生成器
适合把色块用作装饰背景、图片蒙版、头像框或插画点缀。随机程度为 0 时得到近似圆形；要得到精确的几何形状，请改用 CSS border-radius 或 clip-path。
SVG 色块生成器 的工作原理
锚点沿一个圆均匀分布（半径为尺寸的 45%）。每个点到中心的距离会按带种子的伪随机量缩小，最多缩小 60% × 随机程度。穿过各点的闭合 Catmull-Rom 样条被转换为三次贝塞尔命令，保证轮廓平滑无折角。渐变填充使用从左上到右下的 SVG linearGradient。
常见用例
- 落地页上的装饰背景形状
- 头像照片的图片蒙版
- 插画点缀和贴纸
- 动态变形的色块（用不同的种子生成多个）
- 演示文稿中的占位图形
常见问题
能重新生成我喜欢的某个色块吗？
可以。请把“随机种子”连同锚点数、随机程度和尺寸一起保留，它们总会得到相同的路径。
如何把色块用作图片蒙版？
把路径放进 SVG 的 <clipPath> 中，或把下载的 SVG 用于 CSS mask-image。
为什么色块永远不会碰到边缘？
最大半径是尺寸的 45%，留出一点边距，避免描边和抗锯齿被裁掉。