Softonic

Generador de Olas SVG

Paso 1 / 2
Siguiente

Las olas curvas son los divisores de sección que toda página de destino acaba buscando. Este generador muestrea una curva sinusoidal suave en un único <path> relleno, te permite ajustar la amplitud, la frecuencia y la posición vertical, y lo pinta con cualquier color sólido, listo para colocar entre dos secciones sin CSS adicional. Copia el marcado SVG en línea y pégalo directamente en tu página.

Cómo generar una ola SVG

  1. 1

    Establece el color

    Elige cualquier color de relleno sólido para la ola con el selector de color.

  2. 2

    Ajusta la amplitud

    Sube la amplitud (de 0 a 150) para una curva más profunda, o bájala para una ondulación suave.

  3. 3

    Establece la frecuencia

    Elige de 1 a 8 ciclos a lo ancho. Más ciclos significa un patrón más ondulado y recargado.

  4. 4

    Elige arriba o abajo

    Ancla el relleno al borde inferior para una ola de pie de página, o al borde superior para una ola de cabecera.

  5. 5

    Copia el SVG

    Copia el marcado SVG en línea y pégalo en tu HTML o en un fondo CSS.

Dónde las olas resultan realmente útiles

  • Transiciones de sección entre un bloque hero de color y un cuerpo blanco, para que la vista fluya en lugar de chocar con una línea dura.
  • Pies de página donde un borde superior curvado suaviza el bloque oscuro de enlaces.
  • Tarjetas de precios que quieren una esquina pintada sutil sin una imagen de fondo completa.
  • Banners principales donde una ola en el borde inferior guía al lector hacia el contenido.

Anatomía de la ruta

El generador muestrea una curva sinusoidal en un único <path> relleno dentro de un viewBox de 1440 x 320:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

La ruta avanza a lo ancho con segmentos rectos cortos que trazan la onda sinusoidal, y luego se cierra hacia el borde inferior (o hacia el superior) para formar el relleno sólido. Aumentar la amplitud ensancha las crestas y los valles; añadir ciclos empaqueta más de ellos a lo ancho.

Hacerlo responsivo

  • El SVG ya establece preserveAspectRatio="none", así que la ola se estira para llenar cualquier ancho.
  • Viene con width="100%"; controla la altura con CSS (height: auto o un valor fijo) a tu gusto.
  • Para apilar olas y dar profundidad, coloca dos copias en tu propio CSS, posiciónalas de forma absoluta y da a cada una un color y una opacidad diferentes.

Accesibilidad

Las olas son decorativas. Añade aria-hidden="true" y role="img" para que los lectores de pantalla omitan el elemento, y mantén todo el contenido significativo en elementos HTML hermanos reales.

Preguntas frecuentes

Incluye el SVG en tu HTML cuando quieras que el relleno reaccione a las variables CSS (modo oscuro, tematización). Usa una imagen de fondo cuando la ola sea puramente decorativa y quieras que el navegador la almacene en caché por separado.

Sí. Es un <path> vectorial con preserveAspectRatio="none", así que escala a cualquier ancho sin volverse dentada, a diferencia de una imagen rasterizada que se difumina al ampliarla.

Sí. Envuelve la ruta en un SVG y anima su atributo d o un transform: translateX() mediante keyframes CSS. Mantén el movimiento sutil; las animaciones de olas que se reproducen solas envejecen rápido.

Normalmente bastante menos de 1 KB, ya que es una única ruta con un solo color de relleno. Eso es una fracción diminuta de cualquier equivalente en PNG.

Herramientas relacionadas

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Convertidor de ASCII a Binario

Convierte cualquier cadena ASCII a su representación binaria. Cada carácter se convierte en ocho bits, separados por espacios, listos para pegar en un seguimiento de protocolo o tarea.

Generador de Formularios CSS

Genera el CSS de un formulario completo con estilo: una cuadrícula de formulario, etiquetas, entradas, áreas de texto, selectores y estados de foco claros. Elige el color de acento, el radio de las esquinas y la separación, y copia el código.

Desofuscador de JavaScript

Desofusca JavaScript minificado o empaquetado con renombrado de variables, decodificación de arreglos de cadenas, reversión de aplanamiento de flujo de control y embellecimiento.

Buscador de nombres de colores

Encuentra el color con nombre CSS estandarizado más cercano a un valor HEX, RGB o HSL mediante la diferencia CIEDE2000.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Herramienta disponible en otros idiomas