ブロブジェネレーター：SVGシェイプとアニメーションするCSSブロブ
ブロブジェネレーター
ブロブジェネレーター：ランダムなSVGブロブとCSSブロブアニメーション | We.Inc
ランダムな有機的ブロブをSVGパスとして、またはborder-radiusだけのCSSブロブとして生成し、コピーできる@keyframesで変形させられます。シードを使うので同じブロブを再現できます。
ブロブとは、写真、アイコン、ヒーローテキストの背後に置く、柔らかく不規則な閉じた形です。このジェネレーターは2つの方法で作成します。円周上の点をランダムにずらして描くSVGパスと、8つのborder-radiusのパーセント値を使う純粋なCSSです。CSS版は、コピーできる短い@keyframesアニメーションで形から形へ変形できます。
SVGブロブとCSSブロブ、どちらを使う？
- SVGパスのブロブ
- CSS border-radiusのブロブ
- 形の幅
- 凹凸の数は自由で、非常に不規則にできる
- 4辺が柔らかい卵や小石のような形
- 中身を入れられるか
- 背景画像またはマスクとして
- はい、テキストや画像を入れられる通常のボックスです
- 変形アニメーション
- JavaScriptまたはSMILが必要
- border-radiusに@keyframes
ブロブは硬いグリッドレイアウトを和らげ、ブランドに独自の形を与えます。ここでのブロブはすべてシード値から生成されるので、同じ設定とシードなら常に同じ形が再現されます。凹凸の多い形はSVGモードで試し、ゆっくり揺れるボックスが欲しいときはCSSモードに切り替えましょう。
- SVGモードかCSSモードを選びます。
- SVGモードでは、形の点の数と、各点が円からどれだけずれてよいかを設定します。シードを変えるたびに新しい形になります。
- CSSモードでは、「新しい形」を押すとborder-radiusの値が新しく生成され、「アニメーション」をオンにすると3つの形の間で変形します。
- SVGマークアップをコピーするか、.svgファイルをダウンロードするか、CSSとキーフレームをコピーします。
- 点の数を5〜8にし、ランダムさを中程度にすると最も親しみやすい形になります。点が多くランダムさが高いと、しぶきのように見えます。
- SVGブロブはmask-imageとして使うか、position: absoluteで写真の背後に置くと、テキストを選択できるままにできます。
- ブロブのアニメーションは6〜12秒とゆっくりにし、alternateで往復させると、動きが最初に急に戻ることがありません。
- 動きを減らしたい訪問者にはアニメーションをオフにしましょう。キーフレームの出力にはそのメディアクエリがすでに含まれています。
よくある質問
CSSブロブはどのような仕組みですか？
border-radiusでは、各角の水平方向と垂直方向の半径を個別に指定でき、4つの値、スラッシュ、さらに4つの値と書きます。各辺で接する2つの半径の合計が100パーセントになると、角が角丸の長方形ではなく、ひとつながりのなめらかな有機的輪郭になります。
CSSでブロブをアニメーションさせるには？
@keyframesに2つ以上のborder-radiusの値を入れ、ease-in-out、infinite、alternateでアニメーションを実行します。ブラウザーが各角の半径を補間するので、輪郭が形から形へなめらかに流れます。CSSモードで「アニメーション」をオンにすると、すぐに使えるキーフレームが得られます。
後で同じブロブを再現できますか？
はい。形は設定とシード値だけで決まります。シードを書き留めるか、コピーしたコードを保管しておけば、ジェネレーターがまったく同じ輪郭を再現します。
SVGブロブをclip-pathとして使えますか？
SVGが同じページにあればclip-path: url(#id)で参照できます。また、d属性をclip-path: path()に貼り付ければ固定ピクセルサイズで使えます。要素に合わせて拡大縮小するなら、.svgファイルをmask-imageで使うのが最も簡単です。
SVGブロブの描き方
- ジェネレーターは円周上に均等に点を置き、ランダムさのスライダーで決まるランダムな量だけ各点を内側か外側に動かします。点を3次ベジェ曲線の区間でなめらかにつなぐので、鋭い角はできません。
- 点が少なくランダムさが低いと小石のように、点が多くランダムさが高いとしぶきや雲のようになります。
JavaScriptを使わないブロブアニメーション
- スタイルシートでSVGパスを変形できるCSSのdプロパティは、MDNによるとBaselineではないため、一部の主要ブラウザーでは動作しません。そのため、アニメーションのオプションではborder-radiusを使っています。各角の半径は長さかパーセントなので、ブラウザーが自力でキーフレーム間を補間できます。
- 半径の変化に合わせてゆっくり回転させると、動きがより有機的に感じられます。背景にとどまるよう、穏やかに保ちましょう。
CSSブロブアニメーションの例
フォトフレームの背後で変形するブロブ
3つのborder-radiusの形を1つの往復アニメーションにし、ゆっくりした回転を加えています。reduced motionのクエリで、動きを減らしたい人には停止します。
8つの値を持つborder-radiusの読み方
スラッシュの前の値は水平方向の半径、後の値は垂直方向の半径で、それぞれ左上、右上、右下、左下の順です。
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%
ブロブメーカー
各形はプレビューの下に表示されるシードから生成されます。スライダーを変えるか新しいシードを出して、SVGまたはCSSをコピーしてください。
ブロブの種類
SVGブロブ
CSSブロブ
点の数：{n}
ランダムさ：{n}%
開始色
終了色
シード：{n}
新しい形
アニメーション（@keyframesを出力）
時間：{n}s
ブロブのプレビュー
SVGをコピー
CSSをコピー
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る