SVG ブロブ生成

有機的なブロブ形状を作って SVG で保存

シード

R キーかスペースキーで新しい形を生成します。

SVG ブロブ生成の使い方

有機的なブロブ形状をランダムに生成し、SVG・PNG・React コンポーネントで書き出します。点の数、ゆらぎ、レイヤー、グラデーションを調整でき、モーフィングも付けられます。処理はすべてブラウザ内です。

「別の形にする」をクリックするか R キー・スペースキーを押して、気に入る形を探します。これまでの形は「最近の形」に残ります。

「形」で複雑さ、ゆらぎ、大きさ、レイヤーを調整します。

「色」で「パレット」を選ぶか、単色・グラデーションの「塗り」を設定します。輪郭だけにしたい場合は「スタイル」を「線のみ」にします。

キャンバスの「幅」と「高さ」を設定し、必要に応じて「背景色」や「モーフィング」をオンにします。

「SVG をダウンロード」をクリックするか、PNG の倍率を 1×・2×・4× から選んで PNG をクリックします。「SVG をコピー」「React をコピー」でコードをコピーすることもできます。

よくある質問

はい。形は「シード」で決まるため、同じシードと同じ設定なら必ず同じ形になります。数値を控えておき、「シード」に入力し直してください。

はい、初期状態では透明です。キャンバスを塗りつぶしたいときだけ「背景色」をオンにしてください。

「モーフィング」は SVG 標準の animate 要素を使うため、SVG と React の書き出しでは CSS や JavaScript なしで再生されます。PNG は常に静止画です。

「React をコピー」で SVG を返すコンポーネントが得られます。props は svg 要素に渡されるので、className や style を指定できます。

いいえ。形の計算も書き出しもすべてブラウザ内で行います。