Menu

SVG 블롭 생성기

부드럽고 무작위적인 유기적 SVG 모양 생성 — SVG 또는 CSS clip-path 복사.

마지막 업데이트

SVG 마크업
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z" fill="#7fb2ff"/>
</svg>
CSS clip-path
clip-path: path('M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z');

SVG 블롭 생성기란?

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

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

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

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

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

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

  1. 점 수 선택

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

  2. 무작위성 설정

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

  3. 색상 또는 그래디언트 선택

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

  4. 무작위화 및 내보내기

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

블롭이 가장 잘 작동하는 곳

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

사용 사례적용 방법주의 사항
히어로 배경SVG를 임베드하여 콘텐츠 뒤에 절대 배치대비 유지 — 블롭 위의 텍스트는 읽기 쉬운 색상이 필요
이미지 마스크<img>에 CSS clip-path: path('…') 적용이미지 소스는 여전히 다운로드됨 — 클립은 시각적일 뿐
아바타 모양프로필 사진을 clip-path가 있는 div로 감싸기원이 충분하다면 border-radius만 사용 — clip-path는 다시 그리기에 더 비쌈
섹션 구분선섹션 하단을 따라 넓은 블롭 늘리기viewBox preserveAspectRatio를 사용하여 와이드 화면에서 모양이 올바르게 유지되도록
장식 액센트다양한 크기의 반투명 블롭 여러 개 배치애니메이션은 절제 — 큰 큰 페인트 패스는 CPU를 소모
브랜드 일러스트블롭을 텍스트나 아이콘과 결합브랜드 정체성이 유지되도록 일관된 모양 스타일 선택

시도해볼 만한 블롭 예제

히어로 섹션에 블롭 추가

HTML
<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>
CSS
.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

절대 위치 SVG가 헤드라인 뒤에 자리합니다. backdrop-filter 없이도 위의 텍스트가 읽기 쉽게 유지되도록 불투명도를 낮춥니다.

이미지를 블롭으로 마스킹

CSS
.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');}

clip-path 는 모든 최신 브라우저에서 지원됩니다. 경로 좌표는 400×400 viewBox를 가정합니다 — 클립이 깔끔하게 정렬되도록 이미지를 해당 상자에 맞게 스케일링하세요.

장식 배경으로 두 개의 부드러운 블롭

HTML
<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>
CSS
.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 을 상속하는 것. 기본 베이스라인 간격으로 인해 모양 아래 몇 픽셀이 남습니다.

자주 묻는 질문

디자인에서 블롭이란?
블롭은 부드러운 곡선으로 만든 유기적이고 비대칭적인 닫힌 모양입니다. 원보다 더 친근하고 자유로운 모양보다 더 세련된 느낌이 들기 때문에 현대 웹 디자인에서 인기가 있습니다 — 히어로 배경, 배지, 아바타 마스크 등.
생성된 SVG는 상업적으로 무료인가요?
예. 출력은 직접 생성한 SVG 마크업입니다 — 첨부된 라이선스가 없고 출처 표기도 필요 없습니다. 상업 사이트, 앱, 덱 등 어디에서나 사용하세요.
복사한 후 경로를 편집할 수 있나요?
예 — 출력은 표준 SVG <path d="…"> 입니다. Figma, Illustrator, Inkscape 또는 모든 벡터 편집기에서 열어 제어점을 조정하세요. 또는 여기서 다시 생성하여 새 모양을 복사하세요.
CSS clip-path 출력을 어떻게 사용하나요?
clip-path: path('M … Z') 를 모든 HTML 요소에 적용하세요. 좌표는 동일한 SVG viewBox 공간에 있으므로 (여기서는 기본값 400×400), 클립이 정렬되도록 클립된 요소를 해당 상자 크기로 조정하거나 경로 좌표를 스케일링하세요.
Math.random은 방문할 때마다 같은 모양을 제공하나요?
아니요. 그러나 이 도구는 시드된 의사 난수 생성기를 사용합니다. 동일한 시드는 항상 동일한 블롭을 생성합니다 — 따라서 마음에 드는 모양을 찾을 때까지 무작위화를 누를 수 있으며 SVG 출력은 그 정확한 모양을 영원히 유지합니다.
블롭이 페이지 속도를 늦추나요?
단일 정적 SVG 블롭은 본질적으로 무료입니다. 블러 필터가 있는 여러 애니메이션 블롭은 모바일에서 비싸질 수 있습니다 — DevTools에서 프로파일링하고 경로 속성 애니메이션보다 transform/opacity 애니메이션을 선호하세요.

자세히 알아보기

다른 개발자 도구

Coddy programming languages illustration

Coddy로 코딩 배우기

시작하기