Blob 形状生成器

如何使用

1. 设顶点数。3 到 4 个像柔化的三角形与圆角方形；8 个以上则趋近圆形。
2. 拖随机度让每个顶点偏离理想椭圆。0 时是标准椭圆，数值越大越凹凸不平。
3. 拖平滑度改变曲线插值方式。低数值保留棱角，高数值把轮廓拉成一道连续的弧线。
4. 输入任意种子文本。同一种子永远重建同一个 blob，调单项参数时轮廓保持稳定。
5. 选输出格式，调宽高与颜色后复制代码。SVG path 由闭合 Catmull-Rom 曲线转三次贝塞尔生成。

常见用途

• 首屏背景 —— 标题后面垫一个 blob，不用图片素材也有层次。
• 插画点缀 —— 把 SVG path 放进图解与空状态页。
• 头像与卡片裁形 —— border-radius 版本不加标记就把普通 div 变成异形。
• Logo 与徽标草图 —— 快速试轮廓，定稿再导矢量文件。

为何保证隐私

形状由页面内的种子随机数发生器计算。没有图库、没有上传、没有服务端请求：复制到的代码就是预览画出来的那一段。

常见问题

问：种子到底起什么作用？ 答：它喂给一个小型确定性随机函数。每个顶点的偏移、每个 border-radius 百分比都出自它，所以同一种子在任何机器、任何日子都给出同一个 blob。

问：为什么 SVG path 与 border-radius 版本长得不一样？ 答：它们是同一组参数的两种独立诠释：路径是自由轮廓，而 8 个 border-radius 百分比只能弯折矩形的四角。按你要装饰的元素选合适的那种。

问：怎么让 blob 动起来？ 答：产物是静态的。想要形变效果，可以用相近种子生成两三个 blob，再用 SMIL 或 JavaScript 在它们的 path 数据间插值，或者对 border-radius 数值做 CSS 过渡。

问：SVG 能放进设计工具吗？ 答：可以。片段是带 viewBox 的独立内联 SVG，直接粘进 Figma、Illustrator 或 HTML 文件，可任意缩放。