Generador SVG: blobs, ondas, patrones y degradados

Generar un blob, una onda o un patrón SVG: método y exportación

El generador calcula trazados vectoriales a partir de una semilla aleatoria: la misma semilla con los mismos ajustes produce siempre el mismo archivo. Ofrece seis modos (blob, ondas, patrón repetitivo, degradado de malla, curvas topográficas, insignia), exportables en SVG, componente React, fondo CSS, data URI o PNG hasta 4 veces el tamaño. El blob por defecto pesa menos de 1 KB.

Cómo se construye un blob

La herramienta reparte N puntos sobre un círculo (N = complejidad, de 3 a 16) cuyo radio es el 35 % del lado menor. Cada radio se desplaza al azar dentro de ± (aleatoriedad ÷ 10) × 22,5 % del radio, sin bajar de 20 px. Después los puntos se unen con una curva de Catmull-Rom convertida en segmentos de Bézier cúbicos, cuya tensión depende del ajuste de redondez. El azar procede de un generador pseudoaleatorio determinista (Mulberry32) inicializado con la semilla.

Ejemplo

Ajustes por defecto: lienzo de 600 × 600 px, 8 puntos, aleatoriedad 6, semilla 42. El radio base es de 210 px, cada punto se desvía como mucho 28,35 px y el trazado tiene 8 segmentos de Bézier. El archivo SVG ocupa 952 bytes con su degradado lineal de tres colores; como data URI en base64 llega a unos 1.300 caracteres, un tercio más. La semilla 43 da otra forma; la 42 devuelve siempre la misma.

Opciones y límites

• Efectos: grano (filtro de ruido fractal), sombra, rotación, espejo, 12 paletas y 10 ajustes predefinidos.
• La animación añade reglas CSS en el archivo: funciona en navegadores, pero no en la mayoría de programas de maquetación ni en la exportación PNG, que congela una imagen.
• El grano y el desenfoque del degradado de malla usan filtros SVG, costosos de mostrar en superficies grandes o en móvil.
• El componente React se obtiene convirtiendo el texto SVG: revíselo antes de integrarlo en un proyecto tipado.

Todo se calcula en su navegador; no se envía ninguna imagen a un servidor.

Preguntas frecuentes

¿Cómo recupero exactamente la misma forma SVG?

Anote la semilla que se muestra (42 por defecto) y sus ajustes: el generador pseudoaleatorio de la herramienta produce siempre el mismo trazado con la misma semilla. Si solo cambia la semilla, por ejemplo a 43, obtiene otra forma con los mismos parámetros. El botón aleatorio elige una semilla entre 0 y 99.999.

¿Es mejor exportar en SVG o en PNG?

El SVG se ve nítido a cualquier tamaño y suele pesar menos de 1 KB en un blob sencillo (952 bytes con los ajustes por defecto). El PNG sirve para herramientas que no aceptan vectores; la herramienta lo exporta a 1x, 2x o 4x el tamaño del lienzo, es decir, 2.400 × 2.400 px en 4x para un lienzo de 600 px. En PNG se pierde la animación.

¿Cómo uso el blob como fondo CSS de una página?

Elija el formato CSS: la herramienta comprime el SVG, lo codifica como data URI y entrega una regla background-image con background-size: cover y centrado. Péguela en la hoja de estilos de su sección. El formato data URI en base64 pesa alrededor de un tercio más que el SVG original.

¿La animación funciona en todas partes?

La animación está escrita en CSS (keyframes) dentro del archivo SVG. Se reproduce cuando el SVG se muestra en un navegador, pero Figma, Illustrator o PowerPoint suelen ignorarla, y la exportación PNG solo guarda una imagen fija. La velocidad va de 2 a 16 segundos por ciclo.

¿La herramienta es realmente gratuita?

Sí, todas las herramientas en Kristools son 100% gratuitas y accesibles sin registro.

¿Están protegidos mis datos?

Sí. Todo el procesamiento se realiza de forma segura y directa en tu navegador. No se envían datos personales a nuestros servidores.