工具箱图标
XTools
Blog
/
SVG 预览SVG 转 PNGSVG 转 JPGSVG 转 PDFPNG 转 SVGJPG 转 SVGSVG 优化器SVG 不规则图形生成

© 2026 XTools. 保留所有权利.

隐私政策联系我们

    SVG 不规则图形生成

    生成有机感的不规则形状并导出 SVG
    • 文件不会离开你的设备
    • 在浏览器本地运行
    • 免费、免注册、无水印

    按 R 或空格键生成新的形状。

    形状

    边缘偏离正圆的程度。

    在上方叠加更小的副本,透明度由淡到实。

    颜色

    画布

    px
    px

    动画

    导出

    SVG 文件:616 B · 480 × 480

    相关工具

    • SVG 预览
    • SVG 转 PNG
    • SVG 转 JPG
    • SVG 转 PDF
    • PNG 转 SVG
    • JPG 转 SVG
    • SVG 优化器

    如何使用SVG 不规则图形生成

    随机生成有机感的不规则形状(blob),导出为 SVG、PNG 或 React 组件。可以调整点数、起伏、层数、渐变填充和描边样式,还能加上变形动画。每个形状由一个种子数生成,全部在浏览器中完成。

    1. 1

      点「换一个」,或按 R 键、空格键,直到出现满意的形状,之前的形状会留在「最近生成」里。

    2. 2

      在「形状」里调整复杂度、起伏、大小和层数。

    3. 3

      在「颜色」里选一个「配色方案」,或设置纯色、渐变「填充」;只想要轮廓时把「样式」改成「描边」。

    4. 4

      设置画布的「宽度」和「高度」,需要时打开「背景色」,想让形状动起来就开启「变形动画」。

    5. 5

      点「下载 SVG」,或选择 1×、2×、4× 倍率后点 PNG;「复制 SVG」和「复制 React」会把代码复制到剪贴板。

    常见问题

    以后还能得到同一个形状吗?

    可以。形状由「种子」决定,同样的种子加同样的设置,生成的形状总是一样。记下这个数字,下次填回「种子」即可。

    背景是透明的吗?

    默认是透明的。只有需要填充画布时才打开「背景色」。

    导出的文件里动画还能播放吗?

    「变形动画」使用 SVG 自带的 animate 元素,在 SVG 和 React 导出中都能直接播放,不需要额外的 CSS 或 JavaScript。PNG 始终是静态画面。

    怎么在 React 项目里使用?

    「复制 React」会得到一个返回该 SVG 的组件,props 会传给 svg 元素,可以直接加 className 或 style。

    会上传任何内容吗?

    不会。形状的计算和导出全部在浏览器里完成。