6
5
300px

このツールについて

この SVG ブロブ作成ツールは、なめらかな 3 次ベジェ曲線からランダムで有機的なブロブ形状を作成します。複雑さ、ランダム性、サイズ、塗りの色、グラデーションの有無を調整でき、SVG コードまたはファイルとして書き出せます。

使い方

  1. 複雑さ(点の数)とランダム性を設定します。
  2. サイズと塗りの色を選ぶか、グラデーションを有効にします。
  3. 気に入る形になるまで「再生成」をクリックします。
  4. SVG コードをコピーするか、.svg ファイルをダウンロードします。

知っておきたいこと

  • 各ブロブは、円周上の点を 3 次ベジェ曲線でつないだ 1 本の SVG パスです。
  • 点が多いほど輪郭が複雑になり、ランダム性が高いほど円から離れた形になります。
  • SVG のブロブはどのサイズでもくっきり表示され、容量は数百バイトしかありません。
  • ブロブは背景の装飾、アバターの枠、セクションの区切りとして人気があります。
  • SVG はインラインでも、img のソースとしても、CSS の背景としても使えます。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問

ブロブの形を作るには?

ここで複雑さとランダム性を調整して「再生成」をクリックします。クリックするたびに新しいランダムな有機的形状が描かれ、SVG としてダウンロードできます。

ブロブは商用利用できますか?

はい。形状はお使いの端末上でランダムに生成されるので、どんなプロジェクトにも使えます。

SVG ブロブを背景に使うには?

ファイルを保存して background-image: url(blob.svg) で参照するか、SVG をインラインで貼り付けてコンテンツの背後に配置します。

ブロブをアニメーションさせられますか?

はい。CSS で回転や拡大縮小ができるほか、SMIL や JavaScript を使って同じ点の数を持つ 2 つのパスの間で変形させることもできます。