เครื่องสร้างคลื่น SVG

คลื่นมีประโยชน์จริงตรงไหน

• การเปลี่ยนผ่านระหว่างส่วน ระหว่างส่วนฮีโร่ที่มีสีกับเนื้อหาสีขาว เพื่อให้สายตาไหลลื่นแทนที่จะสะดุดกับเส้นแบ่งที่คมชัด
• ส่วนท้าย ที่ขอบบนโค้งช่วยลดความแข็งของบล็อกลิงก์สีเข้ม
• การ์ดราคา ที่ต้องการมุมตกแต่งบาง ๆ โดยไม่ต้องใช้ภาพพื้นหลังเต็มพื้นที่
• แบนเนอร์ฮีโร่ ที่คลื่นบริเวณขอบล่างนำสายตาผู้อ่านลงไปยังเนื้อหา

โครงสร้างของเส้น path

เครื่องมือจะสุ่มตัวอย่างเส้นโค้งไซน์ให้กลายเป็น <path> ที่เติมสีเพียงเส้นเดียวภายใน viewBox ขนาด 1440 x 320:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

เส้น path จะลากผ่านความกว้างด้วยส่วนของเส้นตรงสั้น ๆ ที่ไล่ตามคลื่นไซน์ แล้วปิดลงมาที่ขอบล่าง (หรือขอบบน) เพื่อสร้างส่วนเติมสีทึบ การเพิ่มแอมพลิจูดจะขยายยอดและท้องคลื่น ส่วนการเพิ่มรอบจะอัดคลื่นให้ถี่ขึ้นตลอดความกว้าง

ทำให้รองรับทุกขนาดหน้าจอ

• SVG ตั้งค่า preserveAspectRatio="none" ไว้แล้ว คลื่นจึงยืดเต็มความกว้างใดก็ได้
• มาพร้อม width="100%" ให้ควบคุมความสูงด้วย CSS (height: auto หรือค่าคงที่) ตามต้องการ
• หากต้องการซ้อนคลื่นเพื่อเพิ่มมิติ ให้วางสำเนาสองชุดใน CSS ของคุณเอง กำหนดตำแหน่งแบบ absolute และให้แต่ละชุดมีสีและความทึบต่างกัน

การเข้าถึง

คลื่นเป็นเพียงองค์ประกอบตกแต่ง เพิ่ม aria-hidden="true" และ role="img" เพื่อให้โปรแกรมอ่านหน้าจอข้ามองค์ประกอบนี้ และเก็บเนื้อหาที่มีความหมายทั้งหมดไว้ในองค์ประกอบ HTML ข้างเคียงที่แท้จริง