Generador de Ondas SVG
Generador de ondas SVG gratis online: apila 1-5 capas de ondas suaves, ajusta línea base, amplitud, longitud de onda y suavizado, aplica un degradado bicolor y exporta el código vectorial.
¿Qué hace el generador de ondas SVG?
Crea formas de onda decorativas como código SVG listo para usar. Puedes apilar de 1 a 5 capas, cada una con su altura de línea base, amplitud, longitud de onda y suavizado, y rellenarlas todas con un degradado lineal bicolor compartido.
¿Cómo se dibujan las curvas de la onda?
Cada capa la produce un generador de rutas propio: la onda se divide en segmentos de media longitud de onda y cada segmento se traza con puntos de control Bézier cúbicos. Así el archivo es diminuto y perfectamente suave a cualquier zoom.
¿Qué cambia el deslizador de suavizado?
Al 0% los segmentos se convierten en líneas rectas y la onda parece un zigzag. Al subirlo, los puntos de control Bézier se desplazan hacia fuera y al 100% obtienes curvas senoidales completas.
¿Dónde puedo usar el SVG exportado?
En cualquier sitio que acepte HTML o SVG: fondos de cabecera, separadores entre secciones, pies de página, presentaciones y herramientas de diseño. Pega el código copiado en tu HTML o guarda el archivo .svg con el botón de descarga.
¿La onda se verá nítida a cualquier tamaño?
Sí. La exportación conserva un viewBox de 1440x480, así que el gráfico es geometría vectorial pura. Estíralo al 100% del ancho de página o amplíalo para impresión: las curvas nunca se difuminan ni pixelan.
¿Cómo funciona el botón Aleatorizar?
Elige un número de capas al azar entre 1 y 5, nuevos valores aleatorios para cada parámetro y dos colores armónicos al azar, y redibuja la vista previa al instante. Pulsa las veces que quieras hasta que te guste.
¿Puedo usar los colores de mi marca?
Claro. Los dos selectores de color fijan el inicio y el fin del degradado lineal que comparten todas las capas, así que al cambiarlos se recolorea todo el conjunto de ondas a la vez.
¿Se sube algún dato a un servidor?
No. El generador funciona por completo en tu navegador con JavaScript puro. Tus colores y ajustes nunca salen de la página y el archivo exportado se crea localmente en tu dispositivo.
Cómo usar Generador de Ondas SVG
El generador de ondas SVG crea formas de onda en capas como código SVG limpio y listo para pegar. Cada capa es una curva cúbica de Bézier suave rellena con un degradado lineal de dos colores compartido, lo que la hace perfecta para fondos de sección hero, divisores de página y decoraciones de pie de página. Todo se genera en tu navegador — no se sube nada.
- Elige cuántas capas (1-5) quieres en el selector de Capas. Las capas se dibujan de atrás hacia delante, así que cada nueva capa pinta sobre las anteriores.
- Elige los colores de inicio y fin del degradado con los dos selectores de color — todas las capas comparten este degradado lineal.
- Ajusta cada capa con sus cuatro deslizadores: la altura de línea base mueve la onda arriba o abajo, la amplitud define qué tan altas son las crestas, la longitud de onda controla la distancia horizontal entre crestas, y la suavidad va de líneas zigzag rectas (0%) a curvas sinusoidales completas de Bézier cúbicas (100%).
- Pulsa Aleatorizar para generar al instante una combinación nueva de cantidades de capas, formas y colores hasta que algo luzca bien.
- Pulsa Descargar SVG para guardar un archivo .svg, o Copiar fuente para poner el marcado SVG completo en tu portapapeles, listo para pegar en cualquier archivo HTML o herramienta de diseño.
Para divisores de sección web coloca el SVG entre dos bloques y déjalo estirarse al 100% de ancho — el viewBox mantiene las curvas sin distorsión a cualquier tamaño. Una suavidad baja con longitudes de onda cortas da un aspecto dibujado a mano, mientras que la suavidad total con longitudes largas parece un mar en calma.
Herramientas relacionadas
- Optimizador SVG Optimiza y comprime archivos SVG al instante en tu navegador. Elimina metadatos, comentarios y datos innecesarios, reduce el tamaño hasta un 60%.
- Convertidor de SVG a PNG Convierte SVG a PNG, JPEG o WebP al instante en tu navegador. Personaliza escala, tamaño y color de fondo. Gratis, privado, sin carga.
- Convertidor de PNG a SVG Convertidor de PNG a SVG gratis en línea. Convierte PNG, JPG y otros mapas de bits en SVG vectorial escalable con control de color y detalle, todo en tu navegador.
- Generador de Border Radius Creativo Generador de border radius creativo gratuito en línea. Arrastra 8 puntos o elige una forma blob para crear figuras CSS orgánicas y copiar el código al instante.
- Convertidor de Color Convertidor de color online gratuito. Convierte formatos HEX, RGB, HSL, HSV al instante con selector visual. 100% privado, funciona en tu navegador.
- Generador de Easing CSS Generador online gratuito de easing CSS. Arrastra los puntos de control de cubic-bezier en una curva interactiva, elige entre 18 presets, mira una animación de bola en bucle y copia la función de temporización al instante.
- Generador de Text Shadow CSS Generador online gratuito de text-shadow CSS. Apila varias capas de sombra con desplazamiento, desenfoque, color y opacidad, prueba presets como Neón, 3D o Retro y copia el CSS al instante.
- Generador de Clip Path CSS Generador online gratuito de clip-path CSS. Diseña formas polygon, circle, ellipse e inset con puntos arrastrables, vista previa en vivo y copia del código CSS en un clic.