Menu

SVGブロブジェネレーター

ランダムで滑らかなオーガニックSVG形状を生成 — SVGまたはCSS clip-pathをコピー。

最終更新

SVGマークアップ
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z" fill="#7fb2ff"/>
</svg>
CSS clip-path
clip-path: path('M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z');

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

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

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

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

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

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

ブロブを生成する手順

  1. 点の数を選択

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

  2. ランダム性を設定

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

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

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

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

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

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

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

用途適用方法注意点
ヒーロー背景SVGを埋め込み、コンテンツの背後に絶対配置コントラストを保つ — ブロブ上のテキストは読みやすい色が必要
画像マスク<img> に CSS clip-path: path('…') を適用画像ソースは依然としてダウンロードされる — クリップは視覚のみ
アバター形状プロフィール写真をclip-path付きのdivでラップ円で十分ならborder-radiusのみを使用 — clip-pathは再描画コストが高い
セクション区切りセクションの下端に沿って広いブロブを伸ばすviewBox preserveAspectRatioを使用して、ワイド画面でも形状が正しく保たれるように
装飾アクセント異なるサイズで半透明のブロブを複数配置アニメーションは控えめに — 大きな塗りつぶしパスの再描画はCPUを消費
ブランドイラストブロブをテキストやアイコンと組み合わせるブランドアイデンティティを保つために一貫した形状スタイルを選ぶ

試したいブロブの例

ヒーローセクションにブロブを配置

HTML
<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>
CSS
.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

絶対配置されたSVGが見出しの後ろに座ります。backdrop-filterなしでも上のテキストが読みやすいように不透明度を下げます。

画像をブロブにマスク

CSS
.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');}

clip-path はすべての最新ブラウザでサポートされています。パス座標は400×400 viewBoxを前提としています — クリップがきれいに整列するように画像をそのボックスにスケールします。

装飾背景としての2つの柔らかいブロブ

HTML
<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>
CSS
.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 を継承すること。デフォルトのベースラインギャップは形状の下に数ピクセル残します。

よくある質問

デザインにおけるブロブとは?
ブロブは滑らかな曲線で作られた有機的で非対称な閉じた形状です。円よりも親しみやすく、フリーハンドの形状よりも洗練されているため、モダンなウェブデザインで人気です — ヒーロー背景、バッジ、アバターマスクなど。
生成されたSVGは商用利用無料ですか?
はい。出力はあなた自身が生成したSVGマークアップだけです — ライセンスは付属せず、帰属表示も不要です。商用サイト、アプリ、デッキ、どこでも使用してください。
コピー後にパスを編集できますか?
はい — 出力は標準のSVG <path d="…"> です。Figma、Illustrator、Inkscape、または任意のベクターエディタで開いて、制御点を微調整します。または、ここで再生成して新しい形状をコピーします。
CSS clip-path出力をどう使いますか?
clip-path: path('M … Z') を任意のHTML要素に適用します。座標はSVG viewBoxと同じ空間内にあるため (デフォルトは400×400)、クリップが整列するようにクリップされた要素をそのボックスのサイズに設定するか、パス座標をスケールします。
Math.randomは毎回同じ形を返しますか?
いいえ、ただしこのツールはシード付き疑似乱数ジェネレーターを使用します。同じシードは常に同じブロブを生成します — だから気に入った形状が見つかるまでランダム化を押すことができ、SVG出力はその正確な形状を永遠に保持します。
ブロブはページを遅くしますか?
単一の静的SVGブロブは事実上無料です。ぼかしフィルター付きの複数のアニメーション化されたブロブはモバイルで高価になる可能性があります — DevToolsでプロファイリングし、パス属性アニメーションよりもtransform/opacityアニメーションを優先します。

詳しく見る

その他の開発者ツール

Coddy programming languages illustration

Coddyでコードを学ぼう

始める