ตัวสร้าง Blob SVG
SVG Blob Generator สร้างรูปทรง blob ออร์แกนิกแบบสุ่มจากเส้นโค้ง Bézier กำลังสามที่ลื่นไหล ปรับความซับซ้อน ความสุ่ม ขนาด สี และ gradient (ไม่บังคับ) ได้ แล้วส่งออกเป็นโค้ดหรือไฟล์ SVG
เกี่ยวกับเครื่องมือนี้
SVG Blob Generator สร้างรูปทรง blob ออร์แกนิกแบบสุ่มจากเส้นโค้ง Bézier กำลังสามที่ลื่นไหล ปรับความซับซ้อน ความสุ่ม ขนาด สี และ gradient (ไม่บังคับ) ได้ แล้วส่งออกเป็นโค้ดหรือไฟล์ SVG
วิธีใช้
- กำหนดความซับซ้อน (จำนวนจุด) และความสุ่ม
- เลือกขนาดและสี หรือเปิดใช้ gradient
- คลิก Regenerate จนกว่าจะได้รูปทรงที่ชอบ
- คัดลอกโค้ด SVG หรือดาวน์โหลดไฟล์ .svg
ข้อควรรู้
- blob แต่ละชิ้นเป็น path SVG เดียว สร้างจากจุดรอบวงกลมที่เชื่อมด้วยเส้นโค้ง Bézier กำลังสาม
- จำนวนจุดยิ่งมาก เส้นขอบยิ่งซับซ้อน ความสุ่มยิ่งมาก รูปทรงยิ่งไม่กลม
- SVG blob คมชัดทุกขนาดและมีขนาดไฟล์เพียงไม่กี่ร้อยไบต์
- blob นิยมใช้เป็นของตกแต่งพื้นหลัง กรอบรูปโปรไฟล์ และตัวคั่น section
- ใช้ SVG ได้ทั้งแบบ inline เป็น source ของ img หรือเป็นพื้นหลัง CSS
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ
คำถามที่พบบ่อย
สร้างรูปทรง blob อย่างไร?
ปรับความซับซ้อนและความสุ่มที่นี่แล้วคลิก Regenerate ทุกครั้งที่คลิกจะได้รูปทรงออร์แกนิกแบบสุ่มใหม่ที่ดาวน์โหลดเป็น SVG ได้
นำ blob ไปใช้เชิงพาณิชย์ได้ไหม?
ได้ รูปทรงถูกสร้างแบบสุ่มบนอุปกรณ์ของคุณ จึงนำไปใช้ในโปรเจกต์ใดก็ได้
ใช้ SVG blob เป็นพื้นหลังอย่างไร?
บันทึกไฟล์แล้วอ้างอิงด้วย background-image: url(blob.svg) หรือวาง SVG แบบ inline แล้วจัดตำแหน่งไว้ด้านหลังเนื้อหา
ทำแอนิเมชันให้ blob ได้ไหม?
ได้ คุณหมุนหรือย่อขยายด้วย CSS ได้ หรือ morph ระหว่างสอง path ที่มีจำนวนจุดเท่ากันโดยใช้ SMIL หรือ JavaScript