SVG 물결 생성기

섹션 구분선과 히어로 배경을 위한 레이어드 SVG 물결 — 진폭·물결 개수·복잡도·레이어별 불투명도를 조절하고 SVG나 CSS로 복사하거나 PNG로 저장하세요. 100% 브라우저에서 처리.

진폭: 40px파장: 340px가로 물결 개수복잡도: 0%세로 뒤집기 (파형을 아래로)레이어 & 색상

레이어 1

레이어 2

레이어 3

물결 스타일캔버스

너비(px)높이(px)

배경색 (끄면 투명)출력 형식

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="1440" height="320" preserveAspectRatio="none">
  <path d="M0,40 C28.33,60.94 56.67,80 85,80 C113.33,80 141.67,60.94 170,40 C198.33,19.06 226.67,0 255,0 C283.33,0 311.67,19.06 340,40 C368.33,60.94 396.67,80 425,80 C453.33,80 481.67,60.94 510,40 C538.33,19.06 566.67,0 595,0 C623.33,0 651.67,19.06 680,40 C708.33,60.94 736.67,80 765,80 C793.33,80 821.67,60.94 850,40 C878.33,19.06 906.67,0 935,0 C963.33,0 991.67,19.06 1020,40 C1048.33,60.94 1076.67,80 1105,80 C1133.33,80 1161.67,60.94 1190,40 C1218.33,19.06 1246.67,0 1275,0 C1303.33,0 1331.67,19.06 1360,40 C1386.67,59.71 1413.33,78.01 1440,79.83 L1440,320 L0,320 Z" fill="#60a5fa" fill-opacity="1"/>
  <path d="M0,68.28 C28.33,83.09 56.67,83.09 85,68.28 C113.33,53.47 141.67,26.53 170,11.72 C198.33,-3.09 226.67,-3.09 255,11.72 C283.33,26.53 311.67,53.47 340,68.28 C368.33,83.09 396.67,83.09 425,68.28 C453.33,53.47 481.67,26.53 510,11.72 C538.33,-3.09 566.67,-3.09 595,11.72 C623.33,26.53 651.67,53.47 680,68.28 C708.33,83.09 736.67,83.09 765,68.28 C793.33,53.47 821.67,26.53 850,11.72 C878.33,-3.09 906.67,-3.09 935,11.72 C963.33,26.53 991.67,53.47 1020,68.28 C1048.33,83.09 1076.67,83.09 1105,68.28 C1133.33,53.47 1161.67,26.53 1190,11.72 C1218.33,-3.09 1246.67,-3.09 1275,11.72 C1303.33,26.53 1331.67,53.47 1360,68.28 C1386.67,82.22 1413.33,83.37 1440,70.77 L1440,320 L0,320 Z" fill="#3b82f6" fill-opacity="1" transform="translate(0 58.67)"/>
  <path d="M0,80 C28.33,80 56.67,60.94 85,40 C113.33,19.06 141.67,0 170,0 C198.33,0 226.67,19.06 255,40 C283.33,60.94 311.67,80 340,80 C368.33,80 396.67,60.94 425,40 C453.33,19.06 481.67,0 510,0 C538.33,0 566.67,19.06 595,40 C623.33,60.94 651.67,80 680,80 C708.33,80 736.67,60.94 765,40 C793.33,19.06 821.67,0 850,0 C878.33,0 906.67,19.06 935,40 C963.33,60.94 991.67,80 1020,80 C1048.33,80 1076.67,60.94 1105,40 C1133.33,19.06 1161.67,0 1190,0 C1218.33,0 1246.67,19.06 1275,40 C1303.33,60.94 1331.67,80 1360,80 C1386.67,80 1413.33,63.32 1440,43.69 L1440,320 L0,320 Z" fill="#2563eb" fill-opacity="1" transform="translate(0 117.33)"/>
</svg>

