SVGブロブジェネレーター

SVGブロブジェネレーターとは?

SVGブロブジェネレーターは、円の周りで点をサンプリングし、滑らかなベジェ曲線で接続することで閉じた有機形状を作成します。結果は柔らかく流動的なシルエット — マーケティングヒーローの後ろ、プロフィール写真の周り、またはランディングページのカラフルな背景ブロブとして見るような形状です。

ブロブは幾何学とランダム性のスイートスポットに位置します。点の数を調整して、ジェリービーン (3-4)、小石 (5-6)、カオス (10+) の形状を取得します。ランダム性スライダーを動かして、ほぼ円形から大きく歪んだものまで移行します。いつでも新しいシードをロールするためにダイスを押します。

すべてブラウザで動作します。コピーペーストSVGスニペット、ダウンロード可能な .svg ファイル、または任意のHTML要素に直接適用してブロブ形状にマスクできるCSS clip-path 値としてエクスポートします。

ブロブを作りながら学ぶこと

• 三次ベジェ曲線がブロブに滑らかさを与えます — 隣接する点のペアごとに2つの制御ハンドルがあり、各接合部で接線が連続するように計算されています。
• ここで使用されるカトマル-ロムスプラインは、隣接点からこれらのハンドルを自動的に派生させるので、曲線を滑らかに保つためにコントロールポイントを手動で調整する必要はありません。
• CSS clip-path: path(...) は、レイアウトボックスに影響を与えることなく、任意の要素 — 画像、div、ビデオ — にブロブ形状を適用できます。

ブロブを生成する手順

1. 1

   点の数を選択

   点が少ない (3-5) とジェリービーン状ブロブができます。点が多い (8-12) と小石のような不規則な形状になります。

2. 2

   ランダム性を設定

   0% は円です。50% は穏やかなブロブ形状の曲線を与えます。100% は激しく歪んだドラマチックなシルエットを与えます。

3. 3

   色またはグラデーションを選択

   単色塗りつぶしを使用するか、グラデーションを有効にして2色と角度を選択します。人気のヒーローセクションパターンに一致します。

4. 4

   ランダム化してエクスポート

   ダイスを押して新しいシードをロールします。気に入ったら、SVGをコピー、CSS clip-pathをコピー、または .svg ファイルをダウンロードします。

ブロブが最も効果を発揮する場所

ブロブを使う3つの一般的な方法と注意点。

試したいブロブの例

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Coddyへようこそ</h1></section>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

SVGブロブのよくある間違い

• viewBox を忘れて <svg> に固定の幅/高さを与えること。形状はレスポンシブにスケールしません — viewBoxに加えてCSSでwidth/heightを使用します。
• 毎フレーム大きな塗りつぶしパスをアニメーションすること。パスのラスタライゼーションは高価です。transform/opacityを使用するか、GPUが処理するようにCSS filterで事前ぼかしを使用します。
• インライン <svg> をTailwind/Bootstrapにコピーして block の代わりに display: inline を継承すること。デフォルトのベースラインギャップは形状の下に数ピクセル残します。

よくある質問