Softonic

Gerador de Ondas SVG

Etapa 1 / 2
Próximo

As ondas curvas são os divisores de seção que toda página de destino acaba usando. Este gerador amostra uma curva senoidal suave em um único <path> preenchido, permite ajustar a amplitude, a frequência e a posição vertical, e o pinta com qualquer cor sólida, pronto para colocar entre duas seções sem nenhum CSS extra. Copie a marcação SVG inline e cole diretamente na sua página.

Como gerar uma onda SVG

  1. 1

    Defina a cor

    Escolha qualquer cor de preenchimento sólida para a onda com o seletor de cor.

  2. 2

    Ajuste a amplitude

    Aumente a amplitude (de 0 a 150) para uma curva mais profunda, ou reduza-a para uma ondulação suave.

  3. 3

    Defina a frequência

    Escolha de 1 a 8 ciclos ao longo da largura. Mais ciclos significa um padrão mais movimentado e ondulado.

  4. 4

    Escolha em cima ou embaixo

    Fixe o preenchimento na borda inferior para uma onda de rodapé, ou na borda superior para uma onda de cabeçalho.

  5. 5

    Copie o SVG

    Copie a marcação SVG inline e cole no seu HTML ou em um fundo CSS.

Onde as ondas realmente valem a pena

  • Transições de seção entre um hero colorido e um corpo branco, para que o olhar flua em vez de bater em uma linha dura.
  • Rodapés onde uma borda superior curva suaviza o bloco escuro de links.
  • Cartões de preços que querem um canto pintado sutil sem uma imagem de fundo completa.
  • Banners hero onde uma onda na borda inferior conduz o leitor até o conteúdo.

Anatomia do caminho

O gerador amostra uma curva senoidal em um único <path> preenchido dentro de um viewBox 1440 x 320:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

O caminho avança pela largura em segmentos retos curtos que traçam a onda senoidal e depois se fecha até a borda inferior (ou a superior) para formar o preenchimento sólido. Aumentar a amplitude alarga as cristas e os vales; adicionar ciclos encaixa mais deles ao longo da largura.

Deixando responsivo

  • O SVG já define preserveAspectRatio="none", então a onda se estica para preencher qualquer largura.
  • Ele vem com width="100%"; controle a altura com CSS (height: auto ou um valor fixo) como preferir.
  • Para empilhar ondas e dar profundidade, coloque duas cópias no seu próprio CSS, posicione-as de forma absoluta e dê a cada uma uma cor e uma opacidade diferentes.

Acessibilidade

As ondas são decorativas. Adicione aria-hidden="true" e role="img" para que os leitores de tela ignorem o elemento, e mantenha todo o conteúdo significativo em elementos HTML irmãos reais.

Perguntas frequentes

Use o SVG inline no seu HTML quando quiser que o preenchimento reaja a variáveis CSS (modo escuro, temas). Use background-image quando a onda for puramente decorativa e você quiser que o navegador a armazene em cache separadamente.

Sim. É um <path> vetorial com preserveAspectRatio="none", então ele escala para qualquer largura sem ficar serrilhado, ao contrário de uma imagem raster que borra ao ser ampliada.

Sim. Envolva o caminho em um SVG e anime seu atributo d ou um transform: translateX() via keyframes CSS. Mantenha o movimento sutil; animações de ondas em reprodução automática envelhecem rápido.

Normalmente bem abaixo de 1 KB, já que é um único caminho com uma só cor de preenchimento. É uma fração mínima de qualquer equivalente em PNG.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Ferramenta disponível em outros idiomas