Gerador de ondas SVG
Gere formas de onda SVG em camadas com intensidade de curva, número de camadas e preenchimento sólido ou em gradiente ajustáveis, depois copie o código ou baixe um arquivo .svg.
Gerador de ondas SVG — Ajuste a intensidade da curva, escolha quantas camadas de onda empilhar e selecione um preenchimento sólido ou um gradiente vertical de cima para baixo com duas cores. Uma pré-visualização ao vivo é redesenhada enquanto você ajusta os controles, o botão Regenerar reorganiza a forma da onda a partir de uma semente, e o código SVG completo fica pronto para copiar ou baixar como arquivo .svg. Tudo é gerado diretamente no seu navegador; nenhuma configuração ou imagem é jamais enviada a um servidor.
O que é Gerador de ondas SVG?
O Gerador de ondas SVG é uma ferramenta gratuita no navegador para web designers e desenvolvedores front-end que querem divisores de onda suaves e orgânicos e fundos de destaque sem desenhar caminhos à mão. Você define a intensidade da curva, empilha de uma a oito camadas, inverte a onda para que a crista aponte para baixo ou para cima, e a preenche com uma mistura de uma única cor ou um gradiente vertical entre duas cores HEX. Cada onda é construída com um gerador pseudoaleatório baseado em semente, então pressionar Regenerar lhe dá uma forma nova mantendo as mesmas configurações, e a saída é um SVG exato e escalável que você pode colar em qualquer página HTML ou arquivo de design. Use-o para divisores de seção, rodapés, banners e fundos decorativos.
Como usar Gerador de ondas SVG
- Defina a intensidade da curva de 0 a 100 para controlar quão altas e marcantes são as cristas da onda.
- Escolha o número de camadas (1-8); mais camadas empilham ondas translúcidas para dar profundidade.
- Use Inverter para fazer a crista da onda apontar para baixo ou para cima.
- Abra Configurações para alternar entre um preenchimento sólido e um gradiente vertical e escolher as cores inicial e final.
- Pressione Regenerar para reorganizar a forma da onda até gostar.
- Copie o código SVG ou clique em Baixar para salvar um arquivo wave.svg.
Exemplos
Divisor de seção com gradiente
Defina a intensidade em torno de 50, mantenha 3 camadas, escolha um preenchimento em gradiente de azul a roxo e baixe wave.svg para colocar um divisor suave entre duas seções da página.
Onda de destaque monocromática e marcante
Aumente a intensidade, defina as camadas como 1, mude para um preenchimento sólido e inverta a onda para cima para uma crista grande e marcante atrás de um título de destaque.
Fundo de rodapé em camadas
Use 5-6 camadas com intensidade baixa a média para criar uma onda translúcida suave e empilhada que funciona bem como fundo de rodapé.
Perguntas frequentes
- O que a intensidade da curva altera?
- A intensidade (0-100) controla quanto cada crista da onda sobe e desce. Valores baixos geram ondulações suaves; valores altos geram picos altos e marcantes. A pré-visualização e o SVG são atualizados instantaneamente conforme você a altera.
- Por que pressionar Regenerar muda a forma?
- Cada onda é desenhada por um gerador pseudoaleatório baseado em semente. Regenerar incrementa a semente para que você obtenha um novo arranjo de cristas, mantendo a intensidade, as camadas, as cores e o preenchimento exatamente como definidos.
- Qual é a diferença entre preenchimento sólido e gradiente?
- O sólido mistura cada camada empilhada entre suas duas cores, enquanto o gradiente aplica um único gradiente vertical da primeira cor no topo até a segunda na base em todas as camadas. Abra Configurações para alternar e escolher as duas cores.
- Como uso o SVG baixado?
- A saída é um código SVG padrão e escalável. Copie-o diretamente no seu HTML, ou baixe wave.svg e importe-o na sua ferramenta de design ou referencie-o como imagem. Por ser vetorial, ele permanece nítido em qualquer tamanho.
- Algo é enviado a um servidor?
- Não. A onda é gerada inteiramente no seu navegador com cálculos locais, e o download .svg é construído a partir de um blob na memória. Nenhuma configuração, cor ou imagem jamais sai do seu dispositivo, então funciona offline e mantém seu trabalho privado.
Ferramentas relacionadas
Código em imagem
Transforme um trecho de código em uma imagem com realce de sintaxe no seu navegador, com mais de 20 linguagens, temas e fundos personalizados, números de linha e exportação em PNG ou SVG.
Verificador de contraste de cor
Verifique o contraste WCAG 2.1 e a pontuação APCA Lc entre uma cor de texto e de fundo, veja os selos AA, AAA e 3:1 e aplique a cor aprovada mais próxima.
Misturador de cores
Misture duas cores HEX na proporção que escolher, no espaço RGB ou Lab, e obtenha a cor intermediária como amostra e valor HEX copiável.
Gerador de tons de cor
Transforme uma cor HEX base em uma escala OKLCH, HSL ou RGB com passos ajustáveis, dicas de contraste WCAG por passo e exportação para CSS, Tailwind e JSON.