각 레이어는 위상을 조금씩 옮겨 쌓이므로, 앞쪽 레이어의 불투명도를 낮추면 깊이감으로 보입니다. 마크업이 필요하면 SVG를, 배경으로 쓰려면 CSS를, 래스터가 필요하면 PNG를 가져가세요. 배경색을 지정하지 않으면 PNG 배경도 투명합니다.

🔒 브라우저에서 실행되며 업로드되지 않습니다.

구분선과 히어로 배경을 위한 레이어드 SVG 물결

이 도구는 부드러운 사인파 경로로 이루어진 독립형 <svg>를 만듭니다. 색상 블록 사이의 비스듬한 섹션 구분선이나 부드러운 레이어드 히어로 배경에 쓰입니다. 진폭(물결 높이)과 파장(한 주기의 너비)을 조절하거나, 파장을 나눠 계산하는 대신 가로로 몇 개의 물결이 지나갈지 직접 입력할 수 있습니다. 복잡도를 올리면 2차·3차 배음이 섞여 봉우리가 반복되지 않고, 캔버스 크기를 고르고, 최대 6개의 레이어에 각각 색상과 불투명도를 줄 수 있습니다. 단색 채우기·선·그라디언트 페이드 중에서 고르고, 배경색을 넣거나 투명하게 두고, 위아래로 뒤집어 섹션의 위 또는 아래에 배치하세요. 슬라이더를 움직이면 미리보기가 즉시 갱신되고, 랜덤 버튼을 누르면 완전히 새로운 물결이 한 번에 나옵니다.

복붙 또는 다운로드, 의존성 없음

출력은 viewBox와 preserveAspectRatio="none"를 가진 순수 SVG라 자바스크립트 라이브러리·이미지·네트워크 요청 없이도 어떤 컨테이너 너비에도 늘어납니다. 마크업을 HTML이나 컴포넌트에 바로 붙여넣거나, 출력 형식을 CSS로 바꿔 요소를 따로 두지 않아도 되는 background-image 규칙을 가져가거나, .svg 파일로 내려받거나, PNG로 저장하세요. 배경색을 지정하지 않으면 PNG 배경도 투명합니다. 모든 경로는 브라우저에서 결정적으로 생성되므로 같은 설정은 항상 같은 모양을 만듭니다.

자주 묻는 질문

SVG를 섹션 구분선으로 어떻게 쓰나요?

섹션의 맨 위나 맨 아래에 SVG를 붙여넣고 width:100%를 주세요. viewBox와 preserveAspectRatio="none"를 사용하므로 어떤 컨테이너 너비에도 꽉 차게 늘어납니다. 뒤집기 토글로 물결을 섹션 아래쪽에 둘 수도 있습니다. 또는 출력 형식을 CSS로 바꿔 섹션 자체에 규칙을 붙여넣으세요. 물결 전체가 데이터 URI로 들어 있어 요소를 더 두지 않아도 되고 추가 요청도 없습니다.

진폭과 파장은 무엇을 조절하나요?

진폭은 물결 봉우리의 높이(px)로, 클수록 더 크고 극적인 물결이 됩니다. 파장은 한 주기의 가로 길이로, 작을수록 물결이 더 촘촘해집니다. 복잡도를 올리면 2차·3차 배음이 섞여 봉우리가 서로의 복사본이 아니게 됩니다. 레이어를 추가하면 위상이 어긋난 사본이 쌓이고, 앞쪽 레이어의 불투명도를 낮추면 깊이감으로 보입니다.

PNG로 저장할 수 있나요?

네. 출력 형식에서 PNG 이미지를 고르면 지정한 캔버스 크기로 래스터화됩니다. 물결 뒤에 아무것도 칠하지 않으므로 배경색을 지정하지 않으면 PNG 배경도 투명하게 남아, 색 블록 위에 흰 사각형 없이 얹을 수 있습니다. 크기가 늘어나야 하는 자리에는 여전히 SVG가 낫습니다.