วาดคลื่นไซน์ (Sine Wave) ด้วย HTML5 SVG

ใช้ <path> และ Cubic Bezier Curve

ประมาณครึ่งคลื่นไซน์ด้วย Cubic Bezier: C 0.3642*W, 0 0.7058*W, H W, H

ตัวอย่าง SVG

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>SVG Sine Wave</title>
</head>
<body>
  <h2 align="center">HTML5 SVG Sine Waves</h2>
  <svg width="150px" height="200px" viewBox="0 0 100 100">
    <path stroke="#00FF00" fill="none" d="M0,0 C36.42,0 70.58,100 100,100" />
  </svg>
</body>
</html>

คำอธิบาย Path Data

• M0,0 - Move to (0,0)
• C 36.42,0 70.58,100 100,100 - Cubic Bezier: Control Point 1, Control Point 2, End Point
• ค่าควบคุม (36.42, 70.58) มาจากการประมาณ Sine Wave ด้วย Bezier

ซ้ำ Path นี้ต่อเนื่องได้คลื่นไซน์เต็มรูป