블롭(blob) 모양 생성기
꼭짓점·복잡도를 조절해 랜덤 유기적 blob SVG를 만들고 코드 복사
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
꼭짓점 수와 복잡도를 조절하면 매번 다른 물방울 같은 유기적 blob 도형이 만들어집니다. 부드러운 곡선으로 이어진 SVG 코드를 복사해 히어로 배경, 아바타 마스크, 장식 요소로 바로 쓸 수 있습니다.
사용 방법
- '새 모양 생성' 버튼을 눌러 마음에 드는 형태가 나올 때까지 랜덤으로 돌립니다.
- 꼭짓점 수와 복잡도(불규칙함) 슬라이더로 둥근 정도와 울퉁불퉁함을 조절합니다.
- 색상을 지정한 뒤 아래 SVG 코드를 복사합니다.
- HTML에 붙여 넣거나 배경 마스크(clip-path·mask)로 활용합니다.
자주 묻는 질문
- 왜 누를 때마다 모양이 달라지나요?
- 원 둘레에 배치한 각 꼭짓점의 반지름을 무작위로 흔들어 만들기 때문입니다. 같은 설정이라도 '새 모양 생성'을 누르면 새로운 시드로 전혀 다른 형태가 나옵니다.
- 곡선이 어떻게 이렇게 부드럽나요?
- 꼭짓점들을 Catmull-Rom 스플라인을 큐빅 베지어로 변환해 이어 붙여 닫힌 곡선을 만듭니다. 그래서 꺾임 없이 매끄럽게 연결됩니다.
- 만든 blob을 상업적으로 써도 되나요?
- 코드는 브라우저에서 수학적으로 생성한 순수 SVG 도형이라 저작권 걱정 없이 자유롭게 쓸 수 있습니다. 다만 특정 브랜드 로고와 유사하지 않은지 최종 확인하는 것은 참고용으로 사용자 몫입니다.
