SVG 물결 배경 생성기
섹션을 부드럽게 잇는 물결 SVG를 색·높이·굴곡으로 만들어 복사하세요
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
웹 섹션 사이를 부드럽게 이어 주는 물결 모양 SVG를 색상·높이·굴곡·물결 개수만 조절해 즉시 만드는 도구입니다. preserveAspectRatio 설정으로 화면 폭에 맞춰 늘어나므로 반응형 랜딩페이지의 섹션 구분선으로 바로 쓸 수 있습니다.
사용 방법
- 높이·굴곡(진폭)·물결 개수 슬라이더로 원하는 곡선을 잡습니다.
- 색상과 투명도를 고르고 필요하면 '상하 반전'으로 방향을 뒤집습니다.
- 미리보기를 확인한 뒤 'SVG 복사' 버튼을 누릅니다.
- 섹션의 위나 아래에 SVG 코드를 붙여넣어 구분선으로 사용합니다.
자주 묻는 질문
- 입력한 내용이 서버로 전송되나요?
- 아니요. 색상·수치 조절과 SVG 코드 생성이 모두 브라우저 안에서만 이뤄지며, 어떤 데이터도 서버로 전송하거나 저장하지 않습니다.
- 만든 물결이 화면 크기에 맞게 늘어나나요?
- 네. 생성되는 SVG에는 width=100% 와 preserveAspectRatio=none 이 들어 있어 부모 폭에 맞춰 가로로 자연스럽게 늘어납니다. 높이는 지정한 값으로 유지됩니다.
- 색을 그라디언트로 채울 수 있나요?
- 현재는 단색 채우기를 제공합니다. 그라디언트가 필요하면 복사한 SVG에서 fill 속성 대신 <defs>에 linearGradient를 정의하고 path의 fill을 그 id로 바꾸면 됩니다.