Gerador de padrão SVG de ondas
Monte um padrão de ondas empilhadas em SVG, com cor, amplitude e número de camadas personalizáveis, para o fundo de uma seção ou um banner. Processamento 100% local no seu navegador — nada é enviado a um servidor.
Como funciona
O padrão é construído empilhando várias curvas senoidais semitransparentes, da mais alta (mais fina e mais opaca) à mais baixa (mais larga e mais suave), para dar uma sensação de profundidade semelhante à de um banner de "ondas" clássico, usado no fim de uma seção de página inicial. Cada camada tem uma defasagem ligeiramente diferente para evitar que as curvas se sobreponham perfeitamente.
O arquivo baixado mantém qualidade perfeita em qualquer tamanho?
Sim, trata-se de um SVG vetorial de verdade: você pode incorporá-lo como está em uma página web (ele se adapta à largura do contêiner por meio do viewBox) ou ampliá-lo em um programa de design sem nenhuma perda de nitidez, ao contrário de uma imagem bitmap.
Como usá-lo como fundo de seção no meu site?
Copie o código SVG e cole-o direto no seu HTML, ou baixe o arquivo e referencie-o como imagem de fundo em CSS. Para um efeito de banner no fim da seção, posicione-o com position: absolute; bottom: 0 e width: 100%.
O padrão é gerado inteiramente em JavaScript no seu navegador, sem nenhuma chamada de rede.