SVG 不规则形状生成器
根据复杂度和对比度设置生成有机随机的 SVG 不规则形状（blob），用种子重新生成变体，实时预览，并复制 SVG 或 CSS clip-path。
正在加载工具…
SVG 不规则形状生成器 — 设置形状的点数（复杂度）和边缘的不规则程度（对比度），然后点击“重新生成”，用下一个种子掷出一个新的随机变体。调整时实时预览会显示形状，你可以同时获得完整的 SVG 代码和可粘贴到样式表的 CSS clip-path。一切都在你的浏览器中用带种子的随机生成器计算，形状、颜色和设置绝不会离开你的设备。
SVG 不规则形状生成器 是什么？
SVG 不规则形状生成器是一款免费的浏览器内工具，面向想要为背景、首屏区块、头像或装饰点缀添加柔和有机形状（blob），又不想手绘的设计师和前端开发者。你可以控制两个数值：复杂度（形状周围锚点的数量）和对比度（每个点偏离完美圆形的幅度）。状态中保存一个种子，由“重新生成”按钮递增，让你在保持复杂度和对比度不变的同时循环出无穷的变体。输出会渲染为一条平滑闭合的贝塞尔路径，因此你可以复制干净的 SVG 代码、获取用于裁剪任意元素的 CSS clip-path() 规则，或下载可直接使用的 .svg 文件。用它快速制作符合品牌的装饰，或学习 blob 路径是如何由圆周上的点构建的。
如何使用 SVG 不规则形状生成器
- 打开“设置”，设置形状的复杂度（点数，3-16）。
- 设置对比度（0-100），控制边缘的不规则和起伏程度。
- 用色块或输入 HEX 值选择填充颜色。
- 点击“重新生成”，用下一个种子掷出新的随机变体，直到你满意为止。
- 复制 SVG 代码或 CSS clip-path 规则，或点击“下载”保存 .svg 文件。
示例
柔和的背景 blob
将复杂度设为 6、对比度设为约 40，可得到柔和圆润的 blob，多次重新生成直到找到适合首屏或卡片背景的形状。
尖锐的有机形状
将复杂度提高到 12、对比度提高到 80，可得到更锯齿、更有活力的轮廓，适合徽章或俏皮插画。
CSS clip-path 遮罩
复制生成的 clip-path: path('...') 规则，应用到图片或 div 上，使元素被裁剪成 blob 轮廓。
常见问题
- 复杂度和对比度控制什么？
- 复杂度是沿圆周均匀放置的锚点数量（3 到 16）——点越多，轮廓越精细。对比度是每个点相对基准半径随机向内或向外推动的幅度（0 到 100），所以 0 接近普通圆形，100 则高度不规则。
- “重新生成”按钮如何工作？
- 每个 blob 由一个数值种子加上你的复杂度和对比度构建。重新生成会将种子加一并重新计算形状，因此每次点击都会得到一个全新的随机变体，而复杂度、对比度和颜色保持不变。
- SVG 输出和 clip-path 输出有什么区别？
- SVG 输出是一个完整、独立的 <svg> 文件，可嵌入或下载。clip-path 输出是一条使用 path() 的 CSS 规则，可应用到任意 HTML 元素，把它裁剪成相同的 blob 轮廓。
- 我可以更改颜色并下载文件吗？
- 可以。用色块或 HEX 值设置填充颜色；预览、SVG 和下载都会使用它。点击“下载”即可保存完全在浏览器中生成的 blob.svg 文件。
- 我的形状或设置会被发送到服务器吗？
- 不会。blob 使用本地带种子的随机函数生成，所有 SVG 和 clip-path 字符串都在你的浏览器中构建。任何内容都不会上传，因此该工具可离线使用，你的工作保持私密。