SVGブロブジェネレーター – 有機的なSVG形状を作成
このSVGブロブジェネレーターは、円周上に配置されたN個のノイズ付きポイントを閉じたCatmull-Romスプラインで結ぶことで、シードから有機的な形状を作成します。シード、ポイント数、ランダム性、塗りつぶしを設定してブロブを生成します。SVG、同等のCSS clip-pathポリゴン、またはborder-radius近似値をコピーでき、2つのシード間でのアニメーション変形の切り替えも可能です。
SVGブロブジェネレーターは、シードから有機的なSVG形状を作成し、開発者がブロブ値をすばやく生成・コピーできるようにします。各形状は、円周上に配置されたN個のノイズ付きポイントを通る閉じたCatmull-Romスプラインとして構築されます。シード、ポイント数、ランダム性、塗りつぶしを設定して、手作業で値を考え出すことなく形状を生成できます。
生成されたブロブは3つの形式で利用できます: SVG、同等のCSS clip-pathポリゴン、border-radius近似値です。SVGはスプラインに基づく形状を使用し、他の結果は生成されたブロブのCSSに適した表現を提供します。2つのシード間のアニメーション変形を切り替えて、形状の変化を確認することもできます。利用可能な形式から、目的に合った結果を選べます。
SVGとCSSは、Webプロジェクトで形状を表現するための異なる方法を提供します。SVGはベクターマークアップを提供し、CSS clip-pathやborder-radiusの値はスタイリング用にコピーできます。生成されたブロブを必要な形式に変換することで、コード、テストフィクスチャ、シードデータで形状を使いやすくなります。このツールは一度にまとめて生成することもサポートしており、複数の値が必要な場合に便利です。
ジェネレーターは完全にブラウザ上で動作します。入力はお使いのデバイスで処理され、アップロード、保存、またはサーバーに送信されることはありません。ページの読み込み後はオフラインでも動作します。データを他に送信せずにブロブ値を生成・コピーしたい場合に便利です。
このツールは、Webプロジェクト、テスト、サンプルデータ用に有機的な形状を必要とするあらゆる経験レベルの開発者やDevOpsエンジニア向けに設計されています。デザイナーやその他のクリエイターも、さまざまなブロブ値を生成し、作業に合った表現をコピーできます。
手順1: シード、ポイント数、ランダム性、塗りつぶしなどの利用可能なオプションを設定します。これらの設定が生成されるブロブの形状を決めます。
手順2: ブロブを生成して、シードと設定されたポイントから有機的な形状を作成します。
手順3: 利用可能な結果形式を確認します: SVG、CSS clip-pathポリゴン、border-radius近似値です。
手順4: プロジェクトに必要な値をコピーするか、2つのシード間のアニメーション変形を切り替えて変化する形状をプレビューします。
用途: テスト、フィクスチャ、シードデータ用のすぐに使えるSVGブロブ値を、形状データを手書きする代わりに作成します。
用途: プロジェクトやテストセット用に複数の形状が必要な場合に、ブロブ値をまとめて一括生成します。
用途: ランダム性を使って、手入力で値を推測するのではなく、さまざまなブロブ形状を生成します。
用途: デザインやWebページ用のスケーラブルなベクター形状が必要な場合に、SVGブロブをコピーします。
用途: 生成された形状のCSSベースのバージョンが欲しい場合に、CSS clip-pathポリゴン出力を使用します。
用途: border-radius近似値が形状のスタイリングにより適している場合に、それをコピーします。