SVG Blob ジェネレーター

数秒で美しい SVG Blob をデザイン

有機的な「blob」シェイプは、現代の Web デザインで最も人気のあるトレンドの 1 つで、ヒーローセクション背景、セクション区切り、カードの装飾、さらにはアプリアイコンとしても使われています。この SVG Blob ジェネレーターを使えば、数個のスライダーで独自の完全に滑らかな blob を作成し、SVG をコピーするかダウンロードして、あらゆるプロジェクトに利用できます。

Blob の構築方法

ジェネレーターは、指定した数のアンカーポイントを円周上に均等に配置し、選択した ランダム性 の値に基づいて各ポイントの半径をランダムにずらします。ポイントは Catmull–Rom スプラインから導出された 3 次ベジエ曲線で接続され、どれほど基礎点が乱雑でも、目に見える角のないクリーンで連続した輪郭が保証されます。

決定論的なシードがすべての乱数決定を制御するため、同じ設定は常に完全に同じ blob を生成します。再生成 ボタンで他の設定を変えずに新しい形状を順に試せます。

カスタマイズオプション

• 複雑さ — アンカーポイントの数（3〜20）。低い値は柔らかく丸みを帯びた blob を生成し、高い値は波打つ複雑な輪郭を生成します。
• ランダム性 — 各ポイントが基準半径からどれだけ離れられるか。0 は円、最大値は劇的に有機的な形状になります。
• シード — 結果を再現可能にする整数。同じシードなら常に同じ形状が得られます。
• 塗りつぶし — ソリッドカラーまたは角度調整可能な 2 段階の線形グラデーションを選択。
• ストローク — 色と太さを設定可能な任意の輪郭線。

出力形式

ジェネレーターはクリーンで最小限の SVG マークアップを生成します。HTML ドキュメント、React コンポーネント、Figma ファイル、または SVG を受け入れる任意のデザインツールに直接貼り付け可能です。コードをワンクリックでクリップボードにコピー、または単独の .svg ファイルとしてダウンロードできます。

よくある用途

• ヒーロー背景とランディングページのアクセント
• アバター風の画像マスク
• 機能カード背面の装飾シェイプ
• 抽象的なバッジやステッカー風 UI 要素
• セクション間の blob トランジション
• プレゼンテーションスライドの装飾

出力は純粋な SVG なので、どの解像度でも鮮明にスケールし、ファイルサイズは極小で、CSS や JavaScript でアニメーション化することも可能です。さらに調整したい場合は、Illustrator、Figma、Inkscape などで生成されたパスを編集することもできます。