SVG 블롭 생성기

비슷한 CSS·디자인

코드 조각을 보기 좋은 스크린샷으로 만들어 줍니다.

선형, 방사형, 원뿔형 그라디언트를 눈으로 보며 만들고 CSS를 바로 복사합니다.

?

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요!

복잡도, 무작위성, 채우기를 조절할 수 있는 무작위 유기적 SVG 블롭 모양을 생성합니다. 배경 장식이나 일러스트에 좋으며 SVG 또는 clip-path를 복사할 수 있습니다.

“복잡도”(3–10)는 점의 개수를 정하며 높을수록 더 세밀합니다. “무작위성”은 점이 완전한 원에서 얼마나 벗어나는지 조절하며 0은 거의 원형, 100은 가장 불규칙합니다.
6개의 색상 원을 클릭해 그라데이션(보라, 장미, 시안, 호박, 분홍)이나 단색 채우기를 고르세요. 미리보기가 즉시 갱신됩니다.
5가지 CSS 애니메이션(없음, Pulse, Float, Wobble, Spin) 중에서 고르세요. 내보낸 SVG에 해당 @keyframes 코드가 자동으로 포함됩니다.
“무작위화”를 클릭하면 즉시 새 모양으로 바뀝니다. 마음에 드는 모양을 찾으면 복잡도와 무작위성을 미세 조정해 다듬으세요.
내보내기 옵션 4가지: 전체 마크업은 “SVG 복사”, CSS 마스킹은 “clip-path 복사”, SVG 벡터 또는 800×800px PNG로 다운로드.

SVG Blob 생성기란 무엇인가요?

색상, 복잡도, 무작위성을 조절할 수 있는 매끄러운 유기적 블롭 모양 SVG 그래픽을 만듭니다.

SVG는 어디에 쓸 수 있나요?

HTML/CSS에 넣거나 내려받아 Figma, Illustrator 등에 가져올 수 있습니다.

클릭할 때마다 다른 모양이 만들어지나요?

네. 다시 생성을 누를 때마다 고유한 무작위 블롭 모양이 만들어집니다.