Softonic

SVG 生成器

步 1 / 2
下一步

团块形状于2018年前后取代了完美的圆形，成为现代用户界面中“友好的圆润背景”，它们常出现在角色插图背景、头像面具以及着陆页的彩色斑点区域。该生成器通过围绕圆周进行随机游走构建团块，再利用二次贝塞尔曲线对多边形进行平滑处理，最终形成设计师所追求的自然且略带波动感的形态。用户可自定义控制点数量（决定复杂度）、游走路径的随机程度（影响对比度）及随机种子值，随后直接复制 SVG 文件即可使用。

数据块的构建方式

  1. 1

    选择颜色与复杂度

    复杂度设置控制点数量（3–12）。点数越多，凸起越多。

  2. 2

    设置对比度

    对比度控制每个点偏离基准半径的程度：低对比度表示近乎圆形；高对比度则呈现明显分叶状。

  3. 3

    选择种子

    种子是用于锁定数据块形状的随机数。使用相同的种子可生成相同的数据块；更换种子则会生成新的数据块。

  4. 4

    复制 SVG

    您将在一个400×400的坐标系区域内获得一个`<path>`对象，可将其放置在 SVG 支持的任意位置。

模糊路径的解剖结构

该生成器将N个点均匀分布于一个400×400的正方形区域内（中心坐标为200,200；底边半径为130），并将每个半径值扰动±contrast，随后使用二次贝塞尔曲线连接每一对点。

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

midx, midy点是当前点与下一个点之间的中点，将每条曲线的末端置于该位置即可使多边形呈现有机形态。

参数速查表

设置 范围 效果
复杂度 3–12 分叶数量。5–7个为UI设计的最佳数量。
对比值 0–100 随机游走的振幅；30–60范围最为自然。
种子 1–9999 确定性；相同的种子在多次运行中会产生相同的结果。
颜色 十六进制代码 单色填充，无描边。如有需要，请手动添加 fill-opacity。

涡流效果最佳的应用场景

  • 背景装饰，位于标题后方以及重点内容区域的空白角落处。
  • 虚拟形象面具，将路径设置为clip-path以用于有机肖像框架。
  • 插图点缀，图标或数字下方的品牌色斑点。
  • 图像遮罩，使用CSS mask-image，可将照片裁剪为有机形状的镂空图案。

小贴士

  • 为背景保留无边框的圆形区域；添加边框会使它们看起来像贴纸。 对于动画变形效果，需生成两个具有相同复杂度但种子值不同的数据块，随后使用flubber或svg-morpheus等库对d属性进行动画处理。
  • 使用 SVG 而非<img src=blob.svg>进行内联，该选项支持在运行时通过CSS变量更改填充颜色。 保持视口尺寸，但若需使图块可缩放至任意容器，请移除显式标注的width="400" height="400"。

常见问题

该种子在随机游走开始前初始化PHP的srand()。相同的种子对应相同的rand()调用序列、相同的点偏移量以及完全一致的路径。

是的，但前提是两条路径的命令数量和点数必须相同。保持复杂度一致，仅改变种子点即可生成适合插值处理的配对点。实际动画效果可使用 GSAP MorphSVG或flubber等曲线 tween库实现。

将路径中的fill="#hex"替换为fill="url(#gradient-id)"，并在<defs>区块内添加<linearGradient>或<radialGradient>定义。若将 SVG 内联显示，CSS自定义属性同样适用。

该格式虽简洁但未进行字符压缩。若关注字节大小，建议运行一次 SVGO 工具；通常可去除20%-30%的字符。

不。该 SVG 会根据URL表单中的参数实时生成，且不会记录任何数据。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

证书解码器

粘贴一张 X.509 PEM 证书，并查看解码后的字段：主体、颁发者、序列号、签名算法、有效期及主体备用名称（SAN）。

HTML到文本转换器

从标记中剔除所有HTML标签及元素，生成适用于电子邮件客户端、数据分析及索引处理的纯文本格式。

IBAN 验证工具

在本地检查 IBAN 的注册国家长度、国内结构和 MOD 97-10 校验位。不上传数据，也不表示账户真实存在。

此工具还提供其他语言版本