SVG图案生成器
生成可重复平铺的SVG图案。 自定义图案类型、颜色和大小，然后导出代码。
#6366f1
#ffffff
预览
SVG代码
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="custom-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<rect width="40" height="40" fill="#ffffff" />
<circle cx="20" cy="20" r="7" fill="#6366f1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#custom-pattern)" />
</svg>分享此工具
📖
使用方法
Step 1
选择图案
选择图案类别：几何、传统、现代等
→
Step 2
自定义
调整颜色、大小、间距、旋转等
→
Step 3
复制SVG
复制SVG代码或下载为图片
✨
功能特点
实时预览
调整参数时实时预览图案效果
丰富模板
多种模板：几何图形、圆点、线条、传统图案等
无缝平铺
生成的图案无缝平铺，看不到接缝
❓
FAQ
使用SVG <pattern>元素创建的可重复矢量图案。可用作背景或填充。
🔗相关工具
🎨
设计工具颜色代码转换器
在 HEX、RGB 和 HSL 颜色代码之间转换。 使用取色器和实时预览直观选择颜色。
🎨
设计工具取色器
使用色轮和滑块直观选择颜色。 获取并复制 HEX、RGB 和 HSL 格式的颜色代码。
🎨
设计工具图片颜色提取器
自动检测图片中的主色调并生成色板。 还可以点击图片任意位置提取单个颜色。
🎯
设计工具图片平均色提取器
计算整张图片或选定区域的平均颜色。 适用于配色方案选择或缩略图背景色。
🌈
设计工具CSS 渐变生成器
通过拖拽控制可视化创建 CSS 渐变。 支持线性、径向和锥形渐变类型，带预设。
🔲
设计工具CSS 阴影生成器
通过滑块可视化创建 CSS box-shadow。 支持多重阴影和内阴影。