Generador de Blob SVG - Crea Formas Orgánicas de Blob en Línea
Crea formas orgánicas aleatorias de blob SVG para diseño web moderno
Preguntas Frecuentes
¿Qué es un generador de blob SVG?
Un generador de blob SVG es una herramienta que crea formas orgánicas aleatorias (llamadas "blobs") en formato SVG (Scalable Vector Graphics). Estas formas se generan matemáticamente distribuyendo puntos aleatorios alrededor de un círculo y conectándolos con curvas suaves. Los blobs se utilizan ampliamente en el diseño web moderno para fondos, secciones hero, decoraciones de tarjetas y elementos de marca debido a su apariencia suave y orgánica.
¿Cómo uso este generador de blob SVG?
1. Ajusta el control de Complejidad para controlar cuántas curvas tiene el blob. 2. Ajusta el control de Aleatoriedad para controlar cuán orgánica/irregular es la forma. 3. Establece el Tamaño para las dimensiones del viewBox SVG. 4. Elige un Tipo de relleno (color sólido o degradado) y selecciona tus colores. 5. Haz clic en Aleatorio para generar diferentes variaciones de blob. 6. Copia el código SVG o descarga el archivo SVG/PNG cuando encuentres una forma que te guste.
¿Están seguros mis datos de diseño? ¿Se envían a un servidor?
Tus datos de diseño están 100% seguros y nunca salen de tu navegador. Toda la generación de blobs se realiza del lado del cliente utilizando algoritmos matemáticos de JavaScript. No se transmite ningún dato a ningún servidor. Esto hace que la herramienta sea segura para trabajo de marca propietario y proyectos de diseño confidenciales.
¿Cuál es la diferencia entre complejidad y aleatoriedad?
La complejidad controla el número de puntos de control utilizados para generar el blob. Más puntos crean formas con más curvas y detalle, mientras que menos puntos crean formas más simples y redondeadas. La aleatoriedad controla cuánto se desvía cada punto de un círculo perfecto. Baja aleatoriedad produce formas casi circulares, mientras que alta aleatoriedad crea formas orgánicas irregulares.
¿Puedo usar el SVG generado en mi proyecto web?
Sí, el código SVG generado se puede usar directamente en cualquier proyecto web. Puedes incrustarlo en línea en HTML, usarlo como componente React/Vue, referenciarlo como archivo SVG externo o usarlo como CSS background-image mediante data URI. El SVG cumple con los estándares y funciona en todos los navegadores modernos.
¿Cuáles son los usos comunes de los blobs SVG en diseño web?
Los blobs SVG se usan comúnmente para: fondos de secciones hero, decoraciones de tarjetas y contenedores, máscaras de imagen y clip paths, animaciones de carga/placeholder, elementos de logo y marca, divisores de sección, elementos decorativos flotantes y fondos de degradado. Su forma orgánica agrega interés visual y una sensación moderna a los diseños web rectangulares.
¿Por qué usar formato SVG en lugar de PNG o JPEG para blobs?
SVG (Scalable Vector Graphics) ofrece varias ventajas: escalabilidad infinita sin pérdida de calidad, tamaños de archivo pequeños comparados con imágenes rasterizadas, fácil personalización de colores mediante código, soporte de animación con CSS/JS, fondos transparentes por defecto y es amigable con SEO ya que es marcado basado en texto. Los blobs SVG permanecen nítidos en cualquier tamaño de pantalla o resolución.
Ejemplos de Código
// 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;