ตัวสร้างรูปหยด SVG
- ไฟล์ไม่ออกจากอุปกรณ์ของคุณ
- ทำงานในเบราว์เซอร์
- ฟรี ไม่ต้องสมัคร ไม่มีลายน้ำ
Press R or Space for a new blob.
วิธีใช้ ตัวสร้างรูปหยด SVG
สร้างรูปทรงหยดออร์แกนิกแบบสุ่ม แล้วส่งออกเป็น SVG, PNG หรือคอมโพเนนต์ React ปรับจุด คอนทราสต์ เลเยอร์ การเติมไล่สี และสไตล์เส้นขอบ และเพิ่มแอนิเมชันมอร์ฟถ้าต้องการ แต่ละรูปทรงมาจากเลขซีดและถูกสร้างในเบราว์เซอร์ของคุณ
- 1
คลิกรูปหยดใหม่ หรือกด R หรือ Space จนกว่าจะชอบรูปทรง รูปทรงก่อนหน้าอยู่ใต้รูปหยดล่าสุด
- 2
ใต้รูปทรง ปรับความซับซ้อน คอนทราสต์ ขนาด และเลเยอร์
- 3
ใต้สี เลือกหนึ่งในจานสี หรือตั้งการเติมสีทึบหรือไล่สี และสลับสไตล์เป็นเส้นขอบหากต้องการเฉพาะขอบ
- 4
ตั้งความกว้างและความสูงของแคนวาส เปิดสีพื้นหลังหากจำเป็น และเปิดแอนิเมชันมอร์ฟสำหรับรูปทรงที่เคลื่อน
- 5
คลิกดาวน์โหลด SVG หรือเลือกสเกล PNG ที่ 1×, 2× หรือ 4× แล้วคลิก PNG คัดลอก SVG และคัดลอก React ใส่โค้ดบนคลิปบอร์ด
คำถามที่พบบ่อย
ได้รูปหยดเดิมอีกครั้งในภายหลังหรือไม่?
ได้ รูปทรงมาจากซีด ดังนั้นซีดเดียวกันกับการตั้งค่าเดียวกันให้รูปหยดเดิมเสมอ จดตัวเลขแล้วพิมพ์กลับในซีด
พื้นหลังโปร่งใสหรือไม่?
ใช่ โดยค่าเริ่มต้น เปิดสีพื้นหลังเฉพาะเมื่อต้องการแคนวาสที่เติม
แอนิเมชันใช้ได้ในไฟล์ที่ส่งออกหรือไม่?
แอนิเมชันมอร์ฟใช้องค์ประกอบ animate ในตัวของ SVG ดังนั้นเล่นในไฟล์ส่งออก SVG และ React โดยไม่ต้องมี CSS หรือ JavaScript เพิ่ม PNG เป็นเฟรมนิ่งเสมอ
ใช้รูปหยดในโปรเจกต์ React อย่างไร?
คัดลอก React ให้คอมโพเนนต์ที่คืน SVG และส่ง props ไปยังองค์ประกอบ svg ดังนั้นคุณเพิ่ม className หรือ style ได้
มีอะไรถูกอัปโหลดหรือไม่?
ไม่มี รูปทรงถูกคำนวณและส่งออกทั้งหมดในเบราว์เซอร์ของคุณ