工具功能
不规则形状生成器可以随机生成平滑的不规则Blob形状,同时输出SVG路径代码和CSS border-radius代码,可用于网页设计、装饰图形、按钮背景等场景。
使用方法
- 设置控制点数量:范围3-12,点数越多形状越复杂;
- 设置混乱度:范围0.1-1.0,数值越大形状越不规则,越偏离圆形;
- 设置填充颜色:点击颜色选择器选择喜欢的颜色;
- 设置画布尺寸:调整生成图形的大小,范围100-500像素;
- 点击「随机生成」按钮即可生成新的形状,生成后可复制SVG代码或CSS代码使用。
生成原理
1. 在圆形基础上,根据设置的点数,在圆周每个角度位置随机偏移得到控制点,偏移距离由混乱度决定;
2. 使用Catmull-Rom样条曲线对控制点进行平滑处理,得到连续的平滑路径;
3. 将路径转换为SVG path格式,同时将控制点坐标转换为百分比格式得到CSS border-radius值;
border-radius语法:border-radius: 左上x 左上y / 右上x 右上y / ... 左下x 左下y;,每个控制点按顺时针方向排列。
注意事项
- 生成的CSS border-radius代码可直接用于CSS样式,多数现代浏览器都支持多值border-radius;
- SVG代码可直接插入HTML,也可保存为.svg文件使用;
- 复制功能依赖浏览器剪贴板API,若无法复制可手动选中结果框中的代码复制。