Softonic

SVGジェットボリッジ生成器

ステップ 1 / 2
次へ

2018年頃から、ボロブ形状は従来の円形を完全に代替し、現代のユーザーインターフェースにおける「親しみやすい丸みのある背景」として定着しました。これらの形状はヒーローのイラストの背景、アバターのマスク、ランディングページ上の色の斑点として使用されます。このジェネレータは、円周を回るランダムウォークに基づいてボロブを生成し、二次ベジエ曲線で多角形を滑らかに処理することで、デザイナーが求める自然でわずかに揺れるような形状に変換します。制御点の数（複雑度）、走行の自由度（コントラスト）、ランダムシードを調整した後、SVGファイルをコピーするだけで使用できます。

ブロップの構築方法

  1. 1

    色と複雑さを選択してください

    複雑度は制御点の数（3～12）を設定します。ポイントが多いほどボリュームが増加します。

  2. 2

    コントラストを設定します

    コントラストは、各点がベース半径からどれだけずれているかを示します。低値ではほぼ円形、高値では急激に葉状に分かれます。

  3. 3

    種子を選択してください

    シードはブロップの形状を固定するランダム数です。同じシードで同じブロップが生成され、ヒットした場合は新しいものに変更されます。

  4. 4

    SVGをコピーします

    400×400のビーナックス内に1つの`<path>`を配置できます。SVGがサポートされている場所の任意に配置可能です。

ブロブパスの解剖学

生成器は、400×400のボックス領域（中心座標200, 200、底辺半径130）内にN個の点を均等に配置し、各点の半径を±contrastだけずらした後、すべての点対を二次ベジエ曲線で結ぶ。

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

midx, midyは現在の点と次の点の中間位置に位置しており、各曲線の端をこの位置に設定することで、多角形が自然な形状をとるようになります。

パラメータの参考表

設定 范囲 效果
複雑度 3～12 ローブの数。UIにとって最適な値は5～7です。
対比 0–100 ランダムウォークの振幅。30–60が自然な値です。
#シード 1–9999 確定的；同じシードでは、実行ごとに同じブロップが生成されます。
部色 十六進数 単一塗りつぶし、線画なし。必要に応じてfill-opacityを手動で追加します。

ブロブが最も効果的に機能する場所

  • 背景装飾、タイトルの後方、ヘローセクションの空き隅に配置します。
  • アバター用マスク：有機的なポートレートフレームには、パスをclip-pathとして適用してください。
  • イラストのアクセント、アイコンや数字の下にブランドカラーのスプロッチを配置する。
  • 画像マスク：CSS mask-imageを使用すると、ブロップ機能により写真を自然な切り抜き部分に切り込むことができます。

■ タップス

背景にはストロークのないドットを使用してください。ストロークがあるとステッカー風に見えるためです。 アニメーション付きモーフィングを行うには、同じ複雑さでありながら異なるシードを持つ2つのブロブを生成し、その後dアトリビュートをflubberまたはsvg-morpheusのようなライブラリでアニメーション化します。 <img src=blob.svg>を使用する代わりにSVGをインライン化してください。これにより、実行時にCSS変数を使って塗りつぶし色を変更できます。 ビューファインダーを維持しつつ、 blob を任意のコンテナにスケールさせたい場合は明示的な width="400" height="400" を削除してください。

よくある質問

シードはランダムウォーク開始前にPHPのsrand()を初期化します。同じシード → 同じrand()呼び出しの順列 → 同じポイントオフセット → 異ならないパスです。

はい、ただし両方のパスが命令数およびポイント数が同じである場合に限りです。複雑さを同一に保ち、シードのみを変更することで補間に適したペアを得ます。実際のアニメーションにはGSAP MorphSVGやflubberなどのトゥインニングライブラリを使用してください。

パス上の fill="#hex" を fill="url(#gradient-id)" に置き換え、<defs> ブロック内に <linearGradient> または <radialGradient> の定義を追加します。SVG をインラインした場合でも CSS のカスタムプロパティは正常に機能します。

クリーンですが、文字数が削減されていません。バイトサイズを気にする場合は、SVGOで一度処理してください。通常、20～30％の文字を削除できます。

いいえ。SVGはURLフォームのパラメータからリアルタイムで生成され、何の記録も行われません。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

このツールは他の言語でも利用できます