ตัวสร้าง SVG Blob: สร้างรูปทรง SVG ออร์แกนิกออนไลน์
ตัวสร้าง SVG Blob นี้สร้างรูปทรงออร์แกนิกจาก seed โดยเชื่อมจุดรบกวน N จุดที่เรียงรอบวงกลมด้วยเส้นโค้ง Catmull-Rom แบบปิด ตั้งค่า seed จำนวนจุด ความสุ่ม และสีพื้น แล้วสร้าง blob คัดลอก SVG, โพลีกอน CSS clip-path ที่เทียบเท่า หรือค่าประมาณ border-radius คุณยังสามารถสลับการแสดงแอนิเมชัน morph ระหว่างสอง seed ได้
ตัวสร้าง SVG Blob สร้างรูปทรง SVG ออร์แกนิกจาก seed ช่วยให้นักพัฒนาสร้างและคัดลอกค่า blob ได้อย่างรวดเร็ว มันสร้างรูปทรงแต่ละแบบเป็นเส้นโค้ง Catmull-Rom แบบปิดผ่านจุดรบกวน N จุดที่เรียงบนวงกลม คุณสามารถตั้งค่า seed จำนวนจุด ความสุ่ม และสีพื้น แล้วสร้างรูปทรงโดยไม่ต้องคิดค่าต่าง ๆ ขึ้นมาเอง
blob ที่สร้างขึ้นมีสามรูปแบบ: SVG, โพลีกอน CSS clip-path ที่เทียบเท่า และค่าประมาณ border-radius โดย SVG ใช้รูปทรงแบบเส้นโค้ง ส่วนผลลัพธ์อื่น ๆ เป็นตัวแทนของ blob ที่สร้างในรูปแบบที่เหมาะกับ CSS คุณยังสามารถสลับการแสดงแอนิเมชัน morph ระหว่างสอง seed เพื่อดูรูปทรงที่เปลี่ยนแปลง รูปแบบที่มีให้เลือกช่วยให้คุณเลือกผลลัพธ์ที่ตรงกับการใช้งานที่ต้องการ
SVG และ CSS มีวิธีแสดงรูปทรงในโปรเจกต์เว็บที่แตกต่างกัน SVG ให้มาร์กอัปเวกเตอร์ ส่วนค่า CSS clip-path และ border-radius สามารถคัดลอกไปใช้จัดสไตล์ได้ การแปลง blob ที่สร้างเป็นรูปแบบที่คุณต้องการจะช่วยให้ใช้รูปทรงในโค้ด ฟิกซ์เจอร์ทดสอบ หรือข้อมูล seed ได้ง่ายขึ้น เครื่องมือยังรองรับการสร้างหลายค่าในครั้งเดียว ซึ่งมีประโยชน์เมื่อต้องการหลายค่า
ตัวสร้างทำงานในเบราว์เซอร์ของคุณทั้งหมด อินพุตจะถูกประมวลผลบนอุปกรณ์ของคุณและไม่มีการอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ หลังจากโหลดหน้าเว็บแล้วก็ใช้งานออฟไลน์ได้เช่นกัน จึงมีประโยชน์เมื่อคุณต้องการสร้างและคัดลอกค่า blob โดยไม่ส่งข้อมูลไปที่อื่น
เครื่องมือนี้ออกแบบมาสำหรับนักพัฒนาและวิศวกร DevOps ทุกระดับประสบการณ์ที่ต้องการรูปทรงออร์แกนิกสำหรับโปรเจกต์เว็บ การทดสอบ หรือข้อมูลตัวอย่าง นักออกแบบและผู้สร้างคนอื่น ๆ ก็สามารถใช้สร้างค่า blob ที่หลากหลายและคัดลอกตัวแทนที่เหมาะกับงานของตนได้เช่นกัน
ขั้นตอนที่ 1: ตั้งค่าตัวเลือกที่มี รวมถึง seed จำนวนจุด ความสุ่ม และสีพื้น การตั้งค่าเหล่านี้จะกำหนดรูปร่างของ blob ที่สร้างขึ้น
ขั้นตอนที่ 2: สร้าง blob เพื่อสร้างรูปทรงออร์แกนิกจาก seed และจุดที่ตั้งค่าไว้
ขั้นตอนที่ 3: ตรวจสอบรูปแบบผลลัพธ์ที่มี: SVG, โพลีกอน CSS clip-path และค่าประมาณ border-radius
ขั้นตอนที่ 4: คัดลอกค่าที่ต้องการสำหรับโปรเจกต์ของคุณ หรือสลับการแสดงแอนิเมชัน morph ระหว่างสอง seed เพื่อดูตัวอย่างรูปทรงที่เปลี่ยนแปลง
กรณีการใช้งาน: สร้างค่า SVG blob พร้อมใช้สำหรับการทดสอบ ฟิกซ์เจอร์ หรือข้อมูล seed แทนการเขียนข้อมูลรูปทรงด้วยมือ
กรณีการใช้งาน: สร้างค่า blob หลายค่าในครั้งเดียวเมื่อต้องการรูปทรงหลายแบบสำหรับโปรเจกต์หรือชุดทดสอบ
กรณีการใช้งาน: ใช้ความสุ่มเพื่อสร้างรูปทรง blob ที่หลากหลาย แทนการเดาค่าด้วยการพิมพ์เอง
กรณีการใช้งาน: คัดลอก SVG blob เมื่อต้องการรูปทรงเวกเตอร์ที่ปรับขนาดได้สำหรับงานออกแบบหรือหน้าเว็บ
กรณีการใช้งาน: ใช้เอาต์พุตโพลีกอน CSS clip-path เมื่อต้องการรูปทรงที่สร้างในรูปแบบ CSS
กรณีการใช้งาน: คัดลอกค่าประมาณ border-radius เมื่อรูปแบบนั้นเหมาะกับการจัดสไตล์รูปทรงที่คุณต้องการมากกว่า