Generador de Blobs SVG

Diseña Hermosos Blobs SVG en Segundos

Las formas orgánicas tipo "blob" son una de las tendencias más populares del diseño web moderno: aparecen como fondos hero, separadores de sección, acentos decorativos en tarjetas e incluso como iconos de apps. Este Generador de Blobs SVG te permite crear blobs únicos y perfectamente suaves con unos cuantos controles, y luego copiar el SVG o descargarlo para usar en cualquier proyecto.

Cómo se Construye el Blob

El generador coloca varios puntos de anclaje uniformemente alrededor de un círculo, y luego desplaza el radio de cada punto una cantidad aleatoria basada en el valor de aleatoriedad seleccionado. Los puntos se conectan en una curva cerrada suave usando segmentos cúbicos de Bézier derivados de una spline Catmull–Rom, lo que garantiza un contorno limpio y continuo, sin esquinas visibles, por muy caóticos que sean los puntos subyacentes.

Una semilla determinista controla cada decisión aleatoria, lo que significa que la misma configuración siempre produce exactamente el mismo blob. Pulsa volver a lanzar para recorrer nuevas formas sin cambiar nada más.

Opciones de Personalización

• Complejidad — número de puntos de anclaje (de 3 a 20). Valores bajos dan blobs suaves y redondeados. Valores altos producen contornos complejos y ondulados.
• Aleatoriedad — cuánto puede desviarse cada punto del radio base. Cero da un círculo; aleatoriedad máxima da formas orgánicas espectaculares.
• Semilla — entero que hace que cada resultado sea reproducible. Con la misma semilla, siempre obtienes la misma forma.
• Relleno — elige un color sólido o un degradado lineal de dos paradas con un ángulo ajustable.
• Trazo — contorno opcional con color y grosor configurables.

Formatos de Salida

El generador produce un marcado SVG limpio y mínimo que puedes pegar directamente en un documento HTML, un componente de React, un archivo de Figma o cualquier herramienta de diseño que acepte SVG. Puedes copiar el código al portapapeles con un clic o descargar la forma como un archivo .svg independiente.

Usos Comunes

• Fondos hero y acentos en páginas de aterrizaje
• Máscaras de imagen estilo avatar
• Formas decorativas detrás de tarjetas de características
• Insignias abstractas y elementos de UI tipo pegatina
• Transiciones de blob entre secciones de página
• Decoración de diapositivas de presentación

Como el resultado es SVG plano, escala con nitidez a cualquier resolución, pesa muy poco y puede animarse con CSS o JavaScript. También puedes editar la ruta resultante en herramientas como Illustrator, Figma o Inkscape si necesitas retoques adicionales.