仕組みと用途
ウェブデザインの背景やアクセントとして人気の高い「Blob（流体シェイプ）」を、プロシージャル・アルゴリズムを用いてランダムに生成します。生成アルゴリズムは、指定された頂点数と形状の不規則性（凹凸の度合い）のパラメータに基づき、滑らかなSVGのパスデータを計算します。
単純な円形に近い形から、アメーバのような複雑で有機的な図形まで、スライダーを動かすだけで瞬時に作成可能です。サーバーへの通信を行わず、すべてお使いのブラウザ上でJavaScriptによって処理されるため、動作は非常に高速です。
SVGとアニメーションの注意点
生成される図形は常に指定されたパラメータ範囲内でのランダム生成となるため、「特定の場所だけを少しへこませる」といったピクセル単位の厳密なアウトライン調整はできません。また、画像形式としての書き出しはSVGのみに限定されており、PNGなどのラスタ画像が必要な場合は別途変換が必要です。
CSSやJavaScriptを使って2つのBlob間でモーフィング（変形）アニメーションを実装したい場合、必ず両方のSVGパスの「頂点数」が完全に一致している必要があります。頂点数が異なるパス同士を補間しようとすると、アニメーションが破綻してしまうため注意してください。
コードの実装とクリッピングマスク
作成したBlobは、SVGファイルとしてダウンロードするだけでなく、SVGのコードを直接コピーしてHTMLやCSSにそのまま貼り付けることができます。コードには不要なメタデータが含まれないため、ファイルサイズも軽量に保たれます。
単なる背景グラフィックとしての利用にとどまらず、<clipPath>タグで画像を囲んだり、CSSのmask-imageプロパティとして指定したりすることで、写真や要素を流体シェイプの形に切り抜くクリッピングマスクとしても非常に有用です。
よくある質問
2つのBlob間で変形アニメーションを作るにはどうすればよいですか？
CSSのtransitionプロパティやアニメーションライブラリを利用してパスデータを変化させます。ただし、変形前後のSVGパスで頂点数が完全に一致している必要があります。本ツールで生成する際は「頂点数」の値を同じにして2つの形を作成してください。
シェイプのギザギザ感や滑らかさはどのパラメータで制御しますか？
「不規則性」のパラメータで調整します。この値を高くすると各頂点の配置が中心から大きくブレるため、より凹凸の激しい有機的な形状になります。逆に低く設定すると、真円に近い滑らかな形になります。
生成されたSVGはスマートフォンなどの画面サイズに応答（レスポンシブ）しますか？
はい、SVG形式で生成されるため、解像度や画面サイズに依存せず常に鮮明に表示されます。親要素のサイズに合わせて自動で拡大縮小させたい場合は、コピーしたコード内の幅と高さの指定を削除するか、CSSで幅を100%に指定してください。
生成したBlobを使って画像を切り抜く（マスクする）ことは可能ですか？
可能です。インラインSVG内でclipPathタグ内に生成したパスを置き、画像を対象にマスクを適用できます。また、CSSのmask-imageプロパティにダウンロードしたSVGファイルのURLを指定することでも同様の切り抜きが実現できます。
ツールを利用する際、デザインのデータやアクセスログはサーバーに送信されますか？
いいえ、一切送信されません。すべての計算とSVGコードの生成処理は、ユーザーのブラウザ上で実行されます。そのため、オフライン環境でも動作し、高いプライバシーと安全性が保たれています。
ツールの不具合や改善案はありますか。 フィードバックを送る