¿Cómo uso una forma blob en un proyecto real?

Puedes usar el SVG descargado como fuente , como background-image CSS, o incrustar el código directamente en tu HTML. En CSS puedes aplicar clip-path con la función path() usando el string del path copiado.

Generador de Blob

Genera formas blob orgánicas aleatorias como SVG. Personaliza complejidad y aleatoriedad, elige tu color, luego descarga o copia el código SVG.

SVG instantáneoCopia pathDescarga gratis

① Ajusta complejidad, aleatoriedad y color ② Pulsa Aleatorio para generar ③ Copia SVG o descarga PNG

Complejidad (puntos)6

Aleatoriedad50

Semilla

Color de relleno#C9B89A

Cómo funciona

El blob se construye con N puntos equidistantes en un círculo, cada uno desplazado hacia dentro o fuera una cantidad aleatoria. Curvas de Bézier cúbicas conectan los puntos usando la conversión Catmull-Rom.

Complejidad

Controla el número de puntos de anclaje (6–10). Más puntos crean siluetas más intrincadas e irregulares. Menos puntos producen blobs más simples y redondeados.

Aleatoriedad

Controla cuánto puede desviarse cada punto del radio del círculo base. 0 produce un círculo perfecto; 100 produce la máxima irregularidad orgánica.

¿Qué es una forma blob y cómo se genera?

Las formas blob son siluetas suaves, orgánicas, similares a amebas, muy usadas en el diseño web moderno para fondos, ilustraciones, avatares y acentos de UI. Se generan algorítmicamente distribuyendo puntos de anclaje alrededor de un círculo a intervalos angulares iguales, luego desplazando cada punto radialmente. Las curvas de Bézier cúbicas — via conversión Catmull-Rom — conectan los puntos suavemente. El resultado es un path SVG incrustable en HTML o CSS mediante background-image, clip-path o <svg> inline, exportable a Figma, Illustrator e Inkscape.

Preguntas frecuentes

Una forma blob es una silueta suave, orgánica y redondeada que recuerda a una ameba natural. A diferencia de las formas geométricas, los blobs tienen contornos irregulares y fluidos. Se usan ampliamente en diseño web moderno para fondos, ilustraciones y decoraciones UI.

Los blobs se crean colocando N puntos de anclaje a intervalos angulares iguales alrededor de un círculo. Cada punto se desplaza aleatoriamente hacia dentro o fuera. Las curvas de Bézier cúbicas — derivadas mediante la conversión Catmull-Rom a Bézier — conectan todos los puntos en un path cerrado y suave.

La complejidad controla el número de puntos de anclaje (6–10). Más puntos permiten más variación local. La aleatoriedad controla cuánto puede desviarse cada punto del círculo base. A 0 todos los puntos están en el círculo; a 100 se desvían al máximo.

La herramienta produce un path SVG estándar con curvas de Bézier cúbicas usando el comando "C". El markup completo es un elemento <svg> con viewBox "0 0 300 300", usando coordenadas absolutas y terminando con "Z".

La forma generada es determinista con los mismos valores de seed, complejidad y aleatoriedad. Aleatoriedad muy alta con baja complejidad puede producir ocasionalmente paths que se auto-intersectan. SVG escala infinitamente sin pérdida de calidad.

Puedes usar el SVG descargado como fuente <img>, como background-image CSS, o incrustar el código <svg> directamente en tu HTML. En CSS puedes aplicar clip-path con la función path() usando el string del path copiado.

Sí. SVG y las curvas de Bézier cúbicas son compatibles con todos los navegadores modernos. El archivo descargado es un XML SVG compatible con Figma, Illustrator, Inkscape y Sketch.

¿Qué es una forma blob y cómo se genera?

Preguntas frecuentes

Explora nuestra red