디자인 / SVG
SVG 블롭 생성기 (무작위 유기적 도형)
배경과 일러스트에 사용할 매끄러운 무작위 블롭 도형을 만듭니다. 점 개수와 무작위성을 정하고, 색상 또는 2색 그라데이션을 선택한 다음 SVG를 다운로드하거나 복사하십시오.
SVG 블롭 생성기 (무작위 유기적 도형): 점은 원 둘레에 같은 간격으로 배치되며, 각 점을 무작위 거리만큼 중심 방향으로 당긴 다음 매끄러운 폐곡선으로 연결합니다. 점이 적고 무작위성이 높으면 울퉁불퉁한 도형이 되고, 점이 많고 무작위성이 낮으면 부드럽고 거의 둥근 도형이 됩니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path d="M359.5,200 C360.7,243.5 315.4,319 278.8,336.4 C242.1,353.9 174.7,327.5 139.5,304.7 C104.4,282 69.5,237.5 68,200 C66.4,162.5 96.4,100.3 130.4,79.5 C164.4,58.7 233.7,55.4 271.9,75.5 C310.1,95.6 358.4,156.5 359.5,200 Z" fill="#63c42d"/></svg>
점을 원 둘레에 고르게 배치한 다음 각각을 무작위 거리만큼 중심 쪽으로 당기고, 매끄러운 닫힌 곡선으로 연결합니다. 점이 적고 무작위성이 클수록 울퉁불퉁한 모양이 되며, 무작위성이 0%이면 원이 됩니다. 블롭은 사진, 아이콘, 제목 뒤에 부드러운 배경을 만들어 줍니다.
용도
Blob은 상품 사진, 아이콘, 아바타, 제목 뒤에 부드러운 배경을 만드는 데 사용합니다. 텍스트 뒤에는 옅은 색상이나 낮은 불투명도의 채우기를 사용하여 텍스트의 대비를 유지하십시오. 반투명 유리 뒤의 Blob을 보려면 글래스모피즘 생성기와 함께 사용하십시오.
편집
출력은 3차 Bézier 곡선으로 이루어진 하나의 경로이므로 모든 벡터 편집기에서 열 수 있습니다. 몇 개의 점을 직접 변경하려면 SVG 편집기에 붙여넣으십시오.
사용 방법
- 점 개수와 무작위성을 선택합니다.
- 색상 또는 그라데이션을 선택합니다.
- 마음에 드는 블롭이 나올 때까지 새 블롭을 생성한 다음 SVG를 다운로드하거나 복사합니다.
개인정보 보호 및 제한사항
도형은 브라우저에서 그려집니다. 업로드하지 않습니다.
관련 도구
자주 묻는 질문
블롭 안에 사진을 넣으려면 어떻게 해야 하나요?
경로를 복사해 SVG clipPath에서 사용하거나, 블롭을 저장한 다음 사진 위에 CSS mask-image로 사용하십시오.
블롭을 애니메이션으로 만들 수 있나요?
가능합니다. 점 개수가 같은 블롭 2개를 생성하고 두 도형의 path d 속성 사이를 애니메이션으로 연결하십시오. 점 개수가 같으면 모양이 매끄럽게 변형됩니다.
크기 제한이 있나요?
SVG의 크기는 400 × 400이지만, 선명도를 잃지 않고 어떤 크기로든 확대하거나 축소할 수 있습니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요