Generador de ondas SVG
Genera ondas en capas suaves o con picos para secciones hero, encabezados y pies de página. Genera formas aleatorias hasta que te guste una, elige tus colores y exporta un SVG ligero, un PNG o CSS listo para pegar.
Última actualización:
Cómo usar Generador de ondas SVG
- Elige el número de capas y haz clic en Aleatorio hasta que te guste la forma.
- Ajusta la complejidad, la altura y la suavidad. Una suavidad baja da picos marcados; una alta, curvas suaves.
- Elige los colores: la capa trasera usa el primer color y la delantera el segundo, con mezclas entre ambos.
- Define la dirección: abajo para un separador de encabezado o hero, arriba para un pie de página.
- Exporta: descarga el SVG o el PNG, o copia el fondo CSS o el fragmento HTML en tu sitio.
Cómo se dibujan las ondas
Cada capa es un único <path> SVG. El generador coloca puntos espaciados uniformemente a lo largo del lienzo de 1440 unidades de ancho, mueve cada uno hacia arriba o hacia abajo una cantidad aleatoria (el ajuste de altura de la onda) y los une:
- Suavidad 100%: una spline Catmull-Rom que pasa por los puntos, convertida en comandos Bézier cúbicos (
C). Cada punto de control se coloca a un sexto de la línea entre los puntos vecinos. - Suavidad 0%: líneas rectas (
L) entre los puntos, para picos marcados. - Los valores intermedios escalan los puntos de control y dan curvas más suaves o más cerradas.
Después, el trazado se cierra por el borde inferior (o superior) para poder rellenarlo. La aleatoriedad usa una semilla, así que la misma configuración siempre vuelve a dibujar la misma onda hasta que haces clic en Aleatorio.
Cómo usar la onda en tu sitio web
| Salida | Ideal para | Cómo usarla |
|---|---|---|
| Separador HTML | Entre dos secciones de la página | Pégalo entre las secciones. Se escala con el ancho de la página; define una height fija en el SVG para estirarlo (usa preserveAspectRatio="none"). |
| Fondo CSS | Banners hero, encabezados, pies de página | Añade la clase a la sección. La onda va integrada como data URI, así que no hay ninguna solicitud HTTP adicional. |
| Archivo SVG | Herramientas de diseño, etiquetas de imagen, subidas a un CMS | Úsalo con <img src="wave.svg" alt=""> o impórtalo en Figma, Illustrator o Inkscape. |
| PNG | Correo electrónico, diapositivas, gráficos para redes sociales | Exporta a 2x o 3x para obtener resultados nítidos en pantallas de alta densidad. |
Consejos de diseño
- Haz que el color delantero coincida con el fondo de la sección siguiente, para que la onda parezca el borde de esa sección.
- Usa de 2 a 3 capas con colores del mismo tono para dar profundidad sin ruido visual.
- Mantén baja la altura del lienzo (de 120 a 200px) para separadores sutiles y más alta para fondos hero.
- Las ondas decorativas deben ocultarse a los lectores de pantalla; la salida HTML ya incluye
aria-hidden="true".
Preguntas frecuentes
¿Cómo uso una onda SVG como separador de secciones?
Coloca el SVG justo debajo (o encima) de la sección con display:block y width:100%, y dale el mismo color que la sección siguiente. Usa la salida de separador HTML, que añade preserveAspectRatio="none" para que la onda se estire a cualquier ancho de pantalla.
¿Cómo uso la onda como fondo CSS?
Copia la salida CSS. Pone el SVG en un data URI dentro de background-image, con background-size y background-position configurados para que la onda quede en la parte inferior o superior del elemento. No se necesita ningún archivo adicional.
¿Debo usar SVG o PNG para las ondas?
SVG para sitios web: ocupa unos pocos cientos de bytes, se ve nítido a cualquier tamaño y es fácil de cambiar de color. Usa PNG en herramientas que no aceptan SVG, como algunos editores de correos, programas de presentaciones o diseños para redes sociales.
¿Qué hace el ajuste de suavidad?
La onda pasa por un conjunto de puntos aleatorios. Al 100% los puntos se unen con curvas Catmull-Rom suaves convertidas en curvas Bézier cúbicas; al 0% se unen con líneas rectas, lo que da picos marcados como montañas.
¿Puedo crear una onda que se repita sin costuras?
Sí. Activa Bordes sin costuras: el primer y el último punto tienen la misma altura y la misma dirección de curva, así que las copias colocadas una al lado de otra se unen sin ninguna costura visible.
¿Las ondas generadas son de uso libre?
Sí. Las formas se generan aleatoriamente en tu navegador y puedes usarlas en proyectos personales y comerciales sin atribución.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.