SVG Blob生成器

SVG Blob Generator は、三次ベジェ曲線を使って有機的で不定形の閉じた図形を構築し、そのまま貼り付けられる SVG マークアップとして書き出します。円周上で N 個の点をランダムな半径方向オフセット付きでサンプリングし、隣接点に基づく接線計算でスムージングを行い、すべてを 1 本の閉じた <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 コードをクリップボードにコピーします。

書き出されるマークアップは、0 0 {size} {size} の正方形 viewBox を持つ単一の <svg> です。その中には 1 本の <path> が含まれ、d 属性は一連の C（三次ベジェ）コマンドで構成され、最後に Z で閉じられます。スムージング係数は 0.2 で固定されており、各ポイントの隣接点同士のベクトルから導出されます。Stroke Width が 0 より大きい場合、パスには塗りつぶし色と同じ色の stroke および stroke-width 属性も設定されます。それ以外の場合は fill のみが出力されます。