SVG Blob生成ツール
頂点数・ランダム度・サイズ・塗り色を調整して、なめらかな有機的blob図形をSVGで生成します。再生成・コピー・ダウンロードに対応。
プレビュー
6
45%
500
SVGコード
data-URI（CSS用）
使い方
1
形を調整する
頂点数（複雑さ）とランダム度のスライダーを動かして、blobの輪郭をお好みの形に調整します。
2
色とサイズを決める
塗りを単色またはグラデーションから選び、色とSVGのサイズを指定します。「再生成」で別パターンの形を試せます。
3
コードを取得する
SVGコードまたはCSS用のdata-URIをコピー、もしくはSVGファイルをダウンロードしてそのまま利用できます。
SVG Blobとは
blob（ブロブ）とは、円を不規則に変形させたなめらかで有機的な図形のことです。Webサイトの背景装飾、ヒーローセクション、アイコンの背景、SNS画像などに使われ、柔らかく親しみやすい印象を与えます。本ツールは頂点を円周上に配置し、ランダムに半径を変化させたうえで、なめらかな閉曲線（ベジェ曲線）でつないでblobを生成します。すべての処理はブラウザ内で完結します。
機能・特徴
- 頂点数・ランダム度の調整頂点数（複雑さ）とランダム度を自由に調整し、シンプルな形から複雑な形まで作成できます。
- なめらかな閉曲線Catmull-Rom補間によるベジェ曲線で、角のないなめらかな有機的フォルムを生成します。
- SVG / data-URI出力そのまま貼り付けられるSVGコードと、CSSのbackground等に使えるdata-URIを出力します。
- ブラウザ完結・無料会員登録・インストール不要。すべての処理はブラウザ内で行われ、データは送信されません。
活用シーン
- Webサイトの背景装飾・あしらい
- ヒーローセクションやLPのアクセント図形
- アイコンやアバターの背景マスク
- SNS投稿・サムネイルのデザイン素材
- プレゼン資料・バナーの装飾
よくある質問
SVG Blob生成ツールは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
data-URIはどう使えばいいですか？
コピーしたdata-URIは、CSSの background-image: url("...") や、imgタグの src 属性にそのまま指定できます。外部ファイルを読み込まずに画像を表示できるため、リクエスト数を減らせます。
生成したSVGは商用利用できますか？
はい、生成された図形はあなたが自由に利用できます。Webサイト・印刷物・SNSなど用途を問わず、商用・非商用を問わずご利用いただけます。
同じ形をもう一度作れますか？
「再生成」ボタンを押すたびにランダムな新しい形が作られます。気に入った形ができたら、その場でSVGコードをコピー・ダウンロードして保存してください。設定（頂点数・ランダム度・色・サイズ）を同じにしても、ランダム要素により形は毎回変わります。
入力した内容はサーバーに送信されますか？
いいえ、送信されません。図形の生成・プレビュー・コード出力を含むすべての処理はお使いのブラウザ内で完結します。安心してご利用いただけます。