Generador de ondas SVG
Genera formas de onda SVG en capas con intensidad de curva, número de capas y relleno sólido o degradado ajustables, y copia el código o descarga un archivo .svg.
Generador de ondas SVG — Ajusta la intensidad de la curva, elige cuántas capas de onda apilar y selecciona un relleno sólido o un degradado vertical de arriba abajo con dos colores. Una vista previa se redibuja mientras modificas los controles, el botón Regenerar reorganiza la forma de la onda a partir de una semilla y el código SVG completo está listo para copiar o descargar como archivo .svg. Todo se genera directamente en tu navegador; ninguna configuración ni imagen se envía nunca a un servidor.
¿Qué es Generador de ondas SVG?
El Generador de Ondas SVG es una herramienta gratuita en el navegador para diseñadores web y desarrolladores front-end que quieren divisores de onda suaves y orgánicos y fondos de portada sin dibujar trazados a mano. Ajustas la intensidad de la curva, apilas de una a ocho capas, volteas la onda para que la cresta vaya hacia abajo o hacia arriba y la rellenas con una mezcla de un solo color o un degradado vertical entre dos colores HEX. Cada onda se construye con un generador pseudoaleatorio basado en una semilla, así que pulsar Regenerar te da una forma nueva manteniendo la misma configuración, y la salida es SVG exacto y escalable que puedes pegar en cualquier página HTML o archivo de diseño. Úsalo para divisores de sección, pies de página, banners y fondos decorativos.
Cómo usar Generador de ondas SVG
- Ajusta la intensidad de la curva de 0 a 100 para controlar la altura y el dramatismo de las crestas.
- Elige el número de capas (1-8); más capas apilan ondas translúcidas para dar profundidad.
- Usa Voltear para que la cresta de la onda vaya hacia abajo o hacia arriba.
- Abre Ajustes para alternar entre un relleno sólido o un degradado vertical y elegir los colores inicial y final.
- Pulsa Regenerar para reorganizar la forma de la onda hasta que te guste.
- Copia el código SVG o haz clic en Descargar para guardar un archivo wave.svg.
Ejemplos
Divisor de sección con degradado
Pon la intensidad en torno a 50, mantén 3 capas, elige un relleno en degradado de azul a morado y descarga wave.svg para colocar un divisor suave entre dos secciones de página.
Onda de portada de un solo color y muy marcada
Sube la intensidad, pon las capas a 1, cambia a relleno sólido y voltea la onda hacia arriba para una cresta grande y llamativa detrás de un titular de portada.
Fondo de pie de página en capas
Usa 5-6 capas con una intensidad baja o media para crear una onda translúcida suave y apilada que funciona bien como fondo de pie de página.
Preguntas frecuentes
- ¿Qué cambia la intensidad de la curva?
- La intensidad (0-100) controla cuánto sube y baja cada cresta de la onda. Los valores bajos dan ondulaciones suaves; los altos dan picos altos y marcados. La vista previa y el SVG se actualizan al instante al cambiarla.
- ¿Por qué cambia la forma al pulsar Regenerar?
- Cada onda se dibuja con un generador pseudoaleatorio basado en una semilla. Regenerar incrementa la semilla para obtener una nueva disposición de crestas manteniendo intactos la intensidad, las capas, los colores y el relleno.
- ¿Cuál es la diferencia entre relleno sólido y degradado?
- El sólido mezcla cada capa apilada entre tus dos colores, mientras que el degradado aplica un único degradado vertical del primer color arriba al segundo abajo en todas las capas. Abre Ajustes para alternar y elegir ambos colores.
- ¿Cómo uso el SVG descargado?
- La salida es código SVG estándar y escalable. Cópialo directamente en tu HTML, o descarga wave.svg e impórtalo en tu herramienta de diseño o úsalo como imagen. Al ser vectorial, se mantiene nítido a cualquier tamaño.
- ¿Se sube algo a un servidor?
- No. La onda se genera por completo en tu navegador con matemáticas locales, y la descarga .svg se construye a partir de un blob en memoria. Ninguna configuración, color ni imagen sale nunca de tu dispositivo, por lo que funciona sin conexión y mantiene tu trabajo privado.
Herramientas relacionadas
Código a imagen
Convierte un fragmento de código en una imagen PNG pulida con resaltado de sintaxis en tu navegador, con tema, fondo de degradado o transparente y relleno, sin subir nada.
Verificador de contraste de color
Comprueba la relación de contraste WCAG entre un color HEX de primer plano y uno de fondo, y si cumple AA y AAA para texto normal y grande.
Mezclador de colores
Mezcla dos colores HEX en la proporción que elijas, en espacio RGB o Lab, y obtén el color intermedio como muestra y valor HEX copiable.
Generador de tonos de color
Convierte un color HEX base en una escala de tonos 50-950 al estilo Tailwind, mezclando hacia blanco y negro, con muestra y HEX copiable.