Festão
Grátis, sem cadastro, roda no seu navegador.
Nove arcos circulares ao longo da largura — a clássica borda ondulada que se vê em toldos, ingressos e tabelas de preços. Os arcos carregam a forma, então este estilo ignora completamente o controle de aleatoriedade.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 9 |
| Amplitude | 48% |
| Aleatoriedade | 0% |
| Linha de base | 55% |
| Camadas | 1 |
| Suavidade | 100% |
| Semente | 300 |
O que vale saber
- Arcos verdadeiros em vez de curvas aproximadas, então todas as bolhas são idênticas.
- A amplitude controla a profundidade dos festões, de uma ondulação rasa a semicírculos.
- Com 382 bytes é mais leve que uma onda suave de detalhe comparável.
O que custa em bytes
Esta forma exata tem 382 bytes como SVG e 543 bytes como fundo CSS — o data URI é maior porque a codificação em porcentagem custa três caracteres para cada um que escapa. As duas cifras são da forma mostrada acima, com duas casas decimais de precisão nas coordenadas.
| Formato | Tamanho |
|---|---|
| SVG | 382 B |
| Fundo CSS | 543 B |
| clip-path CSS | 574 B |
O começo do SVG de Festão
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-160 176A80 52.53 0 0 1 0 176A80 52.53 0 0 1 160 176A80 52.53 0 0 1 320 176A80 52.53 0 0 1 480 176A80 52.53 0 0 1 640 176A80 52.53 0 0 1 800 176A80 52.53 0 0 1 960 176A80 52.53 0 0 1 1120 176A80 52.53 0 0 1 1280 176A80 5…Em mais detalhe
O controle de aleatoriedade é ocultado neste estilo em vez de deixado inerte. Festões são definidos por serem regulares — deixar o ruído mover as extremidades dos arcos daria bolhas em alturas inconsistentes, o que se lê como falha de renderização e não como textura, então o gerador mantém os pontos na linha de base e deixa os arcos fazerem o trabalho.
Perguntas
Como eu altero Festão depois de obtê-la?
Abra o gerador, clique em Festão na fileira de predefinições e arraste o que quiser. A predefinição é um ponto de partida, não uma trava — todos os controles continuam ativos, e a caixa de semente aceita uma palavra se você preferir nomear sua forma em vez de numerá-la.
Vai ficar igual da próxima vez?
Sim, desde que a semente seja a mesma. Esta é a semente 300 com 9 pontos. O gerador é determinístico, então essas configurações reproduzem esta curva exata em qualquer dispositivo.
Posso usar outra cor?
Pode — a cor é aplicada na exportação, não está embutida na geometria. A pré-visualização acima usa a cor padrão da ferramenta; escolha a sua no gerador e o SVG, o fundo CSS e o clip-path acompanham.
Cada número e cada forma desta página foram produzidos rodando o gerador no momento do build, então descrevem a ferramenta que você está prestes a usar e não uma versão dela que já existiu.