Generador de blobs

Blobs SVG orgánicos en segundos

Los blobs son esas formas suaves e irregulares que ves detrás de secciones hero, fotos de perfil, ilustraciones y pantallas de bienvenida de aplicaciones. Rompen las rígidas cuadrículas de rectángulos y dan a un diseño un aire cercano y artesanal. Este generador de blobs los crea como trazados SVG limpios: elige unos pocos parámetros, observa cómo se actualiza la forma y copia el código directamente en tu proyecto.

Como un blob es un único trazado SVG, ocupa muy poco, se escala sin perder calidad y puede recolorearse con CSS o animarse transformándolo entre dos trazados con el mismo número de puntos.

Cómo se construye la forma

El generador coloca un número elegido de puntos de anclaje alrededor de un círculo. La aleatoriedad desplaza cada punto hacia dentro en una cantidad aleatoria distinta, mientras que el tamaño escala todo el contorno dentro del lienzo. Después, los anclajes se unen con una spline Catmull-Rom cerrada que se convierte en curvas Bézier cúbicas, lo que garantiza uniones suaves sin esquinas visibles. Con tres o cuatro puntos obtienes formas sencillas de guijarro, mientras que diez o más puntos con mucha aleatoriedad producen formas ondulantes parecidas a nubes. Con un 0% de aleatoriedad, el resultado es una forma regular redondeada en un círculo perfecto.

Colores, contornos y reutilización

Rellena el blob con un solo color o con un degradado diagonal de dos colores, y añade un contorno de 1 a 16 píxeles cuando necesites un aspecto de pegatina o insignia. Cada blob procede de una semilla numérica: la misma semilla con los mismos ajustes siempre produce la misma forma, así que puedes guardar la semilla, cambiar un valor más adelante y mantener todo lo demás idéntico. Descarga un SVG para la web o un PNG de 800 por 800 píxeles con fondo transparente para presentaciones y herramientas de diseño. Todo el procesamiento se realiza localmente en tu navegador y no se sube nada.