SVG ブロブ ジェネレーター

ブロブ（やわらかく不規則に丸い形）は、写真のフレーム、見出しの背景、ランディングページの装飾によく使われます。このジェネレーターは、円周上に点を置き、各点をランダムな量だけ内側に引き、なめらかな閉じた曲線でつないで、ダウンロードやHTMLへの貼り付けができる有機的なSVGの形を作ります。シード値で毎回同じブロブを再現でき、簡単な用途向けにCSSだけの代替案も付きます。

使い方

1. 点の数とランダム性を選びます。
2. サイズと、単色か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を使い、4辺が必ず接するようにしています。

計算例

ランダム性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% です。