SVG波・ブロブジェネレーター
Webページのセクション区切りに使える波形と、背景装飾に使えるブロブ（有機的な図形）をSVGで作ります。山の数・振幅・ランダム性・色を調整するだけで、<svg>コードやCSSの背景画像を出力できます。シード値を覚えておけば、同じ形をいつでも再現できます。グラデーションの背景は CSSグラデーションジェネレーター、SVGの軽量化は SVG最適化ツール もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プレビュー
使い方
- 「形」で波かブロブを選びます。
- 山の数・波の大きさ・ランダム性・色などを調整します。気に入る形が出るまで「ランダム生成」を押します。
- 「SVGをコピー」またはCSSをコピーして貼り付けるか、「SVGをダウンロード」で保存します。
注意事項
- 波は横1440pxを基準にしたviewBoxで、preserveAspectRatio="none"により横幅いっぱいに引き伸ばして使う想定です。引き伸ばすため、縦横比は表示サイズに合わせて変わります。
- 同じシード・同じ設定なら、いつでも同じ形になります。ランダム性を0%にすると、シードに関係なく規則的な波・円になります。
- 山の数は1〜8、ブロブの頂点数は3〜16、高さは100〜600pxの範囲です。範囲外の値は自動で丸められます。
- CSS背景はSVGをdata URIとして埋め込みます。色を変えたい場合は、このツールで再生成してください。
用語解説
ブロブ（blob）
円をゆがめたような、角のない有機的な形。背景の装飾やアバターの枠などに使われる。
シード（seed）
乱数の出発点となる数値。同じシードからは必ず同じ乱数列が作られるため、ランダムな形でも再現できる。
viewBox
SVGの座標系の範囲を指定する属性。表示サイズに関係なく、この範囲が拡大縮小されて描画される。
ベジェ曲線
制御点で形を決める滑らかな曲線。SVGのpathではCコマンドで3次ベジェ曲線を描く。
よくある質問
波をページの横幅いっぱいに表示するにはどうしますか？
生成したSVGにはpreserveAspectRatio="none"が付いているため、width: 100%を指定した<svg>要素や、background-size: 100% 100%のCSSで横幅いっぱいに引き伸ばせます。高さはCSSのheightで調整してください。
気に入った形をあとで再現できますか？
できます。シードの数値と各設定が同じなら、いつでも同じ形が生成されます。気に入った形が出たらシードをメモしておいてください。
上側と下側のどちらを塗りつぶせばよいですか？
セクションの下端に置く波は「下側」（波の下が塗られ、上の背景が見える形）、上端に置く波は「上側」を選ぶと、次のセクションの色に自然につながります。
ブロブの色をあとから変えるには？
SVGコードのpath要素のfill属性の値を書き換えてください。CSS背景（data URI）を使う場合は、色を変えてこのツールで再生成するのが簡単です。
このページをシェア