不规则形状生成器

在线 Blob 不规则形状生成器,调节复杂度、随机性、颜色,生成流体状有机图形 SVG,适合头像背景、装饰图形和插画,可随机和导出。


预览


SVG Path 代码


CSS border-radius 代码

工具功能

不规则形状生成器可以随机生成平滑的不规则Blob形状,同时输出SVG路径代码和CSS border-radius代码,可用于网页设计、装饰图形、按钮背景等场景。

使用方法

生成原理

1. 在圆形基础上,根据设置的点数,在圆周每个角度位置随机偏移得到控制点,偏移距离由混乱度决定;

2. 使用Catmull-Rom样条曲线对控制点进行平滑处理,得到连续的平滑路径;

3. 将路径转换为SVG path格式,同时将控制点坐标转换为百分比格式得到CSS border-radius值;

border-radius语法:border-radius: 左上x 左上y / 右上x 右上y / ... 左下x 左下y;,每个控制点按顺时针方向排列。

注意事项

什么是混乱度?

混乱度控制形状偏离正圆形的程度。混乱度越低,形状越接近圆形;混乱度越高,形状越不规则、越扭曲。

生成的CSS border-radius可以直接用在项目中吗?

可以,现代浏览器都支持border-radius的多值语法,可以直接复制生成的代码使用,能实现不规则形状的圆角容器效果。

控制点数量怎么选择?

控制点数量决定形状的复杂度,3个点会生成近似三角形的不规则形状,6-8个点是比较自然的Blob形状,点数越多形状越复杂,最大支持12个点。

生成的SVG可以商用吗?

本工具生成的形状无版权限制,可免费用于个人和商业项目。