พื้นหลังและแพตเทิร์น SVG ฟรี | SVG Backgrounds

 (svgbackgrounds.com)
3 คะแนน โดย GN⁺ 2026-03-20 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • มี พื้นหลังและแพตเทิร์น SVG แบบน้ำหนักเบา ให้เลือก 48 แบบ โดยผู้ใช้สามารถนำไปใช้กับโปรเจ็กต์เว็บได้เพียงแค่คัดลอกและวาง
  • แต่ละดีไซน์สามารถปรับ สี ขนาด และโหมดการผสมสี ได้อย่างอิสระ และบางแบบรองรับ เอฟเฟกต์แอนิเมชัน เช่น การหมุนและการเลื่อน
  • กราฟิกทั้งหมดเป็น ดีไซน์ต้นฉบับของ SVGBackgrounds.com และสามารถใช้งานได้ทั้งในโปรเจ็กต์ส่วนตัวและเชิงพาณิชย์
  • อย่างไรก็ตาม ห้ามรวมไว้ในผลิตภัณฑ์ที่แข่งขันกัน และต้องระบุที่มา (Attribution)
  • เป็นทรัพยากรฟรีที่ช่วยให้นักออกแบบเว็บและนักพัฒนาสามารถ สร้างพื้นหลังให้เข้ากับแบรนด์ได้อย่างง่ายดาย

ภาพรวมของพื้นหลังและแพตเทิร์น SVG ฟรี

  • SVGBackgrounds.com ให้บริการ ชุดพื้นหลังและแพตเทิร์น SVG ที่ใช้งานได้ฟรี
    • ผู้ใช้สามารถปรับสี การผสมสี ขนาด และอื่น ๆ ภายในเว็บไซต์เพื่อสร้างพื้นหลังแบบกำหนดเองได้
    • บางดีไซน์มีฟังก์ชันปรับแต่งภาพ เช่น การย่อ การหมุน และการเลื่อน
  • พื้นหลังแต่ละแบบเป็น ดีไซน์เฉพาะของ SVGBackgrounds.com ที่สามารถนำไปใช้กับเว็บไซต์หรืออินเทอร์เฟซแอปได้ทันที
  • กราฟิกที่ให้มาสามารถดาวน์โหลดได้ในรูปแบบ โค้ด CSS แบบอินไลน์, SVG และ PNG

วิธีใช้งาน

  • ผู้ใช้สามารถดูวิธีนำไปใช้ได้ผ่าน หน้าเดโมที่อธิบายตำแหน่งการแทรกโค้ด CSS
  • พื้นหลังสามารถรวมเข้ากับงานได้ง่ายด้วยวิธี คัดลอกและวาง (Copy and Paste)
  • เว็บไซต์มีตัวเลือกการปรับแต่งหลากหลาย เช่น ชุดสี สเกล และโหมดการผสมสี

ไลเซนส์และเงื่อนไขการใช้งาน

  • เมื่อใช้งานกราฟิก ผู้ใช้ต้องยอมรับ ข้อตกลงไลเซนส์ของ SVGBackgrounds.com
    • ใช้ได้ทั้งในโปรเจ็กต์ส่วนตัวและเชิงพาณิชย์
    • ห้ามนำไปรวมในผลิตภัณฑ์ที่แข่งขันกันหรือนำไปขายต่อ
    • หากใช้งานฟรี ต้องระบุที่มา (Attribution)
  • ผู้สมัครสมาชิกแบบชำระเงินจะได้รับสิทธิ์ ใช้งานได้ไม่จำกัดและได้รับการยกเว้นการระบุที่มา

ผู้สร้างและชุมชน

  • เว็บไซต์นี้ดูแลโดย Matt และมีการเผยแพร่ทรัพยากรฟรีและแบบเสียเงินใหม่ ๆ ทุกเดือน
    • ผู้ใช้สามารถสมัครรับข่าวสารทางอีเมลเพื่อรับการแจ้งเตือนเกี่ยวกับพื้นหลังและอัปเดตล่าสุด
  • ผู้สร้างแนะนำวิธีให้เครดิตหลายรูปแบบ เช่น ลิงก์ HTML การแชร์บนโซเชียล และการสนับสนุน (Buy me a coffee)

