SVGブロブジェネレーター

Q: 気に入ったブロブを再現できますか？

はい。**シード**を**アンカーポイント数**、**ランダムさ**、**サイズ**と一緒に保存しておけば、常に同じパスが得られます。

Q: ブロブを画像マスクとして使うには？

パスをSVGの` `に入れるか、ダウンロードしたSVGをCSSの`mask-image`で使います。

アンカーポイント数・ランダムさ・シードを調整して、なめらかな有機的SVGブロブを作成。単色・グラデーション・輪郭の塗りに対応し、.svg保存やCSS data URIコピーもできます。

ブロブ設定

塗り

色

アンカーポイント数

ランダムさ%

サイズpx

シード

同じ設定とシードからは常に同じ形が生成されます。

プレビュー

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>

CSS 背景（data URI）

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");

SVGブロブジェネレーターとは？

なめらかで有機的なブロブ（不定形）のシェイプをSVGで生成します。アンカーポイント数、形の不規則さ、サイズを調整し、単色・グラデーション・輪郭のいずれかの塗りを選んで、.svgファイルまたはCSS data URIとして出力できます。

SVGブロブジェネレーターの使い方

塗り（単色、グラデーション、輪郭のみ）と色を選びます。
アンカーポイント数、ランダムさ、サイズを設定します。
ランダム生成をクリックするか、シードを入力して特定の形を得ます。
.svg をダウンロードするか、SVG コードをコピーします。
またはCSS 背景（data URI）をコピーします。

例

入力

Points 4, randomness 0, size 100, solid #8a3ffc

出力

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>

SVGブロブジェネレーターを使うべき場面

装飾的な背景、画像マスク、アバターの枠、イラストのアクセントとして使えます。ランダムさを0にするとほぼ円になります。正確な幾何学図形が必要な場合は、CSSのborder-radiusやclip-pathを使ってください。

SVGブロブジェネレーターの仕組み

アンカーポイントは円周上（半径はサイズの45%）に等間隔で配置されます。各点の中心からの距離は、シード付き擬似乱数により最大で60%×ランダムさだけ縮められます。各点を通る閉じたCatmull-Romスプラインを三次ベジェに変換するため、角のないなめらかな輪郭が保証されます。グラデーションの塗りには、左上から右下へのSVG linearGradientを使います。