Generador de ondas SVG
Ajusta el tamaño, la forma y el color de las ondas para crear separadores o fondos de páginas web. Copia o guarda el SVG o el CSS del fondo, o guarda una imagen PNG.
Lo que puede hacer
Ajustar la forma y los colores
Ajuste la altura, el número, la posición y la dirección de relleno de la onda, y créela en uno o dos colores.
Obtener el resultado en el formato que necesita
Copie y guarde el código SVG o un fondo CSS, o guárdelo como imagen PNG.
Cómo usarlo
Elegir una forma de partida
Ajuste los valores directamente, o elija una forma similar en «Elegir una plantilla».
Ajustar el tamaño y los colores
Especifique el ancho, el alto, la amplitud y el número de ondas. Ajuste la posición inicial y la altura central en los ajustes avanzados.
Generar y comprobar el SVG
Compruebe la forma de onda generada y las zonas transparentes. Vuelva a generar tras cambiar los ajustes.
Obtener el formato que necesita
Elija SVG o un fondo CSS para copiarlo o guardarlo, o guarde el PNG.
Útil para
Dividir secciones de la página
Crear separadores en forma de onda entre secciones de contenido o encima de un pie de página.
Combinar con los colores de su sitio
Use un color sólido o un degradado para crear un recurso de fondo que combine con la combinación de colores de la página.
Formas de onda y formatos de guardado
Amplitud y número de ondas
La amplitud es la magnitud de la variación vertical, y el número de ondas es la cantidad de ciclos a lo largo de todo el ancho. No es una función para mostrar formas de onda de audio.
Posición de la onda y zonas recortadas
Cambie la posición inicial con la fase y la posición vertical con la altura central. Las partes que quedan fuera de la imagen se recortan.
Elegir entre SVG y PNG
El SVG representa la forma como vectores. El PNG guarda una imagen en las dimensiones de píxeles especificadas y conserva las zonas transparentes.
Cómo colocar un fondo CSS
El CSS especifica una imagen de fondo. Establezca el ancho y el alto del elemento donde lo use para disponer de un área donde se muestre el fondo.
Preguntas frecuentes
¿Puedo ajustar la forma de la onda y los colores?
Puede especificar valores y colores. Seleccione «Usar dos colores» para ajustar el segundo color y el ángulo del degradado.
¿Qué ocurre con los ajustes actuales si selecciono una plantilla?
Los ajustes, incluidos el ancho, el alto y los colores, se reemplazan por los de la plantilla. Ajuste los valores necesarios después de seleccionarla.
¿Cambia la vista previa al cambiar los ajustes?
Tras hacer cambios, seleccione «Generar SVG» para comprobar el resultado. El resultado generado anterior ya no está disponible para mostrarlo ni guardarlo.
¿Es el SVG una onda sinusoidal exacta?
La onda se aproxima con una curva cúbica suave. No es una forma de onda para medición matemática ni análisis de audio.
Manejo de archivos
- Entrada
- Se crea a partir de los ajustes numéricos de la onda y los colores. No es necesario seleccionar una imagen.
- Salida
- wave.svg, wave.css y wave.png. El SVG y el CSS también se pueden copiar.