🫧 ブロブ(blob)シェイプ生成ツール

頂点の数と複雑さを調整すると、毎回異なる水滴のような有機的なblob図形が作られます。滑らかな曲線でつながったSVGコードをコピーして、ヒーロー背景やアバターマスク、装飾要素としてそのまま使えます。

使い方

1. 「新しいシェイプを生成」ボタンを押して、気に入った形になるまでランダムに回します。
2. 頂点の数と複雑さ(不規則さ)のスライダーで、丸みや凹凸を調整します。
3. 色を指定してから、下のSVGコードをコピーします。
4. HTMLに貼り付けるか、背景マスク(clip-path・mask)として活用します。

よくある質問

なぜ押すたびに形が変わるのですか?

円周に配置した各頂点の半径をランダムに揺らして作るためです。同じ設定でも「新しいシェイプを生成」を押すと、新しいシードでまったく違う形が出てきます。

曲線がどうしてこんなに滑らかなのですか?

頂点をCatmull-Romスプラインからキュービックベジェに変換してつなぎ合わせ、閉じた曲線を作っています。そのため角ばらずに滑らかにつながります。

作ったblobを商用で使ってもいいですか?

コードはブラウザで数学的に生成した純粋なSVG図形なので、著作権の心配なく自由に使えます。ただし特定のブランドロゴと似ていないかを最終確認するのは、参考用としてユーザーの責任です。