デザイン / SVG
SVGブロブジェネレーター（ランダムな有機形状）
背景やイラストに使える、滑らかでランダムなブロブ形状を作成できます。ポイント数とランダムさを選び、単色または2色のグラデーションを指定して、SVGをダウンロードまたはコピーしましょう。
SVGブロブジェネレーター（ランダムな有機形状）: ポイントを円周上に均等に配置し、それぞれをランダムな距離だけ中心に近づけてから、滑らかな閉じた曲線でつなぎます。ポイント数が少なくランダムさが大きいと凹凸のある形になり、ポイント数が多くランダムさが小さいと、なだらかでほぼ円形の形になります。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path d="M359.5,200 C360.7,243.5 315.4,319 278.8,336.4 C242.1,353.9 174.7,327.5 139.5,304.7 C104.4,282 69.5,237.5 68,200 C66.4,162.5 96.4,100.3 130.4,79.5 C164.4,58.7 233.7,55.4 271.9,75.5 C310.1,95.6 358.4,156.5 359.5,200 Z" fill="#63c42d"/></svg>
点を円周上に均等に配置し、それぞれをランダムな量だけ中心方向へ引き寄せ、滑らかな閉曲線でつなぎます。点を少なくしてランダム性を高めると、より凹凸のある形になります。ランダム性が0%の場合は円になります。ブロブは、写真やアイコン、見出しの背後に柔らかな背景を作ります。
用途
ブロブは、商品写真やアイコン、アバター、見出しの背後に柔らかな背景を作るのに適しています。テキストの背後に置く場合は、薄い色または低い不透明度の塗りつぶしを使って、テキストのコントラストを保ってください。すりガラス越しにブロブを表示するには、グラスモーフィズムジェネレーターと組み合わせます。
編集
出力は三次ベジェ曲線を使った1つのパスなので、どのベクターエディターでも開けます。いくつかの点を手動で変更する場合は、SVGエディターに貼り付けてください。
使い方
- ポイント数とランダムさを選びます。
- 単色またはグラデーションを選びます。
- 気に入った形になるまで新しいブロブを生成し、SVGをダウンロードまたはコピーします。
プライバシーと制限事項
形状はブラウザ内で描画されます。
関連ツール
よくある質問
ブロブの中に写真を入れるにはどうすればよいですか？
パスをコピーしてSVGのclipPathで使用するか、ブロブを保存して写真の上にCSSのmask-imageとして適用します。
ブロブをアニメーション化できますか？
はい。同じポイント数で2つのブロブを生成し、パスのd属性を一方からもう一方へアニメーションさせます。ポイント数をそろえると、モーフィングが滑らかになります。
サイズに制限はありますか？
SVGは400 × 400ですが、鮮明さを失わずに任意のサイズへ拡大・縮小できます。
無料ツール · ブラウザ内で · アカウント不要