SVG Blob 生成器:在线创建有机 SVG 形状
SVG Blob 生成器通过将围绕圆周排列的 N 个噪声点连接成闭合的 Catmull-Rom 样条,根据种子创建有机形状。设置种子、点数、随机度和填充后即可生成 Blob。复制 SVG、等效的 CSS clip-path 多边形或 border-radius 近似值;还可以切换两个种子之间的动画变形。
SVG Blob 生成器可根据种子创建有机 SVG 形状,为开发者提供快速生成和复制 Blob 值的方法。它通过围绕圆周排列的 N 个噪声点构建闭合的 Catmull-Rom 样条来生成每个形状。您可以设置种子、点数、随机度和填充,然后生成形状,无需手动构思数值。
生成的 Blob 提供三种形式:SVG、等效的 CSS clip-path 多边形和 border-radius 近似值。SVG 使用基于样条的形状,其他结果则提供生成 Blob 的 CSS 友好表示。您还可以切换两个种子之间的动画变形,观察形状变化。多种格式让您可以选择适合用途的结果。
SVG 和 CSS 在网页项目中提供了不同的形状表示方式。SVG 提供矢量标记,而 CSS clip-path 和 border-radius 数值可直接复制用于样式。将生成的 Blob 转换为所需格式,可以更方便地在代码、测试固件或种子数据中使用该形状。该工具还支持一次批量生成多个值,适合需要多个值的场景。
生成器完全在浏览器中运行。输入在您的设备上处理,不会上传、存储或发送到服务器;页面加载完成后也支持离线使用。因此您可以放心生成和复制 Blob 值,而无需将数据发送到其他地方。
该工具面向需要在网页项目、测试或示例数据中使用有机形状的各经验水平的开发者和运维工程师。设计师和其他构建者也可以用它创建多样化的 Blob 值,并复制适合其工作的表示形式。
步骤 1:设置可用选项,包括种子、点数、随机度和填充。这些设置决定了生成的 Blob 形状。
步骤 2:生成 Blob,根据种子和配置的点创建有机形状。
步骤 3:查看可用的结果格式:SVG、CSS clip-path 多边形和 border-radius 近似值。
步骤 4:复制项目所需的值,或切换两个种子之间的动画变形以预览形状变化。
使用场景:为测试、测试固件或种子数据创建可直接使用的 SVG Blob 值,无需手动编写形状数据。
使用场景:在项目或测试集需要多个形状时,一次批量生成多个 Blob 值。
使用场景:使用随机度生成多样化的 Blob 形状,而不必手动输入猜测数值。
使用场景:需要用于设计或网页的可缩放矢量形状时,复制 SVG Blob。
使用场景:需要生成的形状的 CSS 版本时,使用 CSS clip-path 多边形输出。
使用场景:当这种格式更符合形状样式需求时,复制 border-radius 近似值。