¿Qué es un blob SVG?

Un blob es una forma suave y orgánica sin bordes rectos, a medio camino entre un círculo y una salpicadura. Los blobs son un elemento decorativo popular en el diseño web moderno: detrás de imágenes e ilustraciones principales, como marcos para avatares, como fondos de secciones o como botones y distintivos divertidos. Como son gráficos vectoriales, se mantienen nítidos en cualquier tamaño y solo ocupan unos cientos de bytes.

Descripción de la herramienta

Esta herramienta genera formas de blob aleatorias como código SVG limpio directamente en el navegador. Pulsa «Aleatorizar» hasta encontrar una forma que te guste y, después, ajusta con precisión cuántos picos tiene, qué tan irregular es y qué tan redondeadas son sus curvas. Rellénala con un color sólido o un degradado, o dibújala como un contorno; también puedes hacer que se transforme entre distintas formas en un bucle fluido. Descarga el resultado como SVG o PNG, o cópialo como marcado SVG, fondo CSS o clip-path de CSS.

Características

  • Blobs aleatorios reproducibles: la misma semilla y la misma configuración siempre generan la misma forma
  • Complejidad, aleatoriedad y suavidad ajustables, desde piedras redondeadas hasta estrellas puntiagudas
  • Relleno sólido, degradado o de contorno con cualquier color
  • Animación de transformación que alterna entre formas en bucle, integrada en el SVG sin JavaScript
  • Descarga como SVG o PNG transparente con el tamaño que elijas
  • Código SVG, fondo CSS y clip-path de CSS listos para copiar

Cómo funciona

La herramienta coloca puntos alrededor de un círculo, mueve cada uno hacia el interior una cantidad aleatoria y dibuja una curva cerrada y suave que pasa por ellos. La curva se mide con exactitud y se escala para que el blob llene la imagen de un borde al otro. Un generador de números aleatorios con semilla decide la posición de cada punto, por lo que un número o una palabra como semilla permite recuperar el mismo blob más adelante. Para la animación, varios blobs con el mismo número de puntos se colocan dentro de un único elemento SVG animate, y el navegador realiza la transición entre ellos.

Consejos

  • Entre cinco y ocho puntos con una aleatoriedad media producen formas de blob clásicas; una menor aleatoriedad da un resultado más sereno y profesional.
  • Reduce la suavidad al 0 % para crear polígonos con aspecto de cristal o gema.
  • Usa el código clip-path de CSS para recortar una foto o un video con la forma del blob.
  • Anota la semilla o escribe tu propia palabra como semilla para recrear exactamente el mismo blob más adelante.
  • Mantén lenta la animación de transformación, aproximadamente entre 8 y 15 segundos por bucle, para que conserve un aspecto sereno en segundo plano.