디자인 / SVG

섹션 구분선용 SVG 웨이브 생성기

페이지 두 섹션 사이의 경계에 사용할 부드러운 다중 레이어 SVG 웨이브를 생성합니다. 레이어 수, 웨이브 수, 높이, 부드러움, 색상을 선택한 다음 SVG를 다운로드하거나 CSS 배경으로 복사할 수 있습니다.

섹션 구분선용 SVG 웨이브 생성기: 각 레이어는 기준선 위아래로 무작위 양만큼 번갈아 배치된 점의 행입니다. 점은 부드러운 곡선으로 연결되고 아래쪽 가장자리까지 채워집니다. 뒤쪽 레이어는 더 옅게 표시되므로 레이어에 깊이감이 생깁니다. SVG는 어떤 너비에도 맞게 늘어나며, CSS 버전은 SVG를 data URI 배경으로 포함합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.

카테고리
개발자 도구
실행 횟수
브라우저에서
비용
무료 · 가입 불필요
사용 가능 여부
사용 가능
SVG 파도 생성기로컬 처리

브라우저에서 전부 실행됩니다

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

SVG는 어떤 너비로든 늘어나므로 (preserveAspectRatio="none") 전체 너비의 섹션 구분선에 적합합니다. 한 섹션의 하단에 다음 섹션의 배경 색상과 함께 배치하거나, 상단에 사용하려면 뒤집으십시오. 동일한 무작위 시드는 항상 같은 파도를 그립니다.

SVG와 CSS 중 무엇을 사용할까요?

인라인 SVG는 CSS로 스타일을 지정하고 애니메이션을 적용할 수 있으며, fill에 currentColor를 사용할 수 있습니다. CSS 배경으로 사용하는 SVG는 데이터 URI이므로 추가로 로드할 것이 없지만, 색상이 코드에 고정됩니다. 어느 방식이든 파일 크기는 수백 바이트에 불과하며, SVG 정리 도구로 더 정리할 수 있습니다.

부드러움

곡선은 Catmull-Rom 스플라인을 3차 Bézier 세그먼트로 변환한 것입니다. 부드러움이 최댓값이면 모든 점을 부드럽게 지나가고, 0이면 점 사이가 직선이 되어 울퉁불퉁한 산 모양 가장자리가 됩니다.

사용 방법

  1. 레이어 수, 웨이브 수, 높이를 설정합니다.
  2. 색상을 선택하고 섹션 상단에 사용할 수 있도록 웨이브를 뒤집습니다.
  3. 새로운 랜덤 웨이브를 만든 다음 SVG를 다운로드하거나 CSS를 복사합니다.

개인정보 보호 및 제한사항

웨이브는 브라우저에서 그려집니다. 업로드하지 않습니다.

관련 도구

SVG 블롭CSS 패턴CSS 그라데이션

자주 묻는 질문

두 섹션 사이에서 어떻게 사용합니까?

웨이브에 아래 섹션의 색상을 적용하고 위 섹션의 하단에 전체 너비로 배치합니다. 섹션 상단에 사용하려면 웨이브를 뒤집으십시오.

같은 설정으로 같은 웨이브가 만들어집니까?

예. 모양은 랜덤 시드에서 생성되므로 새 웨이브를 만들 때만 변경됩니다.

웨이브를 상업적으로 사용할 수 있습니까?

예. 웨이브 모양은 사용자를 위해 생성되며 라이선스 제한이 없습니다.

무료 도구 · 브라우저에서회 실행 · 계정 불필요