SVGブロブジェネレーター
デザイン用の美しい有機的なSVGブロブ形状を生成します。
SVG
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg"> <defs><linearGradient id="g" gradientTransform="rotate(45 0.5 0.5)"><stop offset="0%" stop-color="#6366f1"/><stop offset="100%" stop-color="#ec4899"/></linearGradient></defs> <path d="M 452.81,300.00 C 459.68,354.34 456.02,471.39 414.75,498.76 C 373.48,526.12 261.47,497.32 205.20,464.19 C 148.94,431.06 78.41,356.90 77.15,300.00 C 75.90,243.10 148.28,143.98 197.67,122.77 C 247.07,101.55 330.98,143.16 373.50,172.70 C 416.02,202.24 445.93,245.66 452.81,300.00 Z" fill="url(#g)"/> </svg>
おすすめのツール
役に立つかもしれない厳選されたツール
有機的なSVGブロブ図形を生成する
概要
ブロブ（柔らかく不規則な有機的図形）は、背景・画像マスク・装飾アクセントとしてデザインに親しみやすく現代的な趣を加える人気の方法です。滑らかなブロブを手で描くのは難しいため、ブロブジェネレーターは調整・書き出し可能なランダムな有機図形をSVGで作ります。このツールはブラウザ内でブロブを作り、どのページにも入れられるきれいなSVGコードを提供します。
使い方（ステップ）
- 1
複雑さとランダムさを調整
点の数とブロブの不規則さを、図形がしっくりくるまで設定します。
- 2
色を選んで再生成
塗りの色を選び、気に入るものが見つかるまで新しいバリエーションを生成します。
- 3
SVGをコピー
生成されたSVGコードを取得または書き出し、ページやデザインに配置します。
仕組み
ジェネレーターは中心の周りに複数の点を散らした閉じたパスを作り、滑らかな曲線でつなぎ、距離をランダム化して不規則だがバランスの取れた図形にします。複雑さ（点の数）とランダムさ（どれだけ不揃いか）を調整し、色を選ぶとSVGを出力します。ベクターなので、どんな大きさでも鮮明に拡大します。すべてブラウザ内でローカルに実行されます。
こんなときに使う
テキストやイラストの背後に柔らかい背景図形を加えるとき。写真を長方形でなく有機的な輪郭にマスクするとき。ランディングページ用の親しみやすい装飾アクセントを作るとき。現代的で非幾何学的なヒーロー背景を作るとき。ブランドカラーで揃ったブロブ図形を作るとき。重い画像でなく軽いベクター図形を書き出すとき。
よくある質問
ベクターなので、SVGブロブはどんな大きさでも完璧に鮮明で、非常に軽く、値を1つ変えるだけで色を変えられます。同じ図形のラスター画像は重く、拡大するとぼやけます。
注意事項
生成されるブロブはすべてランダムなので、気に入ったものが見つかったらSVGコードを保存してください。再生成しても全く同じ図形は再現されません。複雑さが非常に高いとパスが大きくなり、滑らかにアニメーションしにくくなります。