Generador de ondas SVG
Genere una curva de onda SVG fluida para separar dos secciones de una página con un acabado más suave que una simple línea recta; amplitud, frecuencia y color totalmente ajustables.
Cómo funciona
La onda se construye a partir de sucesivas curvas de Bézier cúbicas, con cada «cresta» alternando entre la parte superior y la inferior de una línea base, para un trazado fluido y sin ángulos. El número de crestas (frecuencia) y su altura (amplitud) se ajustan de forma independiente, igual que el color de relleno.
¿Cómo usar esta onda como separador entre dos secciones?
Copie el código SVG y colóquelo en posición absoluta en la parte inferior (o superior, con la opción «voltear») de una sección de color, con un ancho del 100%: la onda cubrirá la transición entre esa sección y la siguiente, cuyo color de fondo debe coincidir con el color de relleno del SVG para que el empalme sea invisible.
¿El ancho definido debe coincidir exactamente con el ancho de mi página?
No: gracias al atributo preserveAspectRatio="none" y a un ancho en porcentaje en CSS, el SVG se estira para ocupar todo el ancho disponible del contenedor, aunque su ancho original no coincida exactamente con el de su página.
Generación 100% local: la curva se calcula íntegramente en su navegador, sin enviar ningún dato a un servidor.