SVG 파도 생성기

SVG 파도 생성기란?

SVG 파도 생성기는 패스를 손으로 그리지 않고도 부드럽고 자연스러운 파도 구분선과 히어로 배경을 만들고 싶은 웹 디자이너와 프론트엔드 개발자를 위한 무료 브라우저 도구입니다. 곡선 강도를 설정하고 1~8개의 레이어를 쌓으며, 파도의 마루가 아래 또는 위로 향하도록 뒤집고, 단색 혼합 또는 두 HEX 색 사이의 세로 그라데이션으로 채웁니다. 각 파도는 시드 기반 의사 난수로 그려지므로 '재생성'을 누르면 같은 설정을 유지한 채 새로운 모양이 나오고, 출력은 어떤 크기로 키워도 선명한 정확한 SVG라 HTML 페이지나 디자인 파일에 그대로 붙여 넣을 수 있습니다. 섹션 구분선, 푸터, 배너, 장식 배경 등에 활용하세요.

SVG 파도 생성기 사용법

1. 곡선 강도를 0~100으로 설정해 파도 마루가 얼마나 높고 강하게 솟을지 조절합니다.
2. 레이어 수(1~8)를 고릅니다. 레이어가 많을수록 반투명 파도가 겹쳐 깊이감이 생깁니다.
3. '뒤집기'로 파도 마루가 아래 또는 위로 향하게 합니다.
4. '설정'을 열어 단색 채우기와 세로 그라데이션을 전환하고 시작 색과 끝 색을 고릅니다.
5. '재생성'을 눌러 마음에 들 때까지 파도 모양을 새로 뽑습니다.
6. SVG 마크업을 복사하거나 '다운로드'를 눌러 wave.svg 파일을 저장합니다.

예시

자주 묻는 질문

곡선 강도는 무엇을 바꾸나요?

강도(0~100)는 각 파도 마루가 얼마나 오르내리는지를 제어합니다. 값이 낮으면 잔잔한 물결, 높으면 높고 강한 봉우리가 됩니다. 바꾸는 즉시 미리보기와 SVG가 갱신됩니다.

'재생성'을 누르면 모양이 바뀌는 이유는?

각 파도는 시드 기반 의사 난수로 그려집니다. 재생성은 시드를 1 올려 강도·레이어·색·채우기는 그대로 둔 채 새로운 마루 배치를 얻게 합니다.

단색과 그라데이션 채우기의 차이는?

단색은 쌓인 각 레이어를 두 색 사이에서 섞고, 그라데이션은 모든 레이어에 위의 첫 색에서 아래의 둘째 색으로 가는 세로 그라데이션 하나를 적용합니다. '설정'을 열어 전환하고 두 색을 고를 수 있습니다.

내려받은 SVG는 어떻게 쓰나요?

출력은 표준적이고 확대·축소가 자유로운 SVG 마크업입니다. HTML에 바로 복사하거나 wave.svg를 내려받아 디자인 도구에 불러오거나 이미지로 참조하면 됩니다. 벡터라 어떤 크기에서도 선명합니다.

서버로 무엇이 업로드되나요?

아니요. 파도는 로컬 연산으로 브라우저 안에서만 생성되고, .svg 다운로드도 메모리 상의 blob에서 만들어집니다. 어떤 설정·색·이미지도 기기를 벗어나지 않으므로 오프라인에서도 작동하며 작업 내용이 비공개로 유지됩니다.