SVG blobとは？

blobとは、直線的な辺を持たない柔らかく有機的な形で、円と水しぶきの中間のようなものです。blobは現代のWebデザインで人気の装飾で、ヒーロー画像やイラストの背後、アバターのフレーム、セクションの背景、遊び心のあるボタンやバッジなどに使われます。ベクターグラフィックなので、どのようなサイズでも鮮明さを保ち、ファイルサイズも数百バイト程度に収まります。

ツールの説明

このツールは、ブラウザー上でランダムなblob形状をクリーンなSVGコードとして生成します。好みの形になるまで「ランダム化」を押し、凹凸の数、不規則さ、曲線の丸みを細かく調整できます。単色やグラデーションで塗りつぶしたり、アウトラインとして描画したりできるほか、複数の形状の間で滑らかに変形するループアニメーションを追加することもできます。結果はSVGまたはPNGとしてダウンロードでき、SVGマークアップ、CSS背景、CSS clip-pathとしてコピーすることもできます。

特徴

  • 再現可能なランダムblob：同じseedと設定を使うと、常に同じ形状になります
  • 丸い小石のような形から尖った星形まで、複雑さ、不規則さ、滑らかさを調整可能
  • 任意の色で、単色、グラデーション、またはアウトラインとして塗りつぶし可能
  • JavaScriptなしでSVGに組み込める、形状間をループする変形アニメーション
  • 選択したサイズのSVGまたは透明PNGとしてダウンロード可能
  • そのままコピーできるSVG、CSS背景、CSS clip-pathコード

仕組み

このツールは円の周囲に点を配置し、それぞれの点をランダムな量だけ内側へ移動させ、点を通る滑らかな閉曲線を描画します。曲線のサイズを正確に測定し、blobが画像の端から端まで収まるように拡大・縮小します。シード付き乱数生成器がすべての点を決定するため、シードに数字や単語を指定すると、後から同じblobを再現できます。アニメーションでは、同じ数の点を持つ複数のblobを1つのSVG animate要素に配置し、ブラウザーがそれらの間を補間します。

ヒント

  • 5～8個の点と中程度の不規則さを組み合わせると、典型的なblob形状になります。不規則さを低くすると、より穏やかでプロフェッショナルな印象になります。
  • クリスタルや宝石のような多角形にするには、滑らかさを0%まで下げます。
  • CSS clip-pathコードを使うと、写真や動画をblob形状に切り抜けます。
  • シードを書き留めるか、独自の単語をシードとして入力すると、後からblobを正確に再現できます。
  • 背景で落ち着いた印象を保てるよう、変形アニメーションは1ループあたり8～15秒程度のゆっくりした速度にします。