Để vẽ sóng sin trong SVG, sử dụng phần tử <path> với đường cong Bezier bậc 3 (C command) để xấp xỉ nửa chu kỳ sóng sin.
Ví dụ: Nửa sóng sin xấp xỉ bằng cubic-bezier
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</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>
Giải thích đường dẫn (path data)
M0,0: Điểm bắt đầu (0,0).C36.42,0 70.58,100 100,100: Cubic Bezier curve với:- Điểm điều khiển 1: (36.42, 0)
- Điểm điều khiển 2: (70.58, 100)
- Điểm kết thúc: (100, 100)
Các giá trị 36.42 và 70.58 được tính toán để đường cong Bezier xấp xỉ nửa chu kỳ sin từ 0 đến π. Để vẽ sóng sin hoàn chỉnh, bạn có thể lặp lại và phản chiếu đường cong này.
