Softonic

ตัวสร้างโกลบของ SVG

ขั้นตอน 1 / 2
ถัดไป

ตั้งแต่ปี ค.ศ. 2018 เป็นต้นมา รูปทรงแบบบล็อบได้แทนที่วงกลมสมบูรณ์ในงานออกแบบ โดยกลายเป็น “พื้นหลังที่มีขอบมนอย่างเป็นมิตร” ของอินเทอร์เฟซผู้ใช้สมัยใหม่ รูปทรงเหล่านี้ปรากฏขึ้นเบื้องหลังภาพฮีโร่ ทำหน้าที่เป็นหน้ากากแอวตาร์ หรือเป็นจุดสีสดบนหน้าเว็บหลัก โปรแกรมสร้างนี้จะสร้างรูปทรงบล็อบจากการเดินแบบสุ่มรอบวงกลม จากนั้นปรับรูปร่างของพอลิโกนให้เรียบเนียนด้วยเส้นโค้งเบียเซียร์แบบกำลังสอง เพื่อให้ได้รูปทรงที่ดูเป็นธรรมชาติและมีความไม่สม่ำเสมอเล็กน้อย ตามที่นักออกแบบต้องการ ผู้ใช้สามารถควบคุมจำนวนจุดควบคุม (ระดับความซับซ้อน) ระดับความหลากหลายของการเคลื่อนไหว (ระดับคอนทราสต์) และค่าเมล็ดสุ่ม จากนั้นคัดลอกไฟล์ SVG ที่สร้างขึ้น

วิธีการสร้างบล็อบ

  1. 1

    เลือกสีและความซับซ้อน

    ค่าความซับซ้อนกำหนดจำนวนจุดควบคุม (3–12) ยิ่งมีจุดมากเท่าไร ก็จะมีรอยนูนหรือส่วนที่ขรุขระมากขึ้นเท่านั้น

  2. 2

    ตั้งค่าคอนทราสต์

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

  3. 3

    เลือกเมล็ด

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

  4. 4

    คัดลอกไฟล์ SVG

    คุณจะได้ไฟล์ `<path>` เพียงไฟล์เดียวภายในกรอบขนาด 400×400 พิกเซล สามารถวางไฟล์นี้ไว้ที่ตำแหน่งใดก็ได้ที่ระบบรองรับรูปแบบ SVG

กายวิภาคของเส้นทางบล็อบ

เครื่องกำเนิดจะกระจายจุดจำนวน N จุดอย่างสม่ำเสมอรอบกรอบรูปสี่เหลี่ยมผืนผ้าขนาด 400 × 400 พิกเซล (จุดศูนย์กลางที่ (200, 200); รัศมีฐานเท่ากับ 130) จากนั้นปรับค่ารัศมีแต่ละจุดให้เปลี่ยนแปลงไป ±contrast และเชื่อมจุดทุกคู่เข้าด้วยเส้นโค้งเบียซีแบบกำลังสอง

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

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

แบบฟอร์มข้อมูลพารามิเตอร์สำรอง

ค่าตั้ง ช่วง ผล
ความซับซ้อน 3–12 จำนวนส่วนย่อย: ค่า 5–7 เป็นระดับที่เหมาะสมที่สุดสำหรับ UI
ค่าเปรียบเทียบ 0–100 แอมพลิจูดของการเดินแบบสุ่ม โดยช่วง 30–60 ถือว่าเหมาะสมและเป็นธรรมชาติ
#เมล็ด 1–9999 มีลักษณะแน่นอน; เมล็ดเดียวกันจะให้ผลลัพธ์เหมือนกันในการทดลองทุกครั้ง
สี รหัสสีแบบเฮกซาเดซิมอล เติมสีเพียงชั้นเดียว โดยไม่มีเส้นกราฟิก หากจำเป็นให้เพิ่ม fill-opacity ด้วยตนเอง

