Gerador de SVG de ondas
Ajuste o tamanho, a forma e a cor das ondas para criar divisórias ou fundos para páginas da web. Copie ou salve o SVG ou o CSS de fundo, ou salve uma imagem PNG.
O que você pode fazer
Ajuste a forma e as cores
Ajuste a altura, a quantidade, a posição e a direção de preenchimento da onda e crie-a com uma ou duas cores.
Obtenha o resultado no formato mais adequado às suas necessidades
Copie e salve o código SVG ou um fundo CSS, ou salve-o como imagem PNG.
Como usar
Escolha uma forma inicial
Ajuste os valores diretamente ou escolha uma forma semelhante em “Escolher um modelo”.
Ajuste o tamanho e as cores
Especifique largura, altura, amplitude e quantidade de ondas. Ajuste a posição inicial e a altura central nas configurações avançadas.
Gere e confira o SVG
Confira a forma de onda gerada e as áreas transparentes. Gere novamente após alterar as configurações.
Obtenha o formato necessário
Escolha SVG ou fundo CSS para copiar ou salvar, ou salve o PNG.
Útil para
Divida seções da página
Crie divisórias onduladas entre seções de conteúdo ou acima do rodapé.
Combine com as cores do seu site
Use uma cor sólida ou gradiente para criar um fundo que combine com o esquema de cores da página.
Formas de onda e formatos de salvamento
Amplitude e quantidade de ondas
A amplitude é a magnitude da variação vertical, e a quantidade de ondas corresponde ao número de ciclos em toda a largura. Esta ferramenta não exibe formas de onda de áudio.
Posição da onda e áreas cortadas
Altere a posição inicial usando a fase e a posição vertical usando a altura central. As partes fora da imagem são cortadas.
Escolha entre SVG e PNG
O SVG representa a forma como vetores. O PNG salva uma imagem nas dimensões em pixels especificadas e preserva as áreas transparentes.
Como posicionar um fundo CSS
O CSS especifica uma imagem de fundo. Defina a largura e a altura do elemento em que você a usará para criar uma área onde o fundo será exibido.
Perguntas frequentes
Posso ajustar a forma e as cores da onda?
Você pode especificar os valores e as cores. Selecione “Usar duas cores” para definir a segunda cor e o ângulo do gradiente.
O que acontece com as configurações atuais quando seleciono um modelo?
As configurações do modelo, incluindo largura, altura e cores, substituem as atuais. Depois de selecioná-lo, ajuste os valores necessários.
A prévia muda quando altero as configurações?
Depois de fazer alterações, selecione “Gerar SVG” para conferir o resultado. A versão gerada anteriormente deixa de estar disponível para exibição ou salvamento.
O SVG é uma onda senoidal exata?
A onda é aproximada por uma curva cúbica suave. Ela não representa uma forma de onda para medições matemáticas ou análise de áudio.
Tratamento de arquivos
- Entrada
- Crie a partir de valores numéricos da onda e cores. Não é necessário selecionar uma imagem.
- Saída
- wave.svg, wave.css e wave.png. Também é possível copiar SVG e CSS.