SVG Blob生成器
有機的な丸みを帯びたBlob形状のSVGを自動生成。 ランダム性や複雑さを調整してWebデザインの装飾に使える。
#6366f1
プレビュー
SVG
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path d="M 270.05 200.00 C 270.25 233.61, 313.10 272.60, 301.43 301.43 C 289.75 330.26, 229.50 377.27, 200.00 372.96 C 170.50 368.65, 144.88 304.39, 124.44 275.56 C 103.99 246.74, 76.22 224.08, 77.33 200.00 C 78.43 175.92, 110.63 165.51, 131.07 131.07 C 151.52 96.63, 171.81 -1.41, 200.00 -6.62 C 228.19 -11.84, 288.54 65.35, 300.21 99.79 C 311.89 134.22, 269.84 166.39, 270.05 200.00 Z" fill="#6366f1" />
</svg>このツールをシェア
📖
使い方
Step 1
パラメータ設定
複雑さ・ランダムさ・サイズなどのパラメータを設定
→
Step 2
Blob生成
ランダムなBlob形状を生成・プレビュー
→
Step 3
SVGコピー
SVGコードまたは画像としてダウンロード
✨
このツールの特徴
ワンクリック生成
ボタンひとつでユニークなBlob形状を即座に生成
カスタマイズ自在
複雑さ・ランダム度・色・グラデーションを自由に調整
複数出力形式
SVGコード・SVGファイル・PNG画像など複数形式でエクスポート
❓
よくある質問
ランダムに生成される有機的な丸みを帯びた不定形シェイプです。Webデザインの装飾要素として人気があります。
🔗関連ツール
🎨
デザインカラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
🎨
デザインカラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
🎨
デザイン画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
🎯
デザイン画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
🌈
デザインCSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
🔲
デザインCSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。