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。 支援多重陰影和內陰影。