SVG 블롭 생성기

유기적인 블롭 모양을 만들어 SVG로 저장합니다

시드

R 또는 스페이스 키로 새 모양을 만듭니다.

SVG 블롭 생성기 사용 방법

무작위로 유기적인 블롭 모양을 만들어 SVG, PNG, React 컴포넌트로 내보냅니다. 점 개수, 굴곡, 레이어, 그라데이션 채우기, 윤곽선 스타일을 조정하고 모핑 애니메이션도 넣을 수 있습니다. 모양은 시드 값으로 만들어지며 모든 처리는 브라우저에서 이루어집니다.

'새 모양'을 누르거나 R 키 또는 스페이스 키를 눌러 마음에 드는 모양을 찾습니다. 이전 모양은 '최근 모양'에 남습니다.

'모양'에서 복잡도, 굴곡, 크기, 레이어를 조정합니다.

'색상'에서 '팔레트'를 고르거나 단색 또는 그라데이션 '채우기'를 설정합니다. 테두리만 원하면 '스타일'을 '윤곽선'으로 바꿉니다.

캔버스 '너비'와 '높이'를 정하고, 필요하면 '배경색'과 '모핑 애니메이션'을 켭니다.

'SVG 다운로드'를 누르거나 PNG 배율(1×, 2×, 4×)을 고른 뒤 PNG를 누릅니다. 'SVG 복사'와 'React 복사'로 코드를 클립보드에 담을 수도 있습니다.

자주 묻는 질문

네. 모양은 '시드'로 정해지므로 같은 시드와 같은 설정이면 항상 같은 블롭이 나옵니다. 숫자를 적어 두었다가 '시드'에 다시 입력하세요.

네, 기본값은 투명입니다. 캔버스를 채우고 싶을 때만 '배경색'을 켜세요.

'모핑 애니메이션'은 SVG 자체의 animate 요소를 사용하므로 SVG와 React 내보내기에서 별도의 CSS나 JavaScript 없이 재생됩니다. PNG는 항상 정지 화면입니다.

'React 복사'를 누르면 SVG를 반환하는 컴포넌트가 복사됩니다. props가 svg 요소로 전달되므로 className이나 style을 지정할 수 있습니다.

아니요. 모양 계산과 내보내기 모두 브라우저에서만 처리됩니다.