HTML5 SVG로 사인파 그리기
SVG에서 사인파(sine wave)를 그리려면 <path> 요소와 3차 베지어 곡선(cubic bezier) 근사 기법을 활용하면 됩니다. 사인파의 절반 형태를 수학적으로 정확히 표현하기는 어렵지만, 적절한 제어점 값을 사용하면 실제 사인 곡선과 거의 구분되지 않을 만큼 자연스러운 곡선을 얻을 수 있습니다.
핵심은 d 속성에 사용하는 C(cubic bezier) 명령어입니다. 시작점과 끝점 사이에 두 개의 제어점을 배치하여 부드러운 곡선을 만들어내며, 아래 예제에서는 좌표 (0,0)에서 (100,100)까지 사인파의 반 주기를 표현했습니다.
예제 코드
<!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>
코드 설명
- M0,0: 경로의 시작점을 (0, 0)으로 지정합니다.
- C36.42,0,70.58,100,100,100: 첫 번째 제어점(36.42, 0)과 두 번째 제어점(70.58, 100)을 사용해 끝점(100, 100)까지의 베지어 곡선을 정의합니다.
- stroke="#00FF00": 선 색상을 초록색으로 지정합니다.
- fill="none": 내부 채우기를 제거하여 선만 표시합니다.
이 제어점 값들은 사인 함수의 특성을 분석해 도출된 것으로, 실제 사인 곡선과 최대 오차가 매우 작아 시각적으로 거의 동일하게 보입니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같이 초록색의 부드러운 사인파 곡선이 화면에 출력됩니다.
마무리
이 방식은 애니메이션, 파형 시각화, 데이터 차트 등 다양한 웹 그래픽 작업에 응용할 수 있습니다. 여러 개의 <path> 요소를 연결하거나 S(smooth cubic bezier) 명령어를 활용하면 연속적인 전체 사인파도 손쉽게 그릴 수 있습니다.