Generador de ondas SVG

Por Bogdan Sandu (EN) · Publicado 13 de octubre de 2025 · Última actualización 14 de septiembre de 2026

Este generador de ondas SVG crea fondos de ondas por capas para secciones principales, separadores de secciones y tarjetas, y te entrega el código SVG. Cada capa es un trazado independiente que controlas con deslizadores. No necesitas software de diseño y ningún dato sale de tu navegador.

Lo que puedes configurar:

• Canvas: ancho de 400px a 2000px, alto de 200px a 800px y un color de fondo
• Por capa: tipo de onda (seno, triángulo, diente de sierra o cuadrado), amplitud de 10 a 100, longitud de onda de 50 a 500, fase de 0 a 360, opacidad y color
• Solo capas sinusoidales: frecuencia de 0.5 a 3 y variación de 0 a 0.8, que desvían la curva de un seno limpio
• Gradiente: un relleno lineal o radial opcional por capa, desde el color de la capa hasta un segundo color
• Preajustes: Sección de héroe, Mint Fresh, Sunset Glow, Deep Ocean, Lavender Dreams y Coral Reef, además de un botón Aleatorio

Agrega tantas capas como quieras y elimina cualquiera de ellas. La vista previa se vuelve a dibujar con cada cambio.

Cómo utilizar este generador de ondas SVG

1. Comience desde un ajuste preestablecido o haga clic en Aleatorio hasta que algo se acerque a lo que desea.
2. Establece el ancho y alto del lienzo para que coincida con la sección en la que se ubicará la ola. La salida usa un viewBox, por lo que estos números establecen las proporciones, no el tamaño de píxel final.
3. Sintoniza cada capa. Reduzca la opacidad en las capas posteriores y mantenga la capa frontal casi opaca para darle profundidad.
4. Elige una exportación: Copiar SVG Código o Descargar SVG para el vector, o abra Exportar para PNG, React y CSS.

El SVG comienza así con el preajuste de la Sección de Héroe:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="none">
  <defs>
    <linearGradient id="wg-gradient-0" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#1e40af;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="1200" height="400" fill="#0f172a" />
  <path d="M 0,400 L 0,200 L 10,213.16 L 20,224.98 …" fill="url(#wg-gradient-0)" opacity="0.15" />
  …
</svg>

Tres cosas en ese marcado importan una vez que está en una página:

• preserveAspectRatio="none" permite que la ola se estire a cualquier ancho y alto del contenedor. Quítelo si desea bloquear las proporciones.
• El <rect> es el fondo del lienzo. Bórralo para obtener una onda transparente que se asienta sobre el color de tu propia sección.
• Cada camino es una serie de segmentos rectos L muestreados cada 10 px, no una curva de Bézier. En tamaños normales se ve liso, pero en anchos muy grandes en un lienzo corto se pueden ver las facetas.

Para usar la onda como divisor de sección, coloca SVG en la parte inferior de la sección y dale un ancho fluido:

.hero svg {
  display: block;
  width: 100%;
  height: 160px;
}

Opciones de exportación

• PNG a 800×600, 1920×1080, 3840×2160 o un tamaño personalizado. Esto rasteriza la onda, así que úsalo para correo electrónico, imágenes sociales o herramientas que rechacen SVG en línea.
• React copia un pequeño componente que inyecta la cadena SVG con dangerouslySetInnerHTML. Es un contenedor, no un componente paramétrico, así que edite SVG aquí en lugar de hacerlo a través de accesorios.
• CSS copia una regla .wg-waves-background con SVG como URI de datos base64, usando background-size: cover.

Lo que la herramienta no hace

• No anima. La salida es estática SVG. Consulte la sección de animación a continuación para conocer las opciones CSS y SMIL.
• Escribe degradados y colores como atributos style y fill en línea. Algunos editores de CMS eliminan los estilos en línea al pegarlos, en cuyo caso mueven los rellenos a una hoja de estilo.
• Una onda de tres capas tiene alrededor de 10 KB de datos de ruta debido al muestreo de 10 píxeles. Ejecute el archivo a través de SVGO (EN) si el tamaño es importante.

