เครื่องมือสร้างคลื่น SVG
ปรับขนาด รูปทรง และสีของคลื่นเพื่อสร้างตัวคั่นหรือพื้นหลังของหน้าเว็บ คัดลอกหรือบันทึก SVG หรือ CSS พื้นหลัง หรือบันทึกเป็นภาพ PNG
คุณทำอะไรได้
ปรับรูปร่างและสี
ปรับความสูง จำนวน ตำแหน่ง และทิศทางการเติมสีของคลื่น แล้วสร้างด้วยสีหนึ่งหรือสองสี
รับผลลัพธ์ในรูปแบบที่เหมาะกับความต้องการของคุณ
คัดลอกและบันทึกโค้ด SVG หรือพื้นหลัง CSS หรือบันทึกเป็นภาพ PNG
วิธีใช้งาน
เลือกรูปร่างเริ่มต้น
ปรับค่าโดยตรง หรือเลือกรูปร่างที่คล้ายกันจาก “เลือกเทมเพลต”
ปรับขนาดและสี
ระบุความกว้าง ความสูง แอมพลิจูด และจำนวนคลื่น ปรับตำแหน่งเริ่มต้นและความสูงจากศูนย์กลางในการตั้งค่าขั้นสูง
สร้างและตรวจสอบ SVG
ตรวจสอบรูปร่างคลื่นที่สร้างขึ้นและพื้นที่โปร่งใส เมื่อเปลี่ยนการตั้งค่าให้สร้างใหม่
รับรูปแบบที่ต้องการ
เลือก SVG หรือพื้นหลัง CSS เพื่อคัดลอกหรือบันทึก หรือบันทึก PNG
มีประโยชน์สำหรับ
แบ่งส่วนของหน้า
สร้างตัวคั่นรูปร่างคลื่นระหว่างส่วนเนื้อหาหรือเหนือส่วนท้าย
ให้เข้ากับสีของเว็บไซต์คุณ
ใช้สีเข้มหรือการไล่ระดับสีเพื่อสร้างทรัพยากรพื้นหลังที่เข้ากับโทนสีของหน้า
รูปร่างคลื่นและรูปแบบการบันทึก
แอมพลิจูดและจำนวนคลื่น
แอมพลิจูดคือขนาดของการเปลี่ยนแปลงในแนวดิ่ง ส่วนจำนวนคลื่นคือจำนวนรอบคลื่นตลอดความกว้าง นี่ไม่ใช่คุณสมบัติสำหรับแสดงรูปคลื่นเสียง
ตำแหน่งคลื่นและส่วนที่ถูกตัด
เปลี่ยนตำแหน่งเริ่มต้นด้วยเฟส และเปลี่ยนตำแหน่งแนวดิ่งด้วยความสูงจากศูนย์กลาง ส่วนที่อยู่นอกภาพจะถูกตัดออก
เลือกระหว่าง SVG และ PNG
SVG แทนรูปร่างเป็นเวกเตอร์ ส่วน PNG บันทึกเป็นภาพที่ขนาดพิกเซลตามที่ระบุและคงพื้นที่โปร่งใสไว้
วิธีวางพื้นหลัง CSS
CSS ระบุภาพพื้นหลัง ให้ตั้งความกว้างและความสูงของอ็อบเจกต์ที่ใช้งาน เพื่อเตรียมพื้นที่สำหรับแสดงพื้นหลัง
คำถามที่พบบ่อย
ปรับรูปร่างและสีของคลื่นได้หรือไม่
คุณสามารถระบุค่าและสีได้ เลือก “ใช้สองสี” เพื่อกำหนดสีที่สองและมุมของการไล่ระดับสี
การตั้งค่าปัจจุบันจะเป็นอย่างไรเมื่อฉันเลือกเทมเพลต
การตั้งค่าต่าง ๆ รวมถึงความกว้าง ความสูง และสี จะถูกแทนที่ด้วยการตั้งค่าของเทมเพลต ให้ปรับค่าที่จำเป็นหลังเลือกแล้ว
ตัวอย่างจะเปลี่ยนเมื่อฉันเปลี่ยนการตั้งค่าหรือไม่
หลังปรับการเปลี่ยนแปลง ให้เลือก “สร้าง SVG” เพื่อตรวจสอบผลลัพธ์ ผลลัพธ์ที่สร้างไว้ก่อนหน้าจะไม่สามารถแสดงหรือบันทึกได้อีก
SVG นี้เป็นคลื่นไซน์ที่แม่นยำหรือไม่
คลื่นถูกประมาณด้วยเส้นโค้งลูกบาศก์ที่ราบรื่น ไม่ใช่รูปคลื่นสำหรับการวัดทางคณิตศาสตร์หรือการวิเคราะห์เสียง
การจัดการไฟล์
- อินพุต
- สร้างจากการตั้งค่าคลื่นเชิงตัวเลขและสี ไม่ต้องเลือกภาพ
- เอาต์พุต
- wave.svg, wave.css และ wave.png สามารถคัดลอก SVG และ CSS ได้ด้วย