SVG 웨이브 생성기

물결 모양 구분선은 두 페이지 섹션 사이의 딱딱한 경계선을 부드럽게 만들어 줍니다. 이 생성기는 하나에서 네 겹의 물결을 SVG 하나로 그립니다. 높이, 물결의 크기, 굴곡 수, 색상을 고를 수 있고 시드 숫자가 있어서 결과를 언제든 똑같이 재현할 수 있습니다. 내려받을 수 있는 SVG 파일과 HTML에 붙여 넣을 마크업, 같은 SVG를 배경 이미지로 쓰는 CSS 규칙이 나오므로 별도 파일이 필요 없습니다.

사용 방법

1. 레이어 수, 높이, 물결 크기를 정합니다.
2. 물결마다 점 개수를 고릅니다(적을수록 길고 완만한 물결).
3. 색상 하나 또는 레이어마다 하나씩 고르고, 물결이 아래를 채울지 위를 채울지 정합니다.
4. 마음에 드는 모양이 나올 때까지 시드를 바꾼 뒤 마크업이나 CSS를 복사하거나 SVG를 내려받습니다.

계산식

yᵢ = 기준선 + (2r − 1) × 진폭 · 구간 i: C (Pᵢ + (Pᵢ₊₁ − Pᵢ₋₁)/6) (Pᵢ₊₁ − (Pᵢ₊₂ − Pᵢ)/6) Pᵢ₊₁

r은 0과 1 사이의 시드 기반 난수(mulberry32)여서 같은 시드는 항상 같은 물결을 그립니다. 점들은 3차 베지어 곡선으로 바꾼 Catmull-Rom 스플라인으로 이어져서, 모든 점을 지나면서도 모서리가 생기지 않습니다.

예시

시드 1, 물결 크기 100%, 점 3개, 1440 × 320 캔버스에서는 난수 0.627, 0.003, 0.527이 점의 높이를 180.3, 80.4, 164.4로 정해 M0,180.3 C120,163.7 480,83.1 720,80.4 … 경로가 만들어집니다. 같은 설정에서 물결 크기가 0이면 y = 160의 평평한 선이 그려집니다.