SVG 블롭 생성기
무작위 유기적 SVG 블롭 도형을 만드세요 — 꼭짓점·대비·색을 조절하거나 사진으로 채운 뒤 SVG를 복사하거나 다운로드하세요. 100% 브라우저에서 처리.
블롭을 가득 채우도록 가운데를 기준으로 잘라 넣습니다 — 늘리지 않습니다. 사진은 SVG 안에 그대로 들어가므로 파일 하나만 있으면 됩니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"><path fill="#6366f1" d="M 156.26 100 C 156.6 117.97 145.13 149.51 132.17 155.71 C 119.21 161.92 92.65 146.51 78.51 137.23 C 64.38 127.95 50.34 117.58 47.36 100 C 44.38 82.43 46.83 40.47 60.62 31.78 C 74.41 23.09 114.16 36.5 130.1 47.87 C 146.04 59.24 155.92 82.03 156.26 100 Z"/></svg>
🔒 브라우저에서 생성되며 업로드되지 않습니다.
SVG 블롭 생성기란?
블롭 생성기는 부드럽고 유기적인 "블롭" 도형을 만들어 줍니다. 현대 웹 디자인에서 배경, 섹션 구분, 이미지 마스크, 장식 요소로 자주 쓰이는 형태입니다. 이 도구는 원 주위에 점을 배치하고 시드 기반 난수로 각 점을 흔든 뒤 닫힌 곡선으로 매끄럽게 이어, 그대로 마크업이나 CSS에 붙여넣을 수 있는 독립형 SVG로 내보냅니다.
어떻게 사용하나요?
꼭짓점 슬라이더로 블롭의 돌기 개수를, 대비 슬라이더로 불규칙한 정도를 조절하세요. 대비가 낮으면 거의 원형, 높으면 뾰족하고 역동적입니다. 채우기 색을 고르거나 사진으로 채우기 기능으로 사진을 넣으세요. 사진은 가운데를 기준으로 잘려 SVG 안에 그대로 들어갑니다. 무작위 버튼을 누르면 새 시드로 완전히 새로운 모양이 나옵니다. 마음에 들면 SVG를 복사하거나 blob.svg로 다운로드하세요. 모든 처리는 브라우저에서 로컬로 이루어집니다.
자주 묻는 질문
블롭이 매번 무작위인가요, 아니면 재현 가능한가요?
각 도형은 시드 기반 의사난수 생성기로 만들어지므로 같은 꼭짓점·대비·시드 조합은 항상 완전히 동일한 블롭을 만듭니다. 무작위 버튼은 새 시드를 선택해 새로운 모양을 제공하며, 이후 그대로 두거나 조절하거나 내보낼 수 있습니다.
다운로드 형식은 무엇인가요?
SVG 파일(blob.svg, image/svg+xml)로 내보냅니다. SVG는 해상도에 독립적인 벡터 형식이라 어떤 크기에서도 선명하게 유지되고 용량이 매우 작습니다. 원본 <svg> 마크업을 복사해 HTML, React/JSX, CSS 배경에 바로 붙여넣을 수도 있습니다.
블롭을 배경이나 이미지 마스크로 어떻게 쓰나요?
SVG를 저장하거나 복사한 뒤 <img>, 인라인 <svg>, 또는 CSS background-image(데이터 URI)로 사용하세요. 블롭 안에 사진을 넣으려면 사진으로 채우기 기능을 쓰세요. 가운데를 기준으로 잘려 SVG 안에 직접 들어가므로 파일 하나만 있으면 됩니다. 따로 호스팅한 이미지를 마스킹하려면 SVG clipPath에서 경로를 참조하거나 CSS clip-path 또는 mask를 쓰면 됩니다. 순수 벡터라 어떤 컨테이너에서도 흐려지지 않고 확대됩니다.