¿Qué es un generador de ondas SVG?

Un generador de ondas SVG es una herramienta basada en navegador que convierte las entradas de altura, frecuencia y capas en una forma de onda ya preparada.

Genera esa forma como SVG (EN) código de ruta, el mismo formato vectorial utilizado para íconos y logotipos en la web.

No se requiere dibujo Bézier. Mueve algunos controles deslizantes, hace clic en un botón y la herramienta escribe la curva por usted.

Lo que no es:

• No es una aplicación de ilustración completa para formas orgánicas complejas.
• No es un truco exclusivo de CSS creado a partir de un radio de borde o un pseudoelemento
• No es una biblioteca estática de imágenes de olas prefabricadas.

Get Waves (EN), una de las herramientas más antiguas y aún más copiadas de esta categoría, mantiene todo el flujo de trabajo en tres movimientos. Elige un estilo de forma, arrastra dos o tres controles deslizantes, haz clic en el ícono del dado para obtener una variación aleatoria.

La mayoría de los generadores mantienen esto detrás de una interfaz (EN) visual simple, por lo que nadie necesita un editor de código o una aplicación vectorial solo para obtener una curva utilizable.

Cómo un generador de ondas SVG crea la forma de onda

Cada onda que produce un generador se reduce a una cosa: una cadena de coordenadas dentro del atributo d de un elemento de ruta.

Los controles deslizantes de amplitud y frecuencia no tocan la curva directamente. La mayoría de las herramientas cambian los puntos de control de una serie de segmentos cúbicos de Bézier y permiten que el navegador dibuje una línea suave entre ellos. Este generador toma muestras de la función de onda cada 10 px y, en su lugar, une los puntos con segmentos rectos.

Cifras clave:

• SVG el uso de imágenes creció un 16 % año tras año en 2022, según el HTTP Archive Web Almanac (EN)
• La mayoría de los generadores utilizan de forma predeterminada un lienzo de 1440 por 320 píxeles, que coincide con los anchos de puntos de interrupción comunes del escritorio. Este comienza en 1200 por 400.
• La suavidad de las curvas en la mayoría de las herramientas se configura con un único control Bézier cúbico por segmento, no con un editor de nodos completo.

Un atributo viewBox (EN) define el espacio de coordenadas en el que se encuentra la onda, independientemente de cuán grande o pequeño sea el elemento que se representa en la página.

Eso es lo que hace que una onda generada se escale limpiamente en lugar de pixelarse como una exportación ráster.

El botón "aleatorio" o "aleatorio" que incluyen la mayoría de las herramientas se ejecuta en una pequeña rutina JavaScript (EN) que selecciona nuevos valores para cada control deslizante a la vez. Algunas herramientas lo siembran de modo que la misma semilla reproduzca la misma curva. Éste no lo hace, así que copia el código cuando llegues a una forma que te guste.

SVG Generador de ondas versus codificación de una onda a mano

Un generador gana en velocidad. La codificación manual gana en precisión.

Ese es el intercambio que la mayoría de los equipos realmente están sopesando, no "cuál es mejor" en abstracto.

Generador, ventajas:

• Curva utilizable en menos de un minuto
• No se requieren matemáticas Bézier
• Funciona para miembros del equipo no técnicos.

Generador, contras:

• Las curvas rara vez coinciden con la forma exacta de una marca en el primer intento.
• Control limitado sobre la colocación de puntos individuales
• Las opciones de estilo terminan donde terminan los ajustes preestablecidos de la herramienta

Codificación manual, ventajas:

• Control total punto por punto sobre la curva.
• Puede coincidir exactamente con una maqueta específica o la curvatura de la marca.
• No depender de una herramienta de terceros para permanecer en línea

