Design / SVG

Gerador de ondas SVG para divisores de seções

Gere ondas SVG suaves e em camadas para a borda entre duas seções da página: escolha o número de camadas e ondas, a altura, a suavidade e a cor; depois baixe o SVG ou copie-o como plano de fundo CSS.

Gerador de ondas SVG para divisores de seções: Cada camada é uma fileira de pontos que alternam acima e abaixo de uma linha de base por uma quantidade aleatória, unidos por uma curva suave e preenchidos até a borda inferior. As camadas ao fundo são mais claras, criando uma sensação de profundidade. O SVG se adapta a qualquer largura, e a versão em CSS incorpora a imagem como um plano de fundo data URI. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria: Ferramentas para desenvolvedores
Execuções: No seu navegador
Custo: Grátis · sem cadastro
Disponibilidade: Pronto para usar

Gerador de ondas SVGProcessamento local

Roda inteiramente no seu navegador

Camadas3Ondas na horizontal3Altura das ondas60%Suavidade1Altura da imagem240 pxCor#479d1d Inverter verticalmente (para o topo de uma seção)

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

O SVG se estende a qualquer largura (preserveAspectRatio="none"), por isso se adapta a divisores de seção de largura total. Coloque-o na parte inferior de uma seção usando a cor de fundo da seção seguinte, ou inverta-o para o topo. A mesma semente aleatória sempre desenha a mesma onda.

SVG ou CSS?

O SVG inline pode ser estilizado e animado com CSS, e seu preenchimento pode usar currentColor. Como fundo em CSS, o SVG é um data URI: nada extra precisa ser carregado, mas a cor fica fixa no código. O arquivo tem algumas centenas de bytes de qualquer forma; ele pode ser otimizado ainda mais com o limpador de SVG.

Suavidade

A curva é uma spline de Catmull-Rom convertida em segmentos de Bézier cúbicos: com suavidade máxima, ela passa suavemente por todos os pontos; com suavidade zero, torna-se composta por linhas retas entre eles, criando uma borda de montanha irregular.

Como usar

Defina as camadas, o número de ondas e a altura delas.
Escolha uma cor e inverta a onda para o topo de uma seção.
Clique para criar novas ondas aleatórias; depois baixe o SVG ou copie o CSS.

Privacidade e limitações

As ondas são desenhadas no seu navegador.

Ferramentas relacionadas

Perguntas frequentes

Como uso a onda entre duas seções?

Use a cor da seção abaixo na onda e posicione-a na parte inferior da seção acima, ocupando toda a largura; inverta-a para usá-la no topo de uma seção.

As mesmas configurações geram a mesma onda?

Sim: o formato é gerado a partir de uma semente aleatória, então só muda quando você clica para criar uma nova onda.

Posso usar as ondas comercialmente?

Sim: os formatos são gerados para você e não têm restrições de licença.

Ferramenta grátis · no seu navegador execuções · não precisa de conta