SVG 블롭 생성기
SVG 블롭 생성기 툴
SVG Blob Generator 소개
SVG Blob Generator는 3차 베지어 곡선을 사용해 유기적이고 불규칙한 닫힌 도형을 만들고, 바로 붙여 넣을 수 있는 SVG 마크업으로 내보냅니다. 원 주위에 N개의 점을 임의의 방사형 오프셋과 함께 샘플링하고, 이웃 점 기반 접선 계산으로 부드럽게 처리한 뒤 모두 하나의 닫힌 <path>로 연결합니다. 실시간 미리보기와 복사 가능한 코드 블록으로 결과를 즉시 가져올 수 있습니다.
사용 방법
1. Complexity 슬라이더(3 to 12)를 조정해 blob을 형성하는 앵커 포인트 수를 설정합니다. 2. Randomness 슬라이더(0.10 to 1.00)를 조정해 각 점이 기준 반지름으로부터 얼마나 벗어날 수 있는지 제어합니다. 3. 정사각형 viewBox의 Size(100 to 500px)를 설정합니다. 4. 원하는 경우 Stroke Width(0 to 10)를 올려 채우기 색과 동일한 색의 윤곽선을 추가합니다. 5. 색상 견본에서 Fill Color를 선택합니다. 6. Randomize를 클릭(또는 아무 슬라이더를 살짝 조정)하여 도형을 다시 만듭니다. 7. Copy를 클릭해 생성된 SVG 코드를 클립보드에 복사합니다.
SVG 출력 형식
내보내지는 마크업은 0 0 {size} {size} 크기의 정사각형 viewBox를 가진 단일 <svg>입니다. 그 안에는 하나의 <path>가 있으며, d 속성은 일련의 C(3차 베지어) 명령으로 구성되고 Z로 닫힙니다. 평활 계수는 0.2로 고정되어 있으며 각 점의 이웃 점 사이 벡터에서 도출됩니다. Stroke Width가 0보다 크면 경로에는 채우기 색과 동일한 색의 stroke 및 stroke-width 속성도 추가됩니다. 그렇지 않으면 fill만 출력됩니다.
▶같은 설정에서도 Randomize를 두 번 클릭하면 왜 다른 모양이 나오나요?
▶blob을 500px보다 크게 만들 수 있나요?
▶스트로크 색상이 채우기 색과 일치하나요?
▶제 데이터가 서버로 전송되나요?
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.