what it does
Pattern Generator 的功能。
Pattern Generator 以 inline SVG 建立平鋪幾何背景。選擇圖案 — 圓點、條紋、格線、人字紋等 — 再設定前景色與背景色、圖塊縮放與不透明度。
調整控制項時，預覽會即時更新。滿意後依工作流程匯出：CSS background 片段、獨立 SVG 圖塊，或 1600×900 PNG。
workflow
四步驟：選擇、自訂、匯出。
- 開啟 Pattern Generator，在選擇器中點選圖案圖塊。
- 調整前景色與背景色、縮放與不透明度，直到預覽符合品牌或版面。
- 點選 Copy CSS 取得可貼上的 background 屬性，或使用 Download SVG / Download PNG 下載素材檔。
- 將輸出放入頁面樣式表、Figma 檔案或簡報 — 無需帳號、無需上傳。
css
將 CSS 貼入頁面。
複製的 CSS 是含 inline SVG data URI 的單一 background 宣告。貼到要顯示圖案的元素的 class 規則或 inline 樣式：
範例：將複製的行加入 .hero { … } 或樣式表中的 utility class。SVG 無縫平鋪，適用全寬區塊、卡片與 hero 區，無需額外 markup。
圖案以 data URI 嵌入，無需另外託管圖檔。部署更簡單 — 貼上 CSS 即可完成。
figma
將 SVG 圖塊用作 Figma 填色。
下載 SVG 圖塊並拖入 Figma 檔案，或使用 Place image 匯入。選取 frame 或形狀，將填色類型設為 Image 並選擇匯入的 SVG。
將填色模式設為 Tile，幾何重複會與工具預覽一致。若需比預設圖塊更密或更疏的重複，可在 Figma 中調整縮放。
適合 mockup 與正式 CSS 使用同一圖案 — 從 Pattern Generator 匯出一次，Figma 用 SVG、正式頁面用 CSS。
png
簡報與 OG 圖用的 PNG。
Download PNG 會以目前色彩與縮放設定匯出 1600×900 點陣圖。可用作 Keynote、Google Slides 或 PowerPoint 簡報背景，或需要平面素材而非 live CSS 的社群預覽圖。
PNG 也適用不支援 SVG 填色或 data URI 背景的工具 — 郵件範本、PDF 匯出與縮圖產生器常需單一圖檔。
privacy
僅在瀏覽器本機執行。
Pattern Generator 完全在瀏覽器中執行。色彩、縮放與匯出皆在您的裝置上計算 — 不會上傳至 Tiny Design Shop 或第三方伺服器。關閉分頁後工作階段即結束。