Generador de blobs SVG
Genera formas blob SVG orgánicas y aleatorias a partir de la complejidad y el contraste, crea variaciones con una semilla, previsualízalas en vivo y copia el SVG o el clip-path CSS.
Generador de blobs SVG — Define cuántos puntos tiene la forma (complejidad) y qué tan irregulares son sus bordes (contraste), luego pulsa Regenerar para obtener una nueva variación aleatoria a partir de la siguiente semilla. Una vista previa en vivo muestra el blob mientras lo ajustas, y obtienes tanto el código SVG completo como una regla clip-path CSS lista para pegar. Todo se calcula en tu navegador con un generador aleatorio con semilla; ninguna forma, color ni ajuste sale de tu dispositivo.
¿Qué es Generador de blobs SVG?
El Generador de Blobs SVG es una herramienta gratuita en el navegador para diseñadores y desarrolladores front-end que quieren formas blob suaves y orgánicas para fondos, secciones de portada, avatares o detalles decorativos sin dibujarlas a mano. Controlas dos valores: la complejidad (el número de puntos de anclaje alrededor de la forma) y el contraste (cuánto se aleja cada punto de un círculo perfecto). Una semilla en el estado, incrementada por el botón Regenerar, te deja recorrer variaciones infinitas manteniendo fijos la complejidad y el contraste. La salida se dibuja como una única curva Bézier cerrada y suave, de modo que puedes copiar código SVG limpio, obtener una regla clip-path() de CSS para enmascarar cualquier elemento o descargar un archivo .svg listo para usar. Úsalo para crear decoraciones acordes a tu marca rápidamente o para aprender cómo se construyen las rutas blob a partir de puntos alrededor de un círculo.
Cómo usar Generador de blobs SVG
- Abre Ajustes y define la complejidad (número de puntos, 3-16) de la forma.
- Ajusta el contraste (0-100) para controlar cuán irregulares y ondulados son los bordes.
- Elige un color de relleno con la muestra de color o escribiendo un valor HEX.
- Haz clic en Regenerar para obtener una nueva variación aleatoria con la siguiente semilla hasta que te guste la forma.
- Copia el código SVG o la regla clip-path CSS, o haz clic en Descargar para guardar un archivo .svg.
Ejemplos
Blob de fondo suave
Pon la complejidad en 6 y el contraste en unos 40 para un blob suave y redondeado, luego regenera varias veces hasta encontrar una forma agradable para un fondo de portada o tarjeta.
Forma orgánica puntiaguda
Sube la complejidad a 12 y el contraste a 80 para una silueta más dentada y enérgica, útil para insignias o ilustraciones desenfadadas.
Máscara con clip-path CSS
Copia la regla clip-path: path('...') generada y aplícala a una imagen o div para recortar el elemento según el contorno del blob.
Preguntas frecuentes
- ¿Qué controlan la complejidad y el contraste?
- La complejidad es el número de puntos de anclaje distribuidos uniformemente alrededor de un círculo (de 3 a 16): más puntos crean un contorno más detallado. El contraste es cuánto se empuja aleatoriamente cada punto hacia dentro o hacia fuera del radio base (de 0 a 100), por lo que 0 se acerca a un círculo simple y 100 es muy irregular.
- ¿Cómo funciona el botón Regenerar?
- Cada blob se construye a partir de una semilla numérica más tu complejidad y contraste. Regenerar aumenta la semilla en uno y recalcula la forma, así obtienes una nueva variación aleatoria en cada clic mientras la complejidad, el contraste y el color permanecen iguales.
- ¿Cuál es la diferencia entre la salida SVG y la de clip-path?
- La salida SVG es un archivo <svg> completo e independiente que puedes incrustar o descargar. La salida clip-path es una sola regla CSS con path() que puedes aplicar a cualquier elemento HTML para recortarlo según el mismo contorno del blob.
- ¿Puedo cambiar el color y descargar el archivo?
- Sí. Define el color de relleno con la muestra de color o un valor HEX; la vista previa, el SVG y la descarga lo usan. Haz clic en Descargar para guardar un archivo blob.svg generado por completo en tu navegador.
- ¿Se envían mis formas o ajustes a un servidor?
- No. El blob se genera con una función aleatoria local con semilla y todas las cadenas SVG y clip-path se construyen en tu navegador. Nada se sube, por lo que la herramienta funciona sin conexión y tu trabajo permanece privado.
Herramientas relacionadas
Código a imagen
Convierte un fragmento de código en una imagen PNG pulida con resaltado de sintaxis en tu navegador, con tema, fondo de degradado o transparente y relleno, sin subir nada.
Verificador de contraste de color
Comprueba la relación de contraste WCAG entre un color HEX de primer plano y uno de fondo, y si cumple AA y AAA para texto normal y grande.
Mezclador de colores
Mezcla dos colores HEX en la proporción que elijas, en espacio RGB o Lab, y obtén el color intermedio como muestra y valor HEX copiable.
Generador de tonos de color
Convierte un color HEX base en una escala de tonos 50-950 al estilo Tailwind, mezclando hacia blanco y negro, con muestra y HEX copiable.