จุดที่ฟังก์ชัน “ blobs” ทำงานได้ดีที่สุด

  • การตกแต่งบริเวณด้านหลัง, วางไว้ด้านหลังหัวข้อ และในมุมว่างของส่วนเนื้อหาหลัก
  • หน้ากากแอวาตาร์, ใช้เส้นทางการประมวลผลตาม clip-path สำหรับกรอบภาพเหมือนธรรมชาติ
  • รายละเอียดประกอบภาพ, จุดสีของแบรนด์ที่อยู่ใต้ไอคอนหรือตัวเลข
  • มาสก์ภาพ, โดยใช้ CSS mask-image โปรแกรม Blob จะตัดภาพเข้าไปในรูปทรงที่ออกแบบมาอย่างเป็นธรรมชาติ

คำแนะนำ

  • ควรใช้เส้นกราฟิกที่ไม่มีเส้นประ (stroke-free) สำหรับพื้นหลัง เพราะหากมีเส้นประจะทำให้ดูคล้ายสติ๊กเกอร์ สำหรับการเปลี่ยนรูปร่างแบบแอนิเมชัน ให้สร้างโคลบสองตัวที่มีความซับซ้อนเท่ากันแต่มีค่าเซดต่างกัน จากนั้นใช้ไลบรารี เช่น flubber หรือ svg-morpheus เพื่อแอนิเมตแอตทริบิวต์ d ควรใช้รูปแบบ SVG แทนการใช้ <img src=blob.svg> เนื่องจากช่วยให้คุณสามารถเปลี่ยนสีพื้นผิวได้โดยใช้ตัวแปร CSS ในขณะที่โปรแกรมกำลังทำงาน
  • รักษาขนาดกรอบภาพ (viewbox) ไว้ แต่ต้องลบข้อมูล width="400" height="400" ออก หากคุณต้องการให้ภาพขยายไปยังคอนเทนเนอร์ใดก็ได้

คำถามที่พบบ่อย

เมล็ดจะกำหนดค่าเริ่มต้นของฟังก์ชัน srand() ใน PHP ก่อนการเคลื่อนที่แบบสุ่ม เมล็ดเดียวกัน จะทำให้ลำดับการเรียกใช้ฟังก์ชัน rand() เหมือนกัน ค่าการเลื่อนตำแหน่งจุดเท่ากัน และเส้นทางการเคลื่อนที่เหมือนกันทุกประการ

ใช่ แต่ก็ต่อเมื่อเส้นทางทั้งสองมีจำนวนคำสั่งและจำนวนจุดเท่ากันเท่านั้น ให้ความซับซ้อนของโครงสร้างเหมือนกัน และเพียงแค่เปลี่ยนค่า “seed” เพื่อให้ได้คู่ข้อมูลที่เหมาะสมสำหรับการประมาณค่า (interpolation) โดยใช้ไลบรารีสำหรับการสร้างเส้นโค้งเชิงต่อเนื่อง เช่น GSAP MorphSVG หรือ flubber สำหรับการเคลื่อนไหวจริง

แทนค่า fill="#hex" ในเส้นทางด้วย fill="url(#gradient-id)" และเพิ่มคำนิยามของ <linearGradient> หรือ <radialGradient> ไว้ภายในบล็อก <defs> การใช้คุณสมบัติเฉพาะตาม CSS ก็สามารถทำงานได้เช่นกัน หากคุณแทรกไฟล์ SVG เข้าไปในโค้ดแบบ inline

โปรแกรมนี้ทำงานได้อย่างสะอาด แต่ไม่ได้ลดขนาดข้อมูลลง หากคุณให้ความสำคัญกับขนาดของไบต์ ควรลองใช้งานร่วมกับ SVGO เพียงครั้งเดียว โดยทั่วไปสามารถลดจำนวนตัวอักษรได้ประมาณ 20–30%

ไม่ ไฟล์ SVG จะถูกสร้างขึ้นแบบเรียลไทม์จากพารามิเตอร์ในฟอร์ม URL โดยไม่มีการบันทึกข้อมูลใดๆ

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบความถูกต้องของ JSON

ตรวจสอบไวยากรณ์ JSON และตรวจจับเครื่องหมายจุลภาคต่อท้าย เครื่องหมายอัญประกาศที่ผิด คีย์ซ้ำ และโครงสร้างที่ผิดรูปแบบ พร้อมระบุตำแหน่งข้อผิดพลาดอย่างแม่นยำ

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องมือนี้มีให้บริการในภาษาอื่น