ทรัพยากรและเครื่องมือเพิ่มเติม

  • นอกจากพื้นหลังแล้ว SVGBackgrounds.com ยังมีองค์ประกอบกราฟิกอื่น ๆ เช่น ไอคอน SVG ภาพประกอบ ปุ่ม เคอร์เซอร์ และตัวแบ่งรูปทรง (Shape Divider)
  • นักพัฒนาสามารถแปลงหรือสร้าง SVG ได้เองผ่านเครื่องมืออย่าง ตัวแปลง SVG to CSS และ Shape Divider Generator
  • มีการเผยแพร่ ชุดดีไซน์ใหม่และอัปเดตผลิตภัณฑ์ อย่างต่อเนื่องผ่านหน้ารุ่นล่าสุดและบล็อก

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-03-20
ความคิดเห็นจาก Hacker News

  • พื้นหลังพวกนี้สวยมาก แต่อยากให้มี <textarea> ที่แสดง CSS เพิ่มมาด้วยแทนปุ่ม “คลิกเพื่อคัดลอก”
    เพราะบางเบราว์เซอร์หรือผู้ใช้จะบล็อกการเข้าถึงคลิปบอร์ดด้วยเหตุผลด้านความปลอดภัย ทำให้ไม่มีทางเลือกอื่นเมื่อฟังก์ชันคัดลอกใช้ไม่ได้

    • เป็นข้อสังเกตที่ดี เมื่อก่อนเคยทำแบบนั้นมาก่อน และน่าจะไม่ยากที่จะกลับไปใช้วิธีเดิม หรือเพิ่ม ปุ่มแสดงโค้ด เข้าไป

  • ชอบลายหลังคาสีส้มเป็นพิเศษ แต่บน Firefox บางส่วนแสดงผลไม่ถูกต้อง — ลายวนสีฟ้าและสีเขียวเรนเดอร์ออกมาเป็นแค่สี่เหลี่ยมหนึ่งอันกับหกเหลี่ยมหนึ่งอันตามลำดับ
    แล้วก็สงสัยว่าควรใช้พื้นหลังแบบนี้อย่างไร โดยไม่ให้รบกวนเนื้อหา เพราะแพตเทิร์นที่ละเอียดมักทำให้ดูรกตาได้ง่าย

    • โดยทั่วไปจะวางพื้นหลังไว้ทั้งหน้าเอกสาร แล้วซ้อน โอเวอร์เลย์ที่ปรับความทึบได้ เพื่อแสดงเนื้อหาหลักด้านบน วิธีนี้เข้ากับหน้าจอ PC แบบเต็มจอได้ดี แต่บนมือถือพื้นที่น้อย เลยแสดงพื้นหลังได้ไม่เต็มที่
    • ลองเช็กใน Firefox แล้วพบว่าใช้งานได้ แต่ต้องขยับสไลเดอร์ด้านบนก่อนถึงจะเห็นเอฟเฟกต์ น่าจะดีกว่าถ้ากลับทิศทางของเอฟเฟกต์ เลยจะลองคิดดูอีกที
    • ปัญหา “สี่เหลี่ยมสีน้ำเงินกับหกเหลี่ยมสีเขียว” จะแก้ได้ถ้าขยับสไลเดอร์

  • ชอบอินเทอร์เฟซสลับพื้นหลังกับ แผงปรับพารามิเตอร์ มาก เคยทดลองทำแพตเทิร์นเชิงกระบวนการด้วย SVG/canvas/webgl มาก่อน พอเห็นอันนี้แล้วก็อยากกลับไปแพ็กเกจวิธีแสดงผลของตัวเองใหม่อีกครั้ง

    • ขอบคุณมาก ออกแบบ UI สำหรับปรับแต่งกราฟิกมาหลายรอบ และเวอร์ชันนี้ก็ขัดเกลามาเป็นพิเศษ แม้จะมีข้อจำกัดจากการพยายามแสดงพื้นหลังให้กว้างที่สุด แต่ก็ทำให้เกิด ทางเลือกเชิงสร้างสรรค์ ได้ ผลลัพธ์ที่ออกมาค่อนข้างน่าพอใจมาก

  • การแจ้งเตือนว่า “มีสิทธิ์เข้าถึงพื้นหลัง” กินพื้นที่หน้าจอมือถือไป 1/3 และไม่มีทางปิดได้ อยากรู้ว่าทำไปเพื่ออะไร

    • มันแค่แสดงว่า “คุณมีสิทธิ์เข้าถึงแล้ว ขอให้สนุก!” แต่พอลองหาข้อมูลดูแล้ว การเข้าถึงแบบนี้ดูจะมีมูลค่าราวปีละ $120 เลยทีเดียว
    • เป็นข้อสังเกตที่ดี โครงสร้างตอนนี้คือเมื่อกด thumbnail ปุ่มพรีวิวจะเปลี่ยนเป็น UI สำหรับปรับพื้นหลัง เลยคิดว่าจะกลับไปออกแบบส่วนนี้ใหม่

  • รู้สึกแปลกดีที่พอเอาเมาส์ไปวาง ส่วนที่อยากดูจริง ๆ กลับ เบลอหรือถูกบัง

    • ที่ทำไปในทางนั้นเพราะคลิกครั้งเดียวก็สามารถดูแบบเต็มได้อยู่แล้ว และในสถานะ hover ก็ไม่ได้มีตัวอย่างเพิ่มเติมให้แสดงมากนัก จุดประสงค์หลักของ hover คือเพื่อให้เห็นชัดว่า สามารถโต้ตอบได้

  • ไม่มีอันไหนเลียนแบบเอฟเฟกต์ <blink /> เลย ขอเงินคืน (มุกขำ ๆ)

  • ถ้าเปิด ปลั๊กอิน Dark Reader ไว้ พรีวิวจะไม่ทำงาน

  • ชอบแพตเทิร์นสามเหลี่ยมเป็นพิเศษ อยากรู้ว่าได้แรงบันดาลใจจาก Rule 30 หรือเปล่า

    • เพิ่งเคยได้ยิน Rule 30 เป็นครั้งแรก ดีที่ลิงก์ไป Wikipedia แนวคิดนี้น่าสนใจมากและเป็น ไอเดียที่สร้างแรงบันดาลใจ ขอบคุณที่แชร์

  • ประมาณปีก่อนตอนทำพอร์ตโฟลิโอใหม่ เจอเว็บนี้พอดี เลยเอาพื้นหลังอันหนึ่งไปใช้ในส่วนเฮดเดอร์ ขอบคุณมากจริง ๆ

    • ดีใจที่ได้ใช้งานจริง ถ้ามันช่วยได้ก็ดีมากเลย

  • พื้นหลังสวยจริง ๆ อยากเอาไปใช้กับ เกม Solitaire ของฉัน
    แต่บนมือถือ ถ้าพรีวิวแล้วเลื่อนหน้าจอ ภาพจะหายไปและต้องรีเฟรชถึงจะกลับมาเห็นใหม่ อีกอย่างคืออยากให้แต่ละแพตเทิร์นมีชื่อด้วย

    • แปลกดีนะ ถ้าส่งข้อมูล อุปกรณ์หรือเบราว์เซอร์ผ่านฟอร์มติดต่อ มาให้ จะขอบคุณมาก อนึ่ง แต่ละพื้นหลังมีชื่ออยู่แล้ว เพียงแต่บนมือถือซ่อนไว้เพราะพื้นที่หน้าจอจำกัด