SVG 블롭 생성기

SVG 블롭 생성기란?

SVG 블롭 생성기는 배경, 히어로 영역, 아바타, 장식 포인트에 쓸 부드럽고 유기적인 블롭 모양을 직접 그리지 않고 만들고 싶은 디자이너와 프론트엔드 개발자를 위한 무료 브라우저 내 도구입니다. 조절하는 값은 두 가지입니다 — 복잡도(모양 둘레의 앵커 점 개수)와 대비(각 점이 완전한 원에서 얼마나 벗어나는지). state에 보관된 시드는 '재생성' 버튼으로 1씩 올라가며, 복잡도와 대비를 고정한 채 무한한 변형을 순환할 수 있습니다. 출력은 하나의 매끄러운 닫힌 베지어 경로로 그려지므로 깔끔한 SVG 코드를 복사하거나, 어떤 요소든 마스킹할 CSS clip-path() 규칙을 얻거나, 바로 쓸 수 있는 .svg 파일을 내려받을 수 있습니다. 브랜드에 맞는 장식을 빠르게 만들거나 원 둘레의 점에서 블롭 경로가 어떻게 만들어지는지 익히는 데 활용하세요.

SVG 블롭 생성기 사용법

1. 설정을 열어 모양의 복잡도(점 개수, 3~16)를 설정합니다.
2. 대비(0~100)를 설정해 가장자리가 얼마나 불규칙하고 출렁이는지 조절합니다.
3. 색 칩이나 HEX 값 입력으로 채움 색을 고릅니다.
4. '재생성'을 클릭해 다음 시드로 새 무작위 변형을 뽑고, 마음에 드는 모양이 나올 때까지 반복합니다.
5. SVG 코드나 CSS clip-path 규칙을 복사하거나 '다운로드'로 .svg 파일을 저장합니다.

예시

자주 묻는 질문

복잡도와 대비는 무엇을 조절하나요?

복잡도는 원 둘레에 고르게 배치되는 앵커 점의 개수(3~16)로, 점이 많을수록 윤곽이 더 세밀해집니다. 대비는 각 점이 기준 반지름에서 안팎으로 무작위로 밀려나는 정도(0~100)로, 0은 거의 평범한 원, 100은 매우 불규칙합니다.

'재생성' 버튼은 어떻게 동작하나요?

각 블롭은 숫자 시드에 복잡도와 대비를 더해 만들어집니다. 재생성은 시드를 1 올려 모양을 다시 계산하므로, 복잡도·대비·색은 그대로 둔 채 클릭할 때마다 새 무작위 변형이 나옵니다.

SVG 출력과 clip-path 출력의 차이는 무엇인가요?

SVG 출력은 삽입하거나 내려받을 수 있는 완결된 독립 <svg> 파일입니다. clip-path 출력은 path()를 쓴 하나의 CSS 규칙으로, 어떤 HTML 요소에든 적용해 같은 블롭 윤곽으로 잘라낼 수 있습니다.

색을 바꾸고 파일을 내려받을 수 있나요?

네. 색 칩이나 HEX 값으로 채움 색을 설정하면 미리보기·SVG·다운로드에 모두 반영됩니다. '다운로드'를 누르면 전적으로 브라우저 안에서 생성된 blob.svg 파일이 저장됩니다.

제 모양이나 설정이 서버로 전송되나요?

아니요. 블롭은 로컬 시드 기반 난수 함수로 생성되고 모든 SVG·clip-path 문자열이 브라우저 안에서 만들어집니다. 아무것도 업로드되지 않으므로 오프라인에서도 작동하며 작업 내용이 비공개로 유지됩니다.