Blob Generator
Generate organic SVG blob shapes from a reproducible seed
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480"><path d="M240 63.606C290.04 63.238 365.868 107.717 392.034 152.223C418.199 196.729 422.334 287.838 396.995 330.641C371.656 373.444 293.74 408.228 240 409.041C186.26 409.854 99.259 377.953 74.557 335.518C49.856 293.083 64.218 199.751 91.792 154.432C119.366 109.113 189.96 63.974 240 63.606Z" fill="#6366f1" stroke="none" stroke-width="0"/></svg>
ตัวสร้างบล็อบคืออะไร
ตัวสร้างบล็อบสร้างรูปทรง SVG แบบออร์แกนิกที่โค้งมนสำหรับแลนดิงเพจ อวาตาร์ งานตกแต่ง ภาพประกอบ และพื้นหลังของส่วนต่าง ๆ ทุกบล็อบสร้างจากซีด ซีดและการตั้งค่าเดียวกันจึงได้รูปทรงเดิมทุกครั้ง
วิธีใช้
- 1.ปรับความซับซ้อน (จำนวนจุด) และความไม่สม่ำเสมอ หรือกดสุ่มเพื่อรับซีดใหม่
- 2.ตั้งความกว้างและความสูงระหว่าง 64 ถึง 2048 px
- 3.เลือกสีเติมแบบทึบหรือไล่สีสองสีพร้อมมุม และเส้นขอบหากต้องการ
- 4.คัดลอก SVG หรือคอมโพเนนต์ React JSX ดาวน์โหลด SVG หรือส่งออก PNG ที่ 1×, 2× หรือ 3×
- 5.ใช้รีเซ็ตเพื่อกลับไปที่บล็อบเริ่มต้น
ผลลัพธ์และตัวเลือก
ผลลัพธ์ SVG คง viewBox ไว้จึงย่อขยายได้คมชัด สีเติมแบบไล่สีใช้ id ที่คำนวณจากการตั้งค่า จึงวางบล็อบแบบอินไลน์หลายชิ้นในหน้าเดียวได้โดยไม่ชนกัน ผลลัพธ์ JSX เป็นคอมโพเนนต์ที่ส่ง props ไปยังองค์ประกอบ svg โหมด CSS border-radius สร้างบล็อบที่เบากว่าด้วย border-radius 8 ค่าบนกล่องธรรมดา พร้อม CSS ให้คัดลอก
ข้อจำกัดและความเป็นส่วนตัว
รูปทรงเป็นเส้นโค้งปิดที่ราบรื่นรอบจุดศูนย์กลาง ยิ่งความไม่สม่ำเสมอสูง รอยเว้าก็ยิ่งลึก รูปทรงในโหมด CSS ต่างจากรูปทรง SVG แม้ใช้ซีดเดียวกัน และส่งออกเป็น PNG ไม่ได้ การสร้างรูปทรงและเรนเดอร์ PNG ทำในเบราว์เซอร์ของคุณ
