เครื่องมือนี้ประกอบลายขึ้นจากโค้ด SVG ล้วนๆ ผลลัพธ์จึงคมชัดไม่ว่าจะซูมแค่ไหนหรือใช้บนหน้าจอความละเอียดใด และมักมีขนาดเพียงไม่กี่ร้อยไบต์ เบากว่าไฟล์ PNG มาก คัดลอกโค้ด CSS เพื่อวาง background-image แบบวนซ้ำลงในสไตล์ชีตได้เลย หรือดาวน์โหลดไฟล์ SVG แยกไว้ใช้เป็นอาร์ตเวิร์กก็ได้ ไม่มีการส่งข้อมูลที่สร้างไปที่ใดทั้งสิ้น เพราะลายทั้งหมดถูกวาดขึ้นในเครื่องของคุณเอง จึงยังใช้งานได้แม้ออฟไลน์หลังโหลดหน้าเว็บแล้ว
เครื่องมือสร้าง SVG Pattern ฟรี
ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องอัปโหลด ไม่ต้องสมัครสมาชิก
ลาย
สไตล์
สีพื้นหน้า
สีพื้นหลัง
SVG pattern generator คืออะไร
SVG pattern generator คือเครื่องมือสร้างลายพื้นหลังแบบไร้รอยต่อจากรูปทรงเรขาคณิต เช่น จุด เส้น ตาราง และซิกแซก โดยเลือกรูปทรง สี ขนาดของลาย และความหนาของเส้นเองได้ แล้วได้ไฟล์ SVG ขนาดเล็กที่คมชัดทุกความละเอียด พร้อมโค้ด CSS ที่นำไปวางใช้ได้ทันที ทุกอย่างสร้างขึ้นในเบราว์เซอร์ จึงไม่มีการอัปโหลดข้อมูลใดๆ
วิธีใช้งาน
- 1เลือกลาย. เลือกรูปทรงจากตัวอย่าง เช่น จุด วงแหวน สี่เหลี่ยม ตาราง แนวทแยง ลายตาข่าย เครื่องหมายบวก ซิกแซก และอื่นๆ
- 2ตั้งค่าสีและรูปทรง. เลือกสีพื้นหน้าและพื้นหลัง (หรือตั้งพื้นหลังให้โปร่งใส) จากนั้นปรับแถบเลื่อนขนาด ความหนา และความโปร่งแสง โดยพรีวิวจะอัปเดตให้เห็นทันที
- 3คัดลอกหรือดาวน์โหลด. สลับดูแท็บ CSS และ SVG คัดลอกโค้ด หรือดาวน์โหลดไฟล์ .svg แยกไว้ใช้งานได้ทุกที่
เหมาะกับใคร
- นักพัฒนาเว็บ ที่ต้องการเพิ่มลายพื้นหลังบางๆ น้ำหนักเบาให้ hero section การ์ด หรือบล็อกเนื้อหา โดยไม่ต้องแนบไฟล์ภาพเพิ่ม
- นักออกแบบ UI และแบรนด์ ที่ลองออกแบบลายไร้รอยต่อด้วยโทนสีของแบรนด์ แล้วส่งออกเป็นไฟล์ SVG ที่คมชัด
- คนทำอีเมลและสไลด์นำเสนอ ที่ต้องการลายขนาดเล็กที่ปูต่อกันได้และแสดงผลคมชัดบนทุกหน้าจอ
- นักเรียนและมือสมัครเล่น ที่อยากเข้าใจการทำงานของ SVG
<pattern>และการปูลายพื้นหลังใน CSS โดยลองปรับค่าแล้วดูโค้ดที่ได้ - ครีเอเตอร์ ที่ต้องการลายพื้นหลังตกแต่งด่วนๆ สำหรับภาพปก แบนเนอร์ หรือมอกอัพ
คำถามที่พบบ่อย
SVG pattern generator นี้ฟรีไหม
ฟรีครบทุกฟีเจอร์ ไม่ต้องสมัครสมาชิกและไม่มีข้อจำกัดการใช้งาน ทุกลายถูกสร้างในเบราว์เซอร์ ทำให้สร้างและคัดลอกได้ไม่จำกัดจำนวน แม้จะออฟไลน์หลังโหลดหน้าเว็บแล้วก็ยังใช้ได้
ลายที่ได้ไร้รอยต่อจริงหรือเปล่า
จริง แต่ละรูปทรงถูกวาดให้ขอบเชื่อมต่อกับลายข้างเคียงพอดี และลายทั้งหมดวนซ้ำบนตารางที่ตายตัว ทั้ง background-image แบบ CSS และเอลิเมนต์ <pattern> ของ SVG ปูเซลล์เดียวกันชนขอบกันสนิท ไม่มีรอยต่อให้เห็น
ควรใช้โค้ด CSS หรือไฟล์ SVG ดี
ใช้ CSS เมื่อจะวางพื้นหลังแบบวนซ้ำลงในสไตล์ชีตโดยตรง เหมาะกับเว็บไซต์และเร็วที่สุด ส่วนไฟล์ SVG ให้ดาวน์โหลดเมื่อต้องการไฟล์แยก เช่น ใช้เป็นภาพในโปรแกรมออกแบบ หรือฝังลงใน HTML โดยตรง
ทำไมควรใช้ลาย SVG แทน PNG
SVG เป็นภาพแบบเวกเตอร์ จึงคมชัดสมบูรณ์แบบไม่ว่าจะซูมแค่ไหนหรือความละเอียดหน้าจอเท่าใด และไม่แตกเป็นพิกเซล ลาย SVG แบบเรขาคณิตมักมีขนาดเพียงไม่กี่ร้อยไบต์ เล็กกว่าไฟล์ PNG ที่ให้ผลลัพธ์เดียวกันมาก และยังเปลี่ยนสีได้ตลอดโดยไม่ต้องส่งออกใหม่
ทำพื้นหลังให้โปร่งใสได้ไหม
ได้ ติ๊กเลือกตัวเลือก Transparent แล้วสีพื้นหลังจะหายไป เหลือเพียงรูปทรงด้านหน้าของลาย ทำให้นำลายไปวางทับสี ภาพ หรือไล่เฉดสีที่มีอยู่แล้วได้
งานออกแบบของฉันถูกอัปโหลดไปที่ไหนไหม
ไม่มีการอัปโหลด ลายทั้งหมดถูกสร้างขึ้นในเบราว์เซอร์ของคุณเองด้วยโค้ด SVG ล้วนๆ และไม่มีข้อมูลส่งไปยังเซิร์ฟเวอร์ใดๆ สีและการตั้งค่าจึงเป็นส่วนตัวอยู่บนเครื่องของคุณเท่านั้น