设计与配色

生成SVG图案

生成SVG图案 — 指定尺寸或颜色,查看代码或结果. 工具输入在您的设备上处理。 无需账号.

无需账号

正在加载工具…

使用方法

  1. 1输入数值并选择选项。
  2. 2运行工具并查看结果。
  3. 3复制结果,或更改输入进行比较。

使用提示

请检查输入范围和单位。结果取决于您的输入和浏览器。

广告可能处理连接数据,个性化遵循您的隐私选择。 隐私说明(英语)

实际输入与输出示例

以下结果由此工具的实际引擎使用示例值计算,不使用个人输入或已保存工作。可在工具中载入示例查看相同输入。

示例输入

字段值
模式
圆点
颜色
#0F766E
背景颜色
#FFFFFF
图案间距 (px)
24
线宽或点半径 (px)
2

示例结果

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><defs><pattern id="p" width="24" height="24" patternUnits="userSpaceOnUse"><rect width="24" height="24" fill="#FFFFFF"/><circle cx="12" cy="12" r="2" fill="#0F766E"/></pattern></defs><rect width="400" height="400" fill="url(#p)"/></svg>
输入条件

以下为实际输入验证范围,并不保证所有允许值都符合现实或适用于您的情况。

  • 模式: 可选值: 圆点 / 条纹 / 网格
  • 图案间距 (px): 允许范围: 4 ≤ x ≤ 200
  • 线宽或点半径 (px): 允许范围: 0.1 ≤ x ≤ 20

相关工具

全部工具