SVG 블롭 생성기

SVG 블롭 생성기란?

SVG 블롭 생성기는 원 주위에서 점을 샘플링하고 부드러운 베지어 곡선으로 연결하여 닫힌 유기적 모양을 만듭니다. 결과는 부드럽고 유체와 같은 실루엣입니다 — 마케팅 히어로 뒤, 프로필 사진 주위 또는 랜딩 페이지의 다채로운 배경 블롭으로 볼 수 있는 종류의 모양입니다.

블롭은 기하학과 무작위성 사이의 스윗 스폿에 자리합니다. 점 수를 조정하여 젤리빈 (3-4), 자갈 (5-6) 또는 혼란스러운 (10+) 모양을 얻습니다. 무작위성 슬라이더를 움직여 거의 원형에서 매우 왜곡된 것까지 변경하세요. 언제든지 새 시드를 굴리려면 주사위 버튼을 누르세요.

모든 것이 브라우저에서 실행됩니다. 복사-붙여넣기 가능한 SVG 스니펫, 다운로드 가능한 .svg 파일 또는 모든 HTML 요소에 직접 적용하여 블롭 모양으로 마스킹할 수 있는 CSS clip-path 값으로 내보내세요.

블롭을 만들면서 배울 수 있는 것

• 3차 베지어 곡선은 블롭에 부드러움을 줍니다 — 각 인접한 점 쌍에는 두 개의 컨트롤 핸들이 있으며, 모든 접합부에서 접선이 연속적이도록 계산됩니다.
• 여기에 사용된 캣멀-롬 스플라인은 이웃 점에서 자동으로 이러한 핸들을 도출하므로, 곡선을 부드럽게 유지하기 위해 컨트롤 포인트를 수동으로 조정할 필요가 없습니다.
• CSS clip-path: path(...) 는 레이아웃 박스에 영향을 주지 않고 모든 요소 — 이미지, div, 비디오 — 에 블롭 모양을 적용할 수 있습니다.

블롭을 단계별로 생성하는 방법

1. 1

   점 수 선택

   더 적은 점 (3-5) 은 젤리빈 블롭을 만듭니다. 더 많은 점 (8-12) 은 자갈처럼 불규칙한 모양을 만듭니다.

2. 2

   무작위성 설정

   0% 는 원입니다. 50% 는 부드러운 블롭 모양의 곡선을 제공합니다. 100% 는 매우 왜곡되고 극적인 실루엣을 제공합니다.

3. 3

   색상 또는 그래디언트 선택

   단색 채우기를 사용하거나 그래디언트를 활성화하고 두 가지 색상과 각도를 선택하세요. 인기 있는 히어로 섹션 패턴과 일치합니다.

4. 4

   무작위화 및 내보내기

   주사위를 눌러 새 시드를 굴리세요. 만족스러우면 SVG를 복사하거나, CSS clip-path를 복사하거나, .svg 파일을 다운로드하세요.

블롭이 가장 잘 작동하는 곳

블롭을 사용하는 세 가지 일반적인 방법과 주의해야 할 점.

시도해볼 만한 블롭 예제

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Coddy에 오신 것을 환영합니다</h1></section>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

SVG 블롭의 일반적인 실수

• viewBox 를 잊고 <svg> 에 고정 너비/높이를 주는 것. 모양이 반응형으로 스케일되지 않습니다 — viewBox와 CSS에서 너비/높이를 사용하세요.
• 매 프레임마다 큰 채워진 패스를 애니메이션하는 것. 패스 래스터화는 비쌉니다. transform/opacity를 사용하거나 GPU가 처리하도록 CSS 필터로 사전 흐림을 적용하세요.
• Tailwind/Bootstrap에 인라인 <svg> 를 복사하고 block 대신 display: inline 을 상속하는 것. 기본 베이스라인 간격으로 인해 모양 아래 몇 픽셀이 남습니다.

자주 묻는 질문