SVG Blob ジェネレーター - 有機的なブロブ形状をオンラインで作成
モダンウェブデザインのためのランダムな有機的SVGブロブ形状を作成
よくある質問
SVG Blobジェネレーターとは何ですか？
SVG Blobジェネレーターは、SVG（Scalable Vector Graphics）形式でランダムな有機的な形状（「ブロブ」と呼ばれる）を作成するツールです。これらの形状は、円の周りにランダムな点を分布させ、滑らかな曲線で接続することで数学的に生成されます。ブロブは、その柔らかく有機的な外観から、モダンなウェブデザインで背景、ヒーローセクション、カード装飾、ブランディング要素として広く使用されています。
このSVG Blobジェネレーターの使い方は？
1. 複雑さスライダーを調整してブロブの曲線の数を制御します。2. ランダム性スライダーを調整して形状の不規則さを制御します。3. SVG viewBoxのサイズを設定します。4. 塗りタイプ（単色またはグラデーション）を選択し、色を指定します。5. ランダム生成をクリックして異なるブロブを生成します。6. 気に入った形状が見つかったら、SVGコードをコピーするかSVG/PNGファイルをダウンロードします。
デザインデータは安全ですか？サーバーに送信されますか？
デザインデータは100%安全で、ブラウザの外に出ることはありません。すべてのブロブ生成はJavaScriptの数学アルゴリズムを使用してクライアントサイドで実行されます。データはサーバーに送信されません。そのため、独自のブランドワークや機密デザインプロジェクトにも安全にご使用いただけます。
複雑さとランダム性の違いは何ですか？
複雑さはブロブの生成に使用される制御点の数を制御します。点が多いほどより多くの曲線を持つ形状が作られ、点が少ないほどよりシンプルで丸い形状になります。ランダム性は各点が完全な円からどれだけ逸脱するかを制御します。低いランダム性はほぼ円形の形状を、高いランダム性は不規則で有機的な形状を作ります。
生成されたSVGをウェブプロジェクトで使用できますか？
はい、生成されたSVGコードはあらゆるウェブプロジェクトで直接使用できます。HTMLにインラインで埋め込んだり、React/Vueコンポーネントとして使用したり、外部SVGファイルとして参照したり、data URIを通じてCSS background-imageとして使用できます。SVGは標準準拠で、すべてのモダンブラウザで動作します。
ウェブデザインにおけるSVGブロブの一般的な使用例は？
SVGブロブは、ヒーローセクションの背景、カードやコンテナの装飾、画像マスクとクリップパス、ローディングアニメーション、ロゴやブランディング要素、セクションディバイダー、浮遊装飾要素、グラデーション背景などに広く使用されています。有機的な形状は、四角形主体のウェブレイアウトに視覚的な面白さとモダンな雰囲気を加えます。
ブロブにPNGやJPEGではなくSVG形式を使う理由は？
SVGにはいくつかの利点があります：品質劣化なしの無限スケーリング、ラスター画像と比較して小さいファイルサイズ、コードによる簡単な色カスタマイズ、CSS/JSアニメーションサポート、デフォルトで透明な背景、テキストベースのマークアップのためSEOフレンドリー。SVGブロブはどの画面サイズや解像度でも鮮明さを保ちます。
コード例
// Generate an organic SVG blob shape in JavaScript
// Seeded random number generator (Mulberry32)
function createSeededRandom(seed) {
return function () {
seed |= 0;
seed = (seed + 0x6d2b79f5) | 0;
let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
// Generate blob points using polar coordinates with random deviation
function generateBlobPoints(numPoints, radius, randomness, seed) {
const rng = createSeededRandom(seed);
const points = [];
const angleStep = (Math.PI * 2) / numPoints;
for (let i = 0; i < numPoints; i++) {
const theta = i * angleStep;
const deviation = 1 + (rng() - 0.5) * (randomness / 50);
const r = radius * deviation;
points.push({
x: Math.cos(theta) * r,
y: Math.sin(theta) * r,
});
}
return points;
}
// Convert points to smooth SVG path using Catmull-Rom spline
function pointsToSvgPath(points, center) {
const n = points.length;
let d = `M ${points[0].x + center} ${points[0].y + center}`;
for (let i = 0; i < n; i++) {
const p0 = points[(i - 1 + n) % n];
const p1 = points[i];
const p2 = points[(i + 1) % n];
const p3 = points[(i + 2) % n];
const cp1x = p1.x + (p2.x - p0.x) / 6;
const cp1y = p1.y + (p2.y - p0.y) / 6;
const cp2x = p2.x - (p3.x - p1.x) / 6;
const cp2y = p2.y - (p3.y - p1.y) / 6;
d += ` C ${cp1x + center} ${cp1y + center}, ${cp2x + center} ${cp2y + center}, ${p2.x + center} ${p2.y + center}`;
}
return d + " Z";
}
// Generate complete SVG string
function generateBlobSvg(options = {}) {
const {
seed = Math.floor(Math.random() * 100000),
complexity = 8,
randomness = 50,
size = 400,
color = "#6366f1",
} = options;
const center = size / 2;
const radius = size * 0.35;
const points = generateBlobPoints(complexity, radius, randomness, seed);
const path = pointsToSvgPath(points, center);
return `<svg viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
<path d="${path}" fill="${color}" />
</svg>`;
}
// Usage
const svg = generateBlobSvg({
seed: 42,
complexity: 10,
randomness: 60,
size: 400,
color: "#8b5cf6",
});
console.log(svg);
document.getElementById("blob-container").innerHTML = svg;