6
5
300px

이 도구 소개

SVG 블롭 생성기는 부드러운 3차 베지에 곡선으로 랜덤한 유기적 블롭 도형을 만들며, 복잡도, 무작위성, 크기, 채우기 색, 선택적 그라데이션을 조절하고 SVG 코드나 파일로 내보냅니다.

사용 방법

  1. 복잡도(점의 개수)와 무작위성을 설정합니다.
  2. 크기와 채우기 색을 고르거나 그라데이션을 켭니다.
  3. 마음에 드는 모양이 나올 때까지 다시 생성을 누릅니다.
  4. SVG 코드를 복사하거나 .svg 파일을 다운로드합니다.

알아두면 좋은 점

  • 각 블롭은 원 둘레의 점들을 3차 베지에 곡선으로 이은 하나의 SVG 경로입니다.
  • 점이 많을수록 윤곽이 복잡해지고, 무작위성이 클수록 원에서 멀어집니다.
  • SVG 블롭은 어떤 크기에서도 선명하며 용량은 수백 바이트에 불과합니다.
  • 블롭은 배경 장식, 아바타 프레임, 섹션 구분선으로 인기가 많습니다.
  • SVG는 인라인으로, img 소스로, 또는 CSS 배경으로 쓸 수 있습니다.

모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.

자주 묻는 질문

블롭 도형은 어떻게 만드나요?

여기서 복잡도와 무작위성을 조절하고 다시 생성을 누르세요. 누를 때마다 새로운 랜덤 유기적 도형이 그려지고 SVG로 다운로드할 수 있습니다.

블롭을 상업적으로 써도 되나요?

네. 도형은 사용자 기기에서 무작위로 생성되므로 어떤 프로젝트에든 쓸 수 있습니다.

SVG 블롭을 배경으로 쓰려면 어떻게 하나요?

파일을 저장하고 background-image: url(blob.svg)로 참조하거나, SVG를 인라인으로 붙여 넣고 콘텐츠 뒤에 배치하세요.

블롭에 애니메이션을 줄 수 있나요?

네. CSS로 회전하거나 크기를 바꿀 수 있고, SMIL이나 JavaScript로 점 개수가 같은 두 경로 사이를 모핑할 수도 있습니다.