Ondas SVG en Diseno Web

Por Que Usar Ondas SVG

Los separadores rectilineos entre las secciones de un sitio web dan un aspecto rigido y monotono. Las ondas SVG rompen esa linealidad anadiendo curvas organicas que guian naturalmente la mirada de una seccion a otra.

El SVG (Scalable Vector Graphics) es el formato ideal para ondas porque se adapta a todos los tamanos de pantalla sin pixelacion. Un archivo SVG de onda pesa generalmente menos de 2 KB — mucho menos que un PNG equivalente.

Las grandes marcas y los sitios modernos usan masivamente los separadores de onda. Stripe, Dropbox y cientos de landing pages SaaS emplean esta tecnica para crear transiciones fluidas entre secciones de diferentes colores.

Anatomia de una Onda SVG

Una onda SVG es esencialmente un elemento <path> con curvas de Bezier. El comando C (cubic bezier) o Q (quadratic bezier) define los puntos de control que dan a la curva su forma.

Un SVG de onda tipico se ve asi:

<svg viewBox="0 0 1440 320">
<path d="M0,160 C360,280 720,40 1080,160 C1260,220 1380,160 1440,160 L1440,320 L0,320 Z" fill="#3b82f6"/>
</svg>

El viewBox define el sistema de coordenadas. El ancho de 1440 corresponde a una pantalla estandar. El camino comienza a la izquierda, traza la onda, luego desciende y vuelve para rellenar la zona bajo la curva.

Integracion con CSS

• SVG inline: Pega el codigo SVG directamente en tu HTML. Es el metodo mas flexible — puedes cambiar colores con CSS y animar elementos con JavaScript.
• Imagen de fondo CSS: Usa el SVG como background-image con un data URI o archivo externo. Simple pero menos flexible para animaciones.
• Posicion absoluta: Coloca el SVG con position: absolute; bottom: 0; en una seccion para que sirva como borde inferior. Agrega width: 100%; para que cubra todo el ancho.

Para que la onda se adapte correctamente a todos los anchos de pantalla, usa preserveAspectRatio="none" en el elemento SVG.

Ondas Multicapa

Una sola onda esta bien. Varias ondas superpuestas con diferentes opacidades crean un efecto de profundidad impresionante.

Apila dos o tres elementos <path> en el mismo SVG, cada uno con una curva ligeramente diferente y una opacidad decreciente. La onda del fondo es la mas oscura, la del frente es la mas clara. El resultado evoca colinas o dunas que se superponen.

Varia la altura y la frecuencia de las ondas entre las capas. Si todas las ondas tienen el mismo ritmo, el efecto parece artificial. Ritmos diferentes dan un aspecto mas organico y natural.

Animar las Ondas

• Animacion CSS: Usa @keyframes con transform: translateX() en un SVG mas ancho que el viewport. La animacion desplaza la onda horizontalmente en bucle, creando la ilusion de movimiento.
• Animacion SMIL: El elemento <animate> del SVG puede animar el atributo d del camino, transformando la forma de la onda. Es mas fluido pero mas complejo de configurar.

Manten las animaciones sutiles. Un movimiento lento (10-20 segundos por ciclo) agrega vida sin distraer. Un movimiento rapido marea.

Genera tus Ondas SVG

Nuestro Generador de Ondas SVG te permite disenar separadores de onda visualmente. Ajusta el numero de capas, la altura de las ondas, los colores y la complejidad, luego exporta codigo SVG limpio listo para pegar en tu proyecto.