Generador de blobs SVG
Pulsa el botón hasta que te guste la forma y luego copia el SVG o descárgalo. El blob es un único trazado cerrado y suave, así que se escala a cualquier tamaño y se puede cambiar de color en el código o en cualquier editor vectorial.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Fija la complejidad: 3–4 puntos dan formas de guijarro; 8–12, formas más onduladas.
- Fija la irregularidad: 0 % es casi un círculo y 100 % es muy irregular.
- Elige un color, o solo contorno, y pulsa Nueva forma hasta que te guste.
- Copia el código o descarga blob.svg.
Cómo funciona
Los puntos quedan a una distancia entre 80 × (1 − 0,6 × irregularidad) y 80 unidades del centro de un lienzo de 200 × 200, con un pequeño desplazamiento aleatorio en el ángulo. Por ellos pasa una spline de Catmull-Rom escrita como curvas de Bézier cúbicas: cada punto de control está a un sexto del segmento entre los vecinos de su punto, lo que hace que la curva pase suavemente por todos los puntos y se cierre sin esquina.
Ejemplo
Para cuatro puntos sobre un cuadrado, (100, 20), (180, 100), (100, 180) y (20, 100), la primera curva va de (100, 20) a (180, 100) con los puntos de control (100 + 160 ÷ 6, 20) = (126,7, 20) y (180, 100 − 160 ÷ 6) = (180, 73,3).
Consejos
- Superpón dos o tres blobs de colores distintos con algo de transparencia para fondos de cabecera.
- Usa la versión de contorno como marco decorativo detrás de fotos.
- Para animar entre formas, mantén la misma complejidad y así ambos trazados tendrán el mismo número de puntos.
Preguntas frecuentes
¿Cómo se crea la forma?
La herramienta coloca puntos alrededor de un círculo a ángulos iguales, mueve cada uno hacia dentro una cantidad aleatoria y los une con una curva cerrada y suave. La complejidad es el número de puntos; la irregularidad, cuánto pueden moverse hacia dentro.
¿Puedo volver a obtener el mismo blob?
Cada forma sale de una semilla aleatoria. Al cambiar la complejidad, la irregularidad, el color o el tamaño se conserva la semilla, así que la forma cambia de manera predecible; solo el botón Nueva forma elige una semilla nueva. Copia o descarga el SVG para guardar una forma.
¿Cómo uso el blob en una web?
Pega el código SVG directamente en el HTML, guárdalo como archivo para una etiqueta img o un fondo CSS, o toma solo el atributo d del trazado para un clip-path o una máscara.
¿Qué cambia el ajuste de tamaño?
Solo los atributos width y height del SVG. El dibujo usa un viewBox de 200 × 200, así que se mantiene nítido a cualquier tamaño y puedes redimensionarlo libremente con CSS.