Gerador de Ondas SVG
Gerador de ondas SVG grátis online: empilhe 1-5 camadas de ondas suaves, ajuste linha de base, amplitude, comprimento de onda e suavidade, aplique um gradiente de duas cores e exporte o código vetorial.
O que o gerador de ondas SVG faz?
Ele cria formas de onda decorativas como código SVG pronto para uso. Você pode empilhar de 1 a 5 camadas, cada uma com altura de linha de base, amplitude, comprimento de onda e suavidade próprios, e preencher todas com um gradiente linear de duas cores compartilhado.
Como as curvas da onda são desenhadas?
Cada camada é produzida por um gerador de paths próprio: a onda é dividida em segmentos de meio comprimento de onda e cada segmento é traçado com pontos de controle Bézier cúbicos. Assim o arquivo fica minúsculo e perfeitamente suave em qualquer zoom.
O que o controle de suavidade altera?
A 0% os segmentos viram linhas retas e a onda parece um zigue-zague. Ao aumentar, os pontos de controle Bézier se afastam e a 100% você obtém curvas senoidais completas.
Onde posso usar o SVG exportado?
Em qualquer lugar que aceite HTML ou SVG: fundos de capa, divisores entre seções, rodapés, apresentações e ferramentas de design. Cole o código copiado direto no seu HTML ou salve o arquivo .svg pelo botão de download.
A onda fica nítida em qualquer tamanho?
Sim. A exportação mantém um viewBox de 1440x480, então o gráfico é geometria vetorial pura. Estique para 100% da largura da página ou amplie para impressão: as curvas nunca desfocam nem pixelam.
Como funciona o botão Aleatorizar?
Ele sorteia um número de camadas entre 1 e 5, novos valores aleatórios para cada parâmetro e duas cores harmônicas aleatórias, redesenhando a prévia na hora. Clique quantas vezes quiser até gostar.
Posso usar as cores da minha marca?
Sim. Os dois seletores de cor definem o início e o fim do gradiente linear compartilhado por todas as camadas, então mudá-los recolore todo o grupo de ondas de uma vez.
Algum dado é enviado a um servidor?
Não. O gerador roda inteiramente no seu navegador com JavaScript puro. Suas cores e configurações nunca saem da página e o arquivo exportado é criado localmente no seu dispositivo.
Como usar Gerador de Ondas SVG
O gerador de ondas SVG cria formas de onda em camadas como código SVG limpo e pronto para colar. Cada camada é uma curva cúbica de Bézier suave preenchida com um gradiente linear de duas cores compartilhado, o que a torna perfeita para fundos de seção hero, divisores de página e decorações de rodapé. Tudo é gerado no seu navegador — nada é enviado.
- Escolha quantas camadas (1-5) você quer no seletor de Camadas. As camadas são desenhadas de trás para frente, então cada nova camada pinta sobre as anteriores.
- Escolha as cores de início e fim do gradiente com os dois seletores de cor — todas as camadas compartilham este gradiente linear.
- Ajuste cada camada com seus quatro controles: a altura da linha de base move a onda para cima ou para baixo, a amplitude define quão altas são as cristas, o comprimento de onda controla a distância horizontal entre as cristas, e a suavidade vai de linhas em zigue-zague retas (0%) a curvas senoidais completas de Bézier cúbica (100%).
- Pressione Randomizar para gerar instantaneamente uma combinação nova de quantidades de camadas, formas e cores até algo parecer certo.
- Pressione Baixar SVG para salvar um arquivo .svg, ou Copiar código para colocar a marcação SVG completa na sua área de transferência, pronta para colar em qualquer arquivo HTML ou ferramenta de design.
Para divisores de seção de site, coloque o SVG entre dois blocos e deixe-o esticar a 100% de largura — o viewBox mantém as curvas sem distorção em qualquer tamanho. Suavidade baixa com comprimentos de onda curtos dá um aspecto desenhado à mão, enquanto suavidade total com comprimentos longos parece um mar calmo.
Ferramentas relacionadas
- Otimizador SVG Otimize e comprima arquivos SVG instantaneamente no seu navegador. Remova metadados, comentários e dados desnecessários, reduza o tamanho em até 60%.
- Conversor de SVG para PNG Converta SVG para PNG, JPEG ou WebP instantaneamente no seu navegador. Personalize escala, tamanho e cor de fundo. Grátis, privado, sem upload.
- Conversor de PNG para SVG Conversor de PNG para SVG grátis online. Transforme PNG, JPG e outros bitmaps em SVG vetorial escalável com controle de cor e detalhe, tudo no seu navegador.
- Gerador de Border Radius Criativo Gerador de border radius criativo gratuito online. Arraste 8 pontos ou escolha uma forma blob para criar figuras CSS orgânicas e copiar o código na hora.
- Conversor de Cor Conversor de cor online gratuito. Converta formatos HEX, RGB, HSL, HSV instantaneamente com seletor visual. 100% privado, funciona no seu navegador.
- Gerador de Easing CSS Gerador online gratuito de easing CSS. Arraste os pontos de controle do cubic-bezier em uma curva interativa, escolha entre 18 presets, veja uma animação de bola em loop e copie a função de temporização na hora.
- Gerador de Text Shadow CSS Gerador online gratuito de text-shadow CSS. Empilhe várias camadas de sombra com deslocamento, desfoque, cor e opacidade, teste presets como Neon, 3D ou Retrô e copie o CSS na hora.
- Gerador de Clip Path CSS Gerador online gratuito de clip-path CSS. Crie formas polygon, circle, ellipse e inset com pontos arrastáveis, visualização ao vivo e cópia do código CSS em um clique.