Generador de blobs: formas SVG y blobs CSS animados
Generador de blobs
Generador de blobs: blobs SVG aleatorios y animación CSS | We.Inc
Genera formas orgánicas aleatorias como paths SVG, o como un blob de CSS puro con border-radius que se transforma con @keyframes que puedes copiar. Con semilla, para que puedas recuperar el mismo blob.
Un blob es una forma cerrada, suave e irregular que se usa detrás de fotos, iconos y textos de portada. Este generador los crea de dos maneras: como un path SVG trazado a través de puntos desplazados al azar alrededor de un círculo, o como CSS puro con ocho porcentajes de border-radius. La versión CSS puede transformarse entre formas con una breve animación @keyframes que copias.
¿Blob SVG o blob CSS?
Blob con path SVG
Blob con border-radius en CSS
Variedad de formas
Cualquier número de bultos, muy irregular
Formas de huevo y de guijarro con cuatro lados suaves
Puede contener contenido
Como imagen de fondo o máscara
Sí, es una caja normal con texto o una imagen dentro
Animación de transformación
Necesita JavaScript o SMIL
@keyframes sobre border-radius
Resultado
Un elemento svg o un archivo .svg
Unas pocas líneas de CSS
Los blobs suavizan los diseños de cuadrícula rígidos y dan a una marca una forma propia. Cada blob de aquí sale de un número semilla, así que los mismos ajustes y la misma semilla reconstruyen siempre la misma forma. Prueba el modo SVG para formas con muchos lóbulos y cambia al modo CSS cuando quieras una caja que se ondule despacio.
Elige el modo SVG o el modo CSS.
En el modo SVG, define cuántos puntos tiene la forma y cuánto puede alejarse cada punto del círculo. Cada semilla nueva da una forma nueva.
En el modo CSS, pulsa Nueva forma para generar valores de border-radius nuevos y activa Animar para obtener una transformación entre tres formas.
Copia el marcado SVG, descarga el archivo .svg o copia el CSS y los keyframes.
Entre 5 y 8 puntos con una aleatoriedad media dan las formas más amables. Muchos puntos con mucha aleatoriedad parecen salpicaduras.
Usa el blob SVG como mask-image o detrás de una foto con position: absolute para que el texto siga siendo seleccionable.
Mantén las animaciones de blobs lentas, de 6 a 12 segundos, y alterna su dirección para que el movimiento nunca salte de golpe al inicio.
Desactiva la animación para los visitantes que prefieren movimiento reducido. Los keyframes generados ya incluyen esa media query.
Preguntas frecuentes
¿Cómo funciona el blob CSS?
border-radius acepta radios horizontales y verticales separados para cada esquina, escritos como cuatro valores, una barra y cuatro más. Cuando los dos radios que se encuentran en cada lado suman el 100 por ciento, las esquinas se funden en un único contorno orgánico y suave en lugar de un rectángulo redondeado.
¿Cómo animo un blob en CSS?
Pon dos o más valores de border-radius en @keyframes y ejecuta la animación con ease-in-out, infinite y alternate. Los navegadores interpolan el radio de cada esquina, así que el contorno fluye suavemente de una forma a la siguiente. Activa Animar en el modo CSS para obtener keyframes listos para usar.
¿Puedo volver a obtener el mismo blob más tarde?
Sí. La forma depende solo de los ajustes y del número semilla. Apunta la semilla o guarda el código copiado, y el generador reconstruirá exactamente ese contorno.
¿Puedo usar el blob SVG como clip-path?
Puedes referenciarlo con clip-path: url(#id) cuando el SVG está en la misma página, o pegar el atributo d en clip-path: path() para un tamaño fijo en píxeles. Un mask-image con el archivo .svg es la forma más fácil de escalarlo junto con el elemento.
Cómo se dibuja el blob SVG
El generador coloca puntos repartidos por igual alrededor de un círculo y luego desplaza cada uno hacia dentro o hacia fuera una cantidad aleatoria controlada por el control de aleatoriedad. Una curva suave pasa por los puntos mediante segmentos Bezier cúbicos para que no haya esquinas afiladas.
Menos puntos y menos aleatoriedad dan un guijarro. Más puntos y más aleatoriedad dan una salpicadura o una nube.
Animación de blobs sin JavaScript
La propiedad CSS d, que te permitiría transformar un path SVG desde una hoja de estilos, no es Baseline según MDN, así que falla en algunos de los principales navegadores. Por eso la opción animada usa border-radius. Cada radio de esquina es una longitud o un porcentaje, así que el navegador puede mezclar los keyframes por sí solo.
Añadir una rotación lenta junto al cambio de radio hace que el movimiento parezca más orgánico. Mantenla suave para que se quede en segundo plano.
Ejemplo de animación de blob en CSS
Blob que se transforma detrás del marco de una foto
Tres formas de border-radius en una animación alterna, más un giro lento. La media query de movimiento reducido la detiene para quienes piden menos movimiento.
Cómo leer un border-radius de ocho valores
Los valores antes de la barra son radios horizontales y los de después, verticales, cada uno en el orden superior izquierda, superior derecha, inferior derecha, inferior izquierda.
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%
Esquina
Radio horizontal
Radio vertical
Superior izquierda
Superior derecha
Inferior derecha
Inferior izquierda
Creador de blobs
Cada forma sale de la semilla que aparece bajo la vista previa. Cambia los controles o genera una semilla nueva, y luego copia el SVG o el CSS.