SVG 블롭 생성기

블롭은 부드럽고 불규칙하게 둥근 모양으로, 사진의 틀로 쓰거나 제목 뒤에 깔거나 랜딩 페이지를 꾸밀 때 인기가 많습니다. 이 생성기는 원 둘레에 점을 놓고 각 점을 무작위 양만큼 안쪽으로 당긴 뒤 부드러운 닫힌 곡선으로 이어서, 내려받거나 HTML에 붙여 넣을 수 있는 유기적인 SVG 모양을 만듭니다. 시드 숫자 덕분에 모든 블롭을 똑같이 재현할 수 있고, 간단한 용도를 위한 CSS 전용 대안도 함께 제공합니다.

사용 방법

1. 점 개수와 무작위성을 정합니다.
2. 크기와 단색 또는 두 가지 색 그라데이션을 정합니다.
3. 마음에 드는 모양이 나올 때까지 시드를 바꿉니다(비워 두면 매번 새로 만들어집니다).
4. SVG를 내려받거나, 마크업을 복사하거나, CSS border-radius 블롭을 사용합니다.

계산식

rᵢ = R × (1 − ½ × 무작위성 × uᵢ), 각도 −90° + 360° × i ÷ n · 구간 i: C (Pᵢ + (Pᵢ₊₁ − Pᵢ₋₁)/6) (Pᵢ₊₁ − (Pᵢ₊₂ − Pᵢ)/6) Pᵢ₊₁

R은 크기의 45%이고 uᵢ는 0과 1 사이의 시드 기반 난수(mulberry32)입니다. Catmull-Rom 스플라인이 처음과 끝을 이어서 곡선이 부드럽게 닫힙니다. CSS 버전은 서로 마주 보는 반지름의 합이 100%가 되는 border-radius를 써서 네 변이 항상 만나도록 합니다.

예시

무작위성 0, 점 4개, 200 px 캔버스에서는 점이 (100, 10), (190, 100), (100, 190), (10, 100)에 놓이고 스플라인은 M100,10 C130,10 190,70 190,100 …를 만들어 원에 가까운 모양이 됩니다. 시드 1, 점 3개, 무작위성 100%에서는 반지름이 61.8, 89.9, 66.3 px가 되고, CSS 대안은 border-radius: 79% 21% 22% 78% / 37% 57% 43% 63%입니다.