SVG 不规则形状生成器
SVG Blob生成工具
关于 SVG Blob 生成器
SVG Blob 生成器利用三次贝塞尔曲线构建有机的、不规则闭合形状，并导出为可直接粘贴的 SVG 标记。它会沿圆形采样 N 个点，附带随机径向偏移，再通过基于相邻点的切线计算进行平滑处理，最终将所有点连接成一条闭合的 <path>。实时预览与可复制的代码块让您可以一键获取结果。
使用方法
1. 调整“复杂度（Complexity）”滑块（3 到 12），设定构成 blob 的锚点数量。 2. 调整“随机度（Randomness）”滑块（0.10 到 1.00），控制每个点相对于基准半径的漂移幅度。 3. 设置正方形 viewBox 的“大小（Size）”（100 到 500px）。 4. 可选：调高“描边宽度（Stroke Width）”（0 到 10），添加一条与填充色相同的轮廓线。 5. 通过色板选择“填充颜色（Fill Color）”。 6. 点击“随机（Randomize）”（或微调任一滑块）重新生成形状。 7. 点击“复制（Copy）”将生成的 SVG 代码复制到剪贴板。
SVG 输出格式
导出的标记是一个单独的 <svg>，带有 0 0 {size} {size} 的正方形 viewBox。其中包含一条 <path>，其 d 属性是一串以 Z 闭合的 C（三次贝塞尔）命令。平滑系数固定为 0.2，由每个点相邻两点之间的向量推导得出。当描边宽度大于 0 时，路径还会附带 stroke 和 stroke-width 属性，颜色与填充色相同；否则仅输出 fill。
▶为什么在相同设置下，两次点击“随机”会得到不同的形状？
每次随机都会更新内部的随机种子，并基于 JavaScript 的 Math.random() 重新运行点生成器。设置只决定取值范围，具体形状每次都是重新采样得到的。
▶我可以让 blob 大于 500px 吗？
无法通过滑块实现，滑块上限为 500。但由于输出使用 viewBox 而非固定尺寸，复制后您可以通过 CSS 的 width 和 height 任意缩放该 SVG。
▶描边颜色是否与填充色一致？
是的。组件将 stroke 和 fill 都设为同一个“填充颜色（Fill Color）”值，且仅当“描边宽度（Stroke Width）”大于 0 时才会输出 stroke。
▶我的数据会上传到服务器吗？
不会。所有处理都在您的浏览器本地完成，您的输入永远不会离开您的设备。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。