ทำอะไร
Pattern Generator ทำอะไร
Pattern Generator สร้างพื้นหลังเรขาคณิตแบบ tile จาก inline SVG เลือกลวดลาย — จุด เส้น กริด ลูกศร chevron และอื่นๆ — จากนั้นตั้งค่าสี foreground และ background ขนาด tile และความโปร่งใส
ตัวอย่างอัปเดตแบบ real-time ขณะที่คุณปรับตัวควบคุม เมื่อพอใจกับลักษณะที่ได้แล้ว ส่งออกในรูปแบบที่ workflow ของคุณต้องการ: snippet CSS background ไทล์ SVG แยก หรือ PNG 1600×900
workflow
เลือก ปรับแต่ง และส่งออกใน 4 ขั้นตอน
- เปิด Pattern Generator แล้วคลิกไทล์ลวดลายในตัวเลือก
- ปรับสี foreground และ background ขนาด และความโปร่งใสจนกว่าตัวอย่างจะตรงกับแบรนด์หรือเลย์เอาต์ของคุณ
- คลิก Copy CSS เพื่อรับ property background ที่พร้อมวาง หรือใช้ Download SVG / Download PNG สำหรับไฟล์ asset
- นำผลลัพธ์ไปใส่ใน stylesheet ของหน้า ไฟล์ Figma หรือสไลด์ deck — ไม่ต้องมีบัญชีและไม่ต้องอัปโหลด
css
วาง CSS ลงในหน้า
CSS ที่คัดลอกมาเป็น declaration background เดียวพร้อม inline SVG data URI วางลงใน class rule หรือ inline style บน element ที่ควรแสดงลวดลาย:
Example: เพิ่มบรรทัดที่คัดลอกไปยัง .hero { … } หรือ utility class ใน stylesheet ของคุณ SVG จะ tile อย่าง seamless จึงใช้ได้กับ section แบบเต็มความกว้าง card และ hero block โดยไม่ต้องมี markup เพิ่ม
เนื่องจากลวดลายฝังเป็น data URI จึงไม่มีไฟล์รูปภาพแยกที่ต้องโฮสต์ ทำให้การ deploy เรียบง่าย — วาง CSS ครั้งเดียวแล้วเสร็จ
figma
ใช้ไทล์ SVG เป็น Figma fill
ดาวน์โหลดไทล์ SVG แล้วลากเข้าไฟล์ Figma ของคุณ หรือใช้ Place image เพื่อนำเข้า เลือก frame หรือ shape จากนั้นตั้งค่า fill type เป็น Image แล้วเลือก SVG ที่นำเข้า
ตั้งค่า fill mode เป็น Tile เพื่อให้การ repeat เรขาคณิตตรงกับตัวอย่างในเครื่องมือ ปรับ scale ใน Figma หากต้องการ repeat ที่แน่นหรือหลวมกว่าขนาด tile เริ่มต้น
วิธีนี้มีประโยชน์เมื่อคุณต้องการลวดลายเดียวกันใน mockup และ CSS บนหน้า production — ส่งออกครั้งเดียวจาก Pattern Generator ใช้ SVG ใน Figma และ CSS บนหน้า live
png
PNG สำหรับสไลด์และ OG images
Download PNG ส่งออก raster 1600×900 ของลวดลายปัจจุบันพร้อมการตั้งค่าสีและขนาดของคุณ ใช้เป็นพื้นหลังสไลด์ใน Keynote, Google Slides หรือ PowerPoint หรือเป็น social preview image เมื่อต้องการ flat asset แทน live CSS
PNG ยังสะดวกสำหรับเครื่องมือที่ไม่รองรับ SVG fills หรือ data-URI backgrounds — email templates, PDF exports และ thumbnail generators มักต้องการไฟล์รูปภาพเดียว
privacy
ทำงานในเบราว์เซอร์เท่านั้น
Pattern Generator ทำงานทั้งหมดในเบราว์เซอร์ของคุณ สี ขนาด และการส่งออกคำนวณบนอุปกรณ์ของคุณ — ไม่มีการอัปโหลดไปยัง Tiny Design Shop หรือเซิร์ฟเวอร์ของบุคคลที่สาม ปิดแท็บแล้ว session ของคุณจะหายไป