Generador de patrón SVG de ondas
Componga un patrón de ondas apiladas en SVG, personalizable en color, amplitud y número de capas, para el fondo de una sección o un banner. Procesamiento 100% local en su navegador: no se envía nada a ningún servidor.
Cómo funciona
El patrón se construye apilando varias curvas sinusoidales semitransparentes, de la más alta (más fina y más opaca) a la más baja (más ancha y más suave), para dar una sensación de profundidad similar a la de un banner de «ondas» clásico, usado al final de una sección de página de inicio. Cada capa tiene un desfase ligeramente distinto para evitar que las curvas se superpongan perfectamente.
¿El archivo descargado conserva una calidad perfecta a cualquier tamaño?
Sí, se trata de un auténtico SVG vectorial: puede integrarlo tal cual en una página web (se adapta al ancho de su contenedor mediante su viewBox) o ampliarlo en un programa de diseño sin ninguna pérdida de nitidez, a diferencia de una imagen de mapa de bits.
¿Cómo usarlo como fondo de sección en mi sitio?
Copie el código SVG y péguelo directamente en su HTML, o descargue el archivo y haga referencia a él como imagen de fondo CSS. Para obtener un efecto de banner al final de una sección, colóquelo con position: absolute; bottom: 0 y width: 100%.
El patrón se genera íntegramente con JavaScript en su navegador, sin ninguna llamada de red.