Codificación manual, desventajas:

• Lento si aún no te sientes cómodo con las curvas de Bézier
• Fácil de introducir un camino roto o una forma abierta
• Por lo general, significa abrir un editor de vectores solo para una forma.

Los equipos con un sistema de diseño estricto, donde la ola tiene que quedar a ras de una curvatura específica del logotipo, tienden a ajustar manualmente el trazado una vez y reutilizarlo en todas partes. Todos los demás cogen primero un generador. Abren un editor solo si la salida necesita ediciones (EN) después.

Una onda generada todavía pasa por CSS (EN) normal para el color de relleno y el posicionamiento una vez que está en la página. El paso de "codificación manual" a menudo consiste simplemente en retoques, no en una reconstrucción completa.

Los mejores SVG generadores de ondas comparados

Cuatro herramientas cubren la mayor parte de lo que la gente busca cuando quiere una ola sin escribir datos de ruta a mano.

Omita por completo el nombramiento de archivos y la creación manual de archivos (EN): cada herramienta en esta tabla genera un archivo de trabajo para usted y le permite copiar el código directamente en un proyecto.

Haikei combina ondas con una docena de otros generadores, incluido el modo de ondas en capas, y mantiene los conjuntos de formas más avanzados detrás de un nivel pago.

SVGwave merece una mención por una razón diferente. Fue construido por un desarrollador que entonces tenía 12 años, Bereket Semagn, y todavía se mantiene como una de las opciones gratuitas más flexibles para apilar múltiples colores de ondas.

Shape Divider intercambia flexibilidad por simplicidad. Una forma, una exportación, emparejada CSS incluida, que a menudo es exactamente suficiente para un divisor de sección que no necesita capas.

Aquí también es importante elegir entre una exportación SVG o PNG sin formato (EN). Las alternativas PNG existen principalmente para clientes de correo electrónico más antiguos o herramientas de diseño que se ahogan con el código vectorial en línea.

Controles de capas, color y degradado en un generador de ondas SVG

La profundidad de un gráfico de onda proviene del apilamiento, no de la curva misma.

Una sola onda plana parece una forma. Tres o cuatro capas semitransparentes, cada una ligeramente desplazada, empiezan a parecerse al agua.

Apilar múltiples capas de ondas

Cómo funcionan las capas:

• Cada capa es su propio elemento de ruta, apilado en el orden z natural de SVG
• Las rutas posteriores en el marcado se representan sobre las anteriores
• La opacidad generalmente se reduce en las capas posteriores para simular la distancia.

La mayoría de los generadores limitan el rango útil a cuatro o cinco capas. Más allá de eso, las curvas se superponen tanto que las capas adicionales dejan de leerse como formas separadas. Esta herramienta no tiene un límite estricto, pero el mismo límite se aplica al ojo.

Aplicar rellenos degradados y opacidad

Un color de relleno plano se lee como plano. Un relleno degradado se lee como luz que incide sobre el agua, razón por la cual la mayoría de los generadores utilizan uno por defecto.

Paradas de gradiente (EN) necesitan al menos dos colores y una dirección, y lograr esa combinación a simple vista es más lento de lo que parece. Aquí cada capa tiene un color de degradado combinado con su color base, de arriba a abajo para lineal o desde el centro para radial.

Si está creando el relleno por separado de la propia forma de onda, una herramienta de degradado (EN) dedicada hace que sea más rápido aterrizar en colores de parada que coincidan con el resto de la página.

La opacidad en capas de degradado se comporta de manera diferente a la opacidad en rellenos planos: baje la opacidad demasiado en un degradado y la transición de color desaparecerá antes que la forma.

Cómo hacer que una onda generada SVG responda

Una onda construida con un ancho de píxel fijo se rompe en el momento en que la pantalla se estrecha.

La solución ya está integrada en SVG. El atributo viewBox más un ancho basado en porcentaje permite al navegador cambiar la escala de la curva a cualquier contenedor en el que se encuentre.

Los celulares representaron el 49.4% del tráfico de sitios web en todo el mundo en agosto de 2026, al mismo nivel que las computadoras de escritorio con el 49.1%, según StatCounter Global Stats (EN).

Esa división por sí sola es motivo suficiente para comprobar cómo se comporta una onda por debajo de 480 píxeles de ancho, no sólo en el tamaño de un escritorio.

Configuraciones de capacidad de respuesta comunes:

• preserveAspectRatio (EN) configurado para mantener intactas las proporciones de la curva, o establecido en none, como lo hace esta herramienta, para permitir que la onda se estire
• Una altura fija en píxeles combinada con un ancho fluido basado en porcentajes
• Una regla de altura mínima para que la ola no se aplane en línea recta en pantallas pequeñas

Consultas de los medios (EN) vienen para los casos extremos que un fluido SVG no puede manejar por sí solo. Lo habitual es cambiar una altura de onda más corta una vez que la ventana gráfica cae por debajo del punto de interrupción de la tableta.

Esta es una práctica estándar de diseño responsivo (EN) aplicada a un gráfico específico, no una técnica especial SVG exclusiva.

Animando una ola SVG

Una onda estática se queda quieta. Uno animado se desplaza de izquierda a derecha en un bucle, lo que se acerca más a cómo se mueve el agua. El generador anterior genera estática SVG, por lo que la animación es un paso que agregas después.

Dos métodos manejan esto y no se superponen mucho en la práctica.

CSS Animación de fotogramas clave

La mayoría de las implementaciones mueven la propiedad de transformación de la ruta hacia adelante y hacia atrás usando fotogramas clave CSS (EN) estándar, repitiendo la animación infinitamente.

El truco para lograr un bucle limpio es duplicar la forma de onda con el doble de ancho y luego animar exactamente un ancho de forma de movimiento horizontal para que la costura sea invisible.

Si se equivoca incluso con unos pocos píxeles, el bucle saltará visiblemente en cada ciclo. Es uno de los errores más comunes al animar SVG con CSS (EN), y es fácil pasarlo por alto hasta que miras el bucle durante más de unos segundos. El CSS Generador de animación de fotogramas clave escribe los fotogramas clave por usted.

Animación SMIL

SMIL (EN) es el método de animación nativo SVG, escrito directamente dentro del marcado XML (EN) del SVG utilizando un elemento animado.

Chrome propuso eliminar el soporte SMIL en 2015, luego cambió de rumbo en 2016 después de que los desarrolladores rechazaran los reemplazos faltantes.

Estado actual: SMIL SVG la animación Baseline está ampliamente disponible, lo que significa que todos los principales navegadores ahora la admiten sin un polyfill.

De todos modos, la mayoría de los desarrolladores todavía utilizan primero los fotogramas clave CSS. Mejor familiaridad con las herramientas, depuración más sencilla en las herramientas de desarrollo del navegador y sintaxis separada para recordar.

SMIL todavía gana en un caso específico: animar los datos de la ruta de una forma, no solo su posición. CSS solo puede hacer eso cuando se admite la propiedad d, que aún es desigual entre los navegadores.

Cómo agregar una ola SVG generada a un sitio web

Obtener una ola generada en una página requiere una de cuatro rutas, dependiendo de la pila en la que esté trabajando.

Elige en función de cuánto control necesita sobre la forma después de colocarla, no solo de lo que es más rápido de copiar. El panel Exportar de arriba cubre los primeros tres.

1. Copia el código SVG directamente del generador y péguelo en línea en tu marcado HTML (EN), justo donde debe ubicarse el divisor.
2. En su lugar, descarga el archivo y haga referencia a él como una imagen de fondo CSS, usando background-size: cover para llenar el contenedor.
3. Instale un componente wave como un paquete npm si está trabajando en React o Vue, en lugar de administrar manualmente las cadenas de ruta sin formato.
4. Exporte directamente desde un complemento Figma cuando la onda necesite vivir dentro de un archivo de diseño antes de llegar al código.

Imagen en línea versus imagen de fondo: en línea SVG le permite apuntar a la ruta con CSS o JavaScript más tarde (para cambios de color, estados de desplazamiento, animación). Una imagen de fondo es más simple pero bloquea el estilo de la forma en el momento de la exportación.

El componente react-wavify (EN) en GitHub ha obtenido más de 360 estrellas, una señal aproximada de cuántos equipos preferirían instalar un paquete que cablear manualmente la integración SVG ellos mismos.

Algunas plataformas no pueden representar el código vectorial en línea de forma limpia, como ciertos clientes de correo electrónico o temas de CMS más antiguos. Allí, convertirlo a PNG (EN) primero evita un diseño roto.

Cuando un generador de ondas SVG no funciona bien

Un generador se gana con la velocidad, no con la precisión.

Tres situaciones empujan regularmente a las personas a codificar manualmente o a utilizar una herramienta completamente diferente.

Curvatura bloqueada por marca:

• La forma de un logotipo o mascota debe quedar al ras de la ola con una alineación exacta de píxeles.
• Las pautas de diseño especifican una relación de curvatura sin coincidencias preestablecidas del generador

El texto colocado sobre un fondo ondulado decorativo se topa con un verdadero problema. El texto de bajo contraste es la falla de accesibilidad más común que encuentra WebAIM (EN), presente en el 83.9% del millón de páginas de inicio principales en su informe de 2026.

La propia regla de contraste de WCAG (EN) requiere al menos una proporción de 4.5:1 entre el texto y su fondo. Una onda degradada ocupada puede fallar silenciosamente incluso cuando le parece bien al diseñador que eligió los colores.

Apilar cuatro o cinco capas animadas en un teléfono de baja potencia es donde el rendimiento, no la estética, decide el resultado. Cada ruta animada adicional agrega un costo de repintado, y las GPU móviles más antiguas se sienten más rápidas que las máquinas de escritorio.

Trabajos de ilustración orgánicos complejos, pinceladas texturizadas o escenas con docenas de formas distintas se encuentran fuera de lo que cualquier generador de ondas específico está diseñado. Eso es territorio de herramientas de ilustración completa o blob. Para una forma recortada en lugar de una onda rellena, el Clip Path Generator es la opción más adecuada.

Nada de esto hace que la herramienta sea una mala elección en general. Simplemente significa que la ola decorativa deja de ser la decisión correcta una vez que accesibilidad (EN) o la coincidencia exacta de marca entra en escena. Contraste (EN) vale la pena realizar la verificación antes del envío.

Problemas comunes después de exportar una onda SVG

La mayoría de los problemas de exportación se remontan a una de cuatro causas, y las cuatro son fáciles de detectar antes de que llegue la ola.

El problema de viewBox merece su propia mención. El optimizador de SVGO solía eliminarlo de forma predeterminada a través de un complemento llamado removeViewBox. Suficientes desarrolladores informaron que el escalado estaba roto y los mantenedores abrieron una solicitud de extracción para deshabilitarlo (EN).

Las diferencias de renderizado entre navegadores también aparecen, generalmente en cómo se acumulan los gradientes o la opacidad cuando se superponen varias capas de ondas.

Al probar la ola exportada para determinar la compatibilidad entre navegadores (EN), se detecta la mayoría de estos antes de que lo haga un cliente o un compañero de equipo.

Un valor predeterminado más que vale la pena conocer: preserveAspectRatio (EN) es una línea de base ampliamente disponible y su valor predeterminado es xMidYMid meet a menos que lo configure de otra manera. Este generador lo configura en none.

Una ola que parece ligeramente descentrada después de la exportación suele ser esta opción predeterminada que hace exactamente lo que se supone que debe hacer, no es un error.

Las ondas puramente decorativas que no contienen información deben quedar completamente fuera del árbol de accesibilidad. Agregue aria-hidden="true" al SVG en línea. Los usuarios de lectores de pantalla no necesitan escuchar la "imagen" anunciada para una forma que es solo una textura visual, que es el tipo de espacio cubierto en las guías sobre hacer SVG archivos accesibles (EN).

Preguntas frecuentes: Generador de ondas SVG

¿Cuál es la diferencia entre una onda SVG y una onda de solo CSS?

Una onda de solo CSS da forma a un pseudoelemento con radio de borde o clip-path directamente en HTML y CSS, sin ningún marcado vectorial involucrado. Una onda SVG utiliza datos de trayectoria real, una curva de Bézier o una polilínea muestreada, lo que brinda un control más preciso sobre la amplitud y la frecuencia.

¿Qué es un divisor de ondas comparado con un generador de ondas SVG?

Un divisor ondulado es la forma terminada que se encuentra entre dos secciones de página. Un generador de ondas SVG es la herramienta que lo produce. Genera el código de ruta y viewBox que hacen que la forma se escale correctamente en todos los tamaños de pantalla.

¿Existe una diferencia real entre los generadores gratuitos y los de pago?

Los niveles gratuitos suelen limitar el número de capas, la variedad de formas o la resolución de exportación. Los niveles pagos, como el pro generador de Haikei, desbloquean más categorías de formas y exportaciones PNG de mayor resolución. Un divisor de onda única rara vez los necesita y este generador es gratuito sin límites.

¿Los generadores de ondas SVG funcionan con componentes React o Vue?

Sí. Varios componentes de código abierto envuelven los datos de ruta generados en un componente React o Vue, exponiendo accesorios para el color de relleno, la amplitud y la velocidad de la animación. La exportación React anterior es más simple: un componente que representa la cadena SVG tal como está.

¿Las ondas SVG ralentizan la velocidad de carga de la página?

Rara vez. Una única ruta de onda dibujada a mano suele tener unos unos cientos de bytes, y una onda de tres capas de esta herramienta pesa alrededor de 10 KB. Ambos son mucho más claros que una imagen de fondo JPEG o PNG. El peso de la página sólo se convierte en una preocupación una vez que se acumulan varias capas animadas en una página que ya es pesada.

¿Se puede editar una ola exportada más adelante en Figma o Illustrator?

Sí. Ambos aceptan código SVG pegado o un archivo importado, y la ruta permanece completamente editable como puntos vectoriales. Illustrator se adapta a ediciones precisas de puntos de anclaje, mientras que Figma funciona mejor para cambios rápidos de color y capas.

¿Dónde debería probar primero la salida de un generador de ondas SVG?

La salida de un generador de ondas SVG merece su primera comprobación en la pantalla de un teléfono, no en un monitor de escritorio. Los celulares renderizan la onda en el ancho de ventana más estrecho, donde los errores de escala aparecen más rápido y más visiblemente.

Tres controles importan, en orden.

• Escalado de ViewBox en anchos estrechos
• Contraste del texto sobre el relleno
• Suavidad de animación en un teléfono.

Un viewBox roto arruina el diseño, el contraste débil bloquea la lectura y la animación entrecortada solo embota la impresión. El raspado es lo primero y el pulido es lo último.

Las estadísticas globales de StatCounter sitúan los celulares en el 49.4% del tráfico de sitios web en todo el mundo en agosto de 2026, a la par con las computadoras de escritorio. La mitad de las personas que ven una ola generada la ven primero en la estrecha ventana gráfica donde una verificación fallida interrumpe el diseño. El pase móvil combina bien con una lista de verificación de accesibilidad web (EN) completa antes de que se envíe la página.