Blob Generator

Generate organic SVG blob shapes from a reproducible seed

形状
旋转
复杂度
不规则度

64 到 2048 px。

外观
描边宽度
Blob 预览
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480"><path d="M240 63.606C290.04 63.238 365.868 107.717 392.034 152.223C418.199 196.729 422.334 287.838 396.995 330.641C371.656 373.444 293.74 408.228 240 409.041C186.26 409.854 99.259 377.953 74.557 335.518C49.856 293.083 64.218 199.751 91.792 154.432C119.366 109.113 189.96 63.974 240 63.606Z" fill="#6366f1" stroke="none" stroke-width="0"/></svg>

什么是 Blob 生成器?

Blob 生成器可为落地页、头像、装饰、插画和区块背景生成平滑的有机 SVG 形状。每个 blob 都由种子生成,相同的种子和设置总能复现完全相同的形状。

使用方法
  1. 1.调整复杂度(点数)和不规则度,或点击“随机”获取新种子。
  2. 2.将宽度和高度设置在 64 到 2048 px 之间。
  3. 3.选择纯色或带角度的双色渐变填充,并可添加描边。
  4. 4.复制 SVG 或 React JSX 组件、下载 SVG,或以 1×、2×、3× 导出 PNG。
  5. 5.使用“重置”恢复默认 blob。
输出与选项

SVG 输出保留 viewBox,可清晰缩放。渐变填充使用由设置推导的 id,同一页面内联多个 blob 也不会冲突。JSX 输出是把 props 传给 svg 元素的组件。CSS border-radius 模式在普通方块上用 8 个值的 border-radius 生成更轻量的 blob,并提供可复制的 CSS。

限制与隐私

形状是围绕中心的平滑闭合曲线,不规则度越高,凹陷越深。相同种子下,CSS 模式的形状与 SVG 形状不同,且无法导出为 PNG。形状生成和 PNG 渲染都在你的浏览器中完成。

CodingTool 已正式上线于

Launched on StartupBaseCodingTool.dev - Free, Fast & Easy Developer Tools in One Place | Product HuntCodingTool - Featured on Startup FameFazier badgeListed on Turbo0Featured on Twelve ToolsFeatured on Findly.tools