Los divisores de onda SVG y las formas blob se han convertido en un elemento estándar del diseño web moderno. Landing pages, dashboards SaaS y pantallas de onboarding de apps móviles los usan para romper layouts planos y crear profundidad visual entre secciones. Las formas en sí son simples; unos pocos paths muestreados con ruido conectados con curvas Bezier. Pero las herramientas para generarlos han sido históricamente limitadas.
La mayoría de generadores en la web ofrecen una sola capa de onda, un formato de exportación y control mínimo sobre el resultado. Si necesitas profundidad multicapa, opacidad por capa, o un componente React que puedas soltar directamente en tu código, terminas codificando paths SVG a mano o peleándote con herramientas de diseño que no fueron construidas para este flujo de trabajo.
Este artículo cubre cómo funciona la generación de ondas y blobs SVG por dentro; las matemáticas detrás del ruido simplex, la diferencia entre paths de onda y formas blob radiales, patrones prácticos de integración para proyectos React y Tailwind, y un generador gratuito en el navegador que exporta en seis formatos sin tocar un servidor.
Lo que los generadores actuales hacen mal
Herramientas como SVG Wave, Get Waves y Blobmaker resuelven cada una parte del problema. SVG Wave y Get Waves producen divisores de onda de una sola capa. Blobmaker maneja formas orgánicas pero no ondas. Ninguna te permite apilar múltiples capas con opacidad independiente, exportar como componente React, o previsualizar en fondos claros y oscuros.
La carencia está en los flujos de producción. Una onda de una sola capa con forma aleatoria sirve para un prototipo. Pero cuando necesitas un divisor de sección de tres capas con colores de marca específicos, amplitud controlada por capa, y un resultado que se integre directamente en un componente Next.js; los generadores de una capa se quedan cortos.
Cómo funciona realmente el generador
La herramienta tiene dos modos: Ondas y Blobs. Cada uno usa un algoritmo diferente, optimizado para su tipo de forma.
Ondas: ruido simplex en el eje horizontal
Las formas de onda se generan usando ruido simplex, específicamente la función noise2D. Para cada capa de onda, el generador muestrea valores de ruido a lo largo del eje horizontal para calcular desplazamientos Y. Estos puntos se conectan con curvas Bezier cúbicas para producir caminos de onda suaves y orgánicos.
Los parámetros clave por capa:
- Amplitud: controla la altura de las ondas (el desplazamiento vertical)
- Frecuencia: cuántos ciclos de onda aparecen a lo ancho
- Opacidad: transparencia de cada capa, que crea profundidad al apilar
- Color: color hex independiente por capa
- Semilla: un valor aleatorio que da a cada onda su forma única
Puedes apilar hasta 5 capas. El truco visual que hace que las ondas multicapa se vean bien es simple: pon las capas más oscuras y opacas delante y las más claras y transparentes detrás. Esto crea un efecto de profundidad tipo parallax que una sola onda plana no puede lograr.
Blobs: ruido radial con splines Catmull-Rom
Las formas blob funcionan diferente. El generador distribuye puntos uniformemente alrededor de un círculo, luego varía el radio de cada punto usando ruido simplex. Los puntos resultantes se conectan con splines Catmull-Rom-a-Bezier para producir una forma orgánica cerrada y suave.
Parámetros para blobs:
- Puntos: cuántos puntos de control hay en el círculo (más puntos = bordes más complejos)
- Complejidad: cuánto varía el ruido el radio (mayor = más irregular)
- Tamaño: el diámetro del círculo base
- Color: color de relleno
Las matemáticas detrás son elegantes. El ruido simplex de Ken Perlin es continuo; valores de entrada cercanos producen valores de salida cercanos. Esto es lo que hace que las formas se vean naturales en lugar de dentadas. Math.random() te daría un desastre puntiagudo. El ruido simplex te da curvas fluidas.
Seis formatos de exportación, y por qué importa
El generador exporta en seis formatos:
- Código SVG crudo: pega directamente en HTML
- CSS
background-image: un data URI que colocas en una propiedadbackground-image - Componente React: una función JSX lista para usar con props
- Descarga de archivo SVG: archivo
.svgestándar - Descarga de archivo PNG: rasterizado a resolución 2x para pantallas Retina
- Copia al portapapeles para todos los formatos de código
La exportación React es la que ahorra más tiempo. En lugar de convertir manualmente atributos SVG de kebab-case a camelCase (stroke-width a strokeWidth, fill-opacity a fillOpacity), la herramienta maneja la conversión automáticamente. Si estás construyendo con React o Next.js, esto reduce significativamente la fricción.
La exportación CSS es útil para proyectos Tailwind. Puedes aplicar la onda como imagen de fondo usando valores arbitrarios, manteniendo la decoración en CSS en lugar de en tu árbol de componentes. Si trabajas con Tailwind CSS, este enfoque es más limpio que los SVGs en línea para elementos decorativos.
Patrones prácticos para desarrolladores web
Divisores de sección en landing pages
El caso de uso más común. Coloca un SVG de onda entre tu sección hero y tu área de contenido:
<section class="hero bg-indigo-900 text-white">
<h1>Tu Producto</h1>
</section>
<!-- Divisor de onda generado por Kitmul -->
<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
<!-- pega tus paths generados aquí -->
</svg>
<section class="content bg-white">
<p>Tu sección de características</p>
</section>
Para este patrón, establece el ancho de onda para que coincida con tu ancho máximo de diseño (1440px es una opción común) y la altura entre 200-400px dependiendo de lo dramática que quieras la transición. Usa 2-3 capas con colores que hagan puente entre los fondos de tus dos secciones.
Si necesitas coincidir con colores de marca específicos, el Generador de Paletas de Color puede ayudarte a encontrar tonos complementarios para tus capas de onda. Y si quieres añadir animación a la onda, el Generador de Animaciones CSS produce animaciones keyframe que puedes aplicar directamente a elementos SVG.
Blobs decorativos detrás de tarjetas
Las landing pages SaaS adoran este patrón. Una forma de blob suave detrás de una tarjeta de características o nivel de precios añade profundidad sin desorden visual:
.card-container {
position: relative;
}
.blob-decoration {
position: absolute;
top: -20%;
left: -10%;
z-index: 0;
opacity: 0.3;
}
.card {
position: relative;
z-index: 1;
}
Genera un blob, copia el componente React, y posiciónalo detrás de tu tarjeta con posicionamiento absoluto. La clave es mantener la opacidad del blob baja (0.2-0.4) para que sugiera profundidad sin competir con tu contenido.
Combinando con otros efectos CSS
Las ondas SVG combinan bien con otras propiedades CSS. Añade una sombra de caja a la sección sobre la onda para más profundidad. Usa un efecto glassmorphism en tarjetas que se sitúan sobre un fondo de onda. Aplica un gradiente CSS a la sección debajo de la onda que coincida con los colores de tu onda.
Estas combinaciones son donde las herramientas client-side ganan. Cuando puedes iterar en la onda, la sombra, y el gradiente simultáneamente en diferentes pestañas del navegador, el ciclo de retroalimentación se mide en segundos en lugar de viajes de ida y vuelta a una herramienta de diseño.
Por qué importa la generación client-side
Toda herramienta de diseño en la nube opera con el mismo modelo: sube tu intención, espera al servidor, descarga el resultado. Para generación SVG, esto es arquitectónicamente absurdo. El cómputo requerido para generar un SVG de onda es trivial; unas pocas centenas de muestras de ruido y algo de matemáticas de paths. Tu navegador puede hacer esto en menos de 5 milisegundos. No hay razón para que un servidor esté involucrado.
Más allá del rendimiento, está el ángulo de privacidad. Las herramientas client-side mantienen tus datos en tu dispositivo. Sin telemetría sobre qué colores elegiste. Sin analíticas sobre cuántas ondas generaste. Sin cuenta requerida. La herramienta ejecuta JavaScript en tu navegador y produce salida SVG. Ese es todo el flujo de datos.
Esta es la misma filosofía detrás de todas las herramientas de Diseño y CSS de Kitmul; desde el Generador de CSS Grid hasta el Creador de Clip-path, todo se procesa localmente.
SVG vs. imágenes raster para decoraciones web
Si todavía estás usando divisores de sección en PNG o JPEG, aquí está la comparación:
| Propiedad | SVG | PNG/JPEG |
|---|---|---|
| Tamaño de archivo (onda típica) | 1-3 KB | 30-200 KB |
| Escala a cualquier pantalla | Sí | No (pixela) |
| Editable con CSS | Sí | No |
| Animable con JS | Sí | No |
| Añade peticiones HTTP | No (en línea) | Sí |
| Listo para Retina | Siempre | Solo si se exporta @2x |
La especificación SVG del W3C ha sido estable desde 2018. El soporte del navegador para SVG en línea es universal. No hay razón técnica para usar imágenes raster como divisores de sección en 2026.
Si necesitas convertir entre formatos de imagen para otros recursos, el Convertidor de Formato de Imagen maneja conversiones PNG, JPG y WebP localmente. Pero para formas decorativas, SVG es la respuesta.
Pruébalo
El Generador de Ondas y Blobs SVG es gratuito, funciona en tu navegador, y no requiere nada excepto una pestaña de navegador moderno. Genera una onda, presiona Randomize unas cuantas veces hasta encontrar algo que encaje con tu diseño, y copia el código.
Si estás construyendo un sistema de diseño y necesitas más herramientas CSS, la colección completa de Utilidades de Diseño y CSS incluye 16 generadores cubriendo gradientes, sombras, animaciones, border-radius, layouts flexbox, layouts grid, y más. Todo client-side, todo gratis.
Todo el procesamiento se ejecuta localmente en tu navegador. No se envían datos a ningún servidor. La herramienta es gratuita, abierta, y no tiene cuentas ni límites.