SVG形状生成器
为设计生成美观的有机SVG形状。
SVG
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg"> <defs><linearGradient id="g" gradientTransform="rotate(45 0.5 0.5)"><stop offset="0%" stop-color="#6366f1"/><stop offset="100%" stop-color="#ec4899"/></linearGradient></defs> <path d="M 452.81,300.00 C 459.68,354.34 456.02,471.39 414.75,498.76 C 373.48,526.12 261.47,497.32 205.20,464.19 C 148.94,431.06 78.41,356.90 77.15,300.00 C 75.90,243.10 148.28,143.98 197.67,122.77 C 247.07,101.55 330.98,143.16 373.50,172.70 C 416.02,202.24 445.93,245.66 452.81,300.00 Z" fill="url(#g)"/> </svg>
生成有机的 SVG 团状（blob）形状
概述
团状形状（blob，柔和、不规则的有机形状）是给设计增添亲切、现代气息的流行方式，可用作背景、图片蒙版或装饰点缀。手绘平滑的团状很棘手，因此团状生成器把随机有机形状生成为可调节、可导出的 SVG。此工具在浏览器中生成团状，并给你整洁的 SVG 代码放进任意页面。
使用步骤
- 1
调整复杂度和随机度
设置团状的点数和不规则程度，直到形状看起来合适。
- 2
选颜色并重新生成
选一个填充色，反复生成新变体，直到找到你喜欢的。
- 3
复制 SVG
取用生成的 SVG 代码或将其导出，然后放进你的页面或设计。
工作原理
生成器围绕一个中心散布若干点，创建一条闭合路径，用平滑曲线连接它们，并随机化它们的距离，从而形成不规则却均衡的形状。你调整复杂度（点数）和随机度（有多不匀），选一个颜色，它便输出 SVG。因为是矢量，团状在任何尺寸下都清晰放大。一切都在浏览器本地运行。
什么时候用
在文字或插图后面加一个柔和的背景形状。把照片蒙版成有机轮廓而非矩形。为落地页制作亲切的装饰点缀。搭建现代、非几何的首屏背景。用品牌色制作搭配的团状形状。导出一个轻量矢量形状而非沉重图片。
常见问题
作为矢量，SVG 团状在任何尺寸下都保持完美清晰、体积极小，还能通过改一个值来改色。同一形状的位图更重，放大时会模糊。
注意事项
每个生成的团状都是随机的，所以找到喜欢的就保存其 SVG 代码——重新生成不会复现完全相同的形状。复杂度极高会让路径变大、更难流畅地做动画。