Generador de ondas SVG

Ondas SVG por capas para diseños modernos

Los divisores de onda son una forma muy popular de suavizar el límite entre dos secciones de una página web. En lugar de una línea horizontal dura, un borde curvo aporta movimiento y profundidad a banners hero, pies de página, tablas de precios y landing pages. Este generador de ondas SVG crea esas formas por ti. Apila varias capas translúcidas u opacas, cada una con su propia curva aleatoria, y las mezcla entre dos colores para que el resultado parezca colinas onduladas o agua.

Como el resultado es SVG puro, se mantiene nítido a cualquier tamaño, pesa solo unos cientos de bytes y se puede estilizar, animar o insertar directamente en tu HTML. También puedes copiarlo como data URI de CSS para background-image, algo muy práctico cuando no puedes añadir archivos extra a un proyecto.

Qué cambian los controles

Capas define cuántas ondas superpuestas se dibujan, desde una única curva limpia hasta seis bandas apiladas. Amplitud controla la altura de las crestas y los valles. Complejidad es el número de crestas a lo ancho: los valores bajos dan olas largas y tranquilas, y los altos, un mar picado. Suavidad controla cómo se unen los puntos: al 0% la onda es angulosa como un zigzag y al 100% se convierte en una curva redondeada formada por segmentos Bézier cúbicos. El relleno puede ser una mezcla de dos colores sólidos, uno por capa, o un degradado horizontal con opacidad creciente hacia la capa frontal.

Usar y exportar tu onda

Cada onda se genera a partir de una semilla numérica, así que un diseño es totalmente reproducible: anota la semilla y los valores de los controles deslizantes y podrás recrearlo más adelante. Usa Voltear verticalmente para ondas que cuelgan desde la parte superior de una sección y activa el fondo transparente cuando el SVG deba ir sobre otro color. Descarga el SVG para la web o exporta un PNG de 1440 por 480 píxeles para presentaciones y herramientas de diseño. Al colocar el SVG en una página, estíralo a todo el ancho y ajusta el fondo de la sección para que coincida con el color de fondo de la onda y así evitar finas juntas visibles. Todo se calcula localmente en tu navegador, por lo que no hay subidas ni necesitas una cuenta.