SVGブロブジェネレーター
この SVG ブロブ作成ツールは、なめらかな 3 次ベジェ曲線からランダムで有機的なブロブ形状を作成します。複雑さ、ランダム性、サイズ、塗りの色、グラデーションの有無を調整でき、SVG コードまたはファイルとして書き出せます。
6
5
300px
このツールについて
この SVG ブロブ作成ツールは、なめらかな 3 次ベジェ曲線からランダムで有機的なブロブ形状を作成します。複雑さ、ランダム性、サイズ、塗りの色、グラデーションの有無を調整でき、SVG コードまたはファイルとして書き出せます。
使い方
- 複雑さ(点の数)とランダム性を設定します。
- サイズと塗りの色を選ぶか、グラデーションを有効にします。
- 気に入る形になるまで「再生成」をクリックします。
- SVG コードをコピーするか、.svg ファイルをダウンロードします。
知っておきたいこと
- 各ブロブは、円周上の点を 3 次ベジェ曲線でつないだ 1 本の SVG パスです。
- 点が多いほど輪郭が複雑になり、ランダム性が高いほど円から離れた形になります。
- SVG のブロブはどのサイズでもくっきり表示され、容量は数百バイトしかありません。
- ブロブは背景の装飾、アバターの枠、セクションの区切りとして人気があります。
- SVG はインラインでも、img のソースとしても、CSS の背景としても使えます。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
ブロブの形を作るには?
ここで複雑さとランダム性を調整して「再生成」をクリックします。クリックするたびに新しいランダムな有機的形状が描かれ、SVG としてダウンロードできます。
ブロブは商用利用できますか?
はい。形状はお使いの端末上でランダムに生成されるので、どんなプロジェクトにも使えます。
SVG ブロブを背景に使うには?
ファイルを保存して background-image: url(blob.svg) で参照するか、SVG をインラインで貼り付けてコンテンツの背後に配置します。
ブロブをアニメーションさせられますか?
はい。CSS で回転や拡大縮小ができるほか、SMIL や JavaScript を使って同じ点の数を持つ 2 つのパスの間で変形させることもできます。