Blob Generator

使い方

1. 頂点数を設定します。3 個や 4 個は柔らかい三角形や角丸四角形に見え、8 個以上は円に近づきます。
2. ランダム度を動かして各頂点を理想の楕円からずらします。0 は正規の楕円、大きいほど凹凸が増します。
3. なめらかさを動かして補間の仕方を変えます。低い値は角が残り、高い値は輪郭がひと続きの弧になります。
4. 任意のシード文字列を入力します。同じシードは常に同じ blob を再生成するので、1 つのスライダーを動かしても輪郭は安定します。
5. 出力形式を選び、幅・高さ・色を調整してコードをコピーします。SVG パスは閉じた Catmull-Rom 曲線を 3 次ベジエに変換したものです。

こんなときに

• ヒーロー領域の背景 —— 見出しの後ろに blob を置くだけで画像素材なしに奥行きが出る。
• イラストのアクセント —— SVG パスを図解や空状態に差し込む。
• アバターやカードのマスク —— border-radius 版は余分なマークアップなしで div を異形にできる。
• ロゴやバッジの下書き —— 輪郭を素早く試し、確定してからベクター化する。

プライバシーについて

形状はページ内のシード付き乱数発生器で計算されます。ギャラリーもアップロードもサーバー通信もありません。コピーされるコードは、プレビューが描いたものそのものです。

FAQ

Q: シードは実際に何をしているのですか？ A: 小さな決定論的な乱数関数に渡されます。頂点のオフセットも border-radius の百分比もすべてこれから生まれるため、同じシードはどの機種でもどの日でも同じ blob を出します。

Q: なぜ SVG パスと border-radius 版は見た目が違うのですか？ A: 同一パラメータの 2 つの独立した解釈です。パスは自由な輪郭であり、8 つの border-radius 百分比は矩形の角を曲げるだけです。飾る対象に合う方を選んでください。

Q: blob をアニメーションにするには？ A: 出力は静的なので、動かしたい場合は近いシードで 2〜3 個の blob を作り、SMIL や JavaScript でパスデータを補間するか、border-radius の値を CSS トランジションさせます。

Q: SVG はデザインツールで使えますか？ A: はい。viewBox 付きの独立したインライン SVG なので、Figma・Illustrator・HTML ファイルにそのまま貼り付けられ、任意のサイズに拡縮できます。