このツールについて
このような有機的な「ブロブ」形状は、現代のウェブデザインの定番要素です。ヒーローテキストの背後にある柔らかい装飾背景として、普通の写真を不規則で手描き風のシルエットに変える画像マスクとして、あるいはアイコンやカードまわりの遊び心のあるアクセントとして使われます。このジェネレーターは、ランダムに配置したいくつかの点から滑らかな閉じたSVGパスを構築し、Catmull-Romカーブで角を丸めることで、ギザギザの多角形ではなく自然な流れの輪郭を作ります。
シード番号はその形状全体の指紋のようなものです。何度再生成しても、同じシードからは必ずまったく同じブロブが生成されます。つまり、ポイント数と不規則度のスライダーを気に入った形になるまで調整し、シードをメモしておけば、後で同じブロブを再現できます。またシード番号をチームメイトに共有すれば、別のランダムな形ではなく、まったく同じ形を得てもらえます。
よくある質問
同じシードが常に同じブロブを生成するのはなぜですか?
形状はあなたの数値をシードとした決定論的な疑似乱数関数によって生成されるため、同じシードは常に全く同じ形状を再現します。特定のブロブを保存・共有したい場合に便利です。
生成されたSVGをCSS背景として直接使用できますか?
はい。SVGファイルをダウンロードして background-image: url(...) で参照するか、パスのマークアップをインラインの<svg>要素に直接コピーしてください。