Generador de ondas SVG | Crea divisores de onda en capas con código listo para pegar

Genera ondas SVG que separan las secciones de una página web con una curva fluida en lugar de una línea recta. Ajusta la altura de la onda, la frecuencia, el número de capas y un degradado de dos colores con los controles, y luego copia el código SVG o descárgalo como archivo.

💡 Sobre esta herramienta

Seguramente has visto sitios donde una onda suave aparece bajo la cabecera o sobre el pie de página. Apilar secciones rectangulares da una sensación rígida y cuadrada, y un solo divisor de onda suaviza todo el diseño. El problema es que escribir esa curva a mano significa teclear una larga lista de coordenadas path del SVG, algo poco práctico.

Este generador construye ondas en capas, hasta cinco superpuestas, solo con los controles. Cada capa recibe una altura y una opacidad ligeramente distintas, así las ondas parecen situarse unas delante de otras y aportan profundidad. El degradado del color 1 al color 2 se reparte entre las capas de forma automática, por lo que no tienes que elegir colores intermedios. La salida es tanto un SVG en línea que pegas directamente en tu HTML como un archivo .svg descargable que tratas como imagen.

Cuando quieras la onda en el borde superior de una sección, activa el volteo y la curva apuntará al otro lado. Encaja en páginas de aterrizaje, portafolios, cabeceras de blog y cualquier lugar donde un divisor agradezca algo de movimiento.

🧐 Preguntas frecuentes

¿Cómo incorporo el SVG en mi sitio? Copia el código generado y pégalo entre las dos secciones que quieras separar. Añade width: 100% y display: block para que la onda se extienda de borde a borde sin huecos horizontales.

¿Se mantiene bien en distintos tamaños de pantalla? El SVG de salida lleva preserveAspectRatio="none", que indica al navegador que estire la forma hasta llenar su caja en lugar de fijar la proporción. Con un ancho del 100% se adapta a móviles y escritorios de forma automática. Para ajustar solo la altura vertical, sobreescríbela con una media query de CSS.

¿Qué cambia el control de capas? Define cuántas ondas superpuestas obtienes. En 1 tienes una sola onda de color sólido; en el máximo de 5 obtienes cinco ondas con distinta opacidad y altura formando un fondo más profundo.

¿Qué ocurre al subir la frecuencia? Aumenta el número de ciclos de onda a lo ancho. Un valor bajo da ondulaciones amplias y suaves; un valor alto da rizos más apretados y frecuentes.

¿Por qué exportar SVG en lugar de PNG? El SVG es un formato vectorial, así que se mantiene nítido al ampliarlo o en una pantalla 4K. Una sola onda es ligera, normalmente de 1 a 2 KB, por lo que apenas afecta a la carga de la página.

📚 Cómo el viewBox mantiene las ondas adaptables

Lo primero en el código exportado es viewBox="0 0 ancho alto". Esto define el sistema de coordenadas interno del SVG, que es independiente del tamaño con el que se muestra en pantalla. Esa separación es justo lo que hace posible el comportamiento adaptable: cuando el CSS fija el ancho al 100%, el viewBox gobierna las proporciones internas del trazado mientras preserveAspectRatio decide cómo se estira para encajar.

La onda en sí es una curva senoidal aproximada por una larga serie de pequeños segmentos rectos dentro de un path. El ancho se divide en muchos pasos pequeños, se coloca un punto en cada paso y los puntos se unen con líneas. Con un paso lo bastante fino, el ojo lo percibe como una curva suave. Más puntos dan una curva más lisa pero un código más largo, así que se usa un tamaño de paso que equilibra el aspecto y el peso del archivo.