Borda de nuvem
Grátis, sem cadastro, roda no seu navegador.
Os mesmos arcos de um festão, mas bem menos e bem mais profundos, o que deixa de se ler como borda decorativa e passa a se ler como um objeto — especificamente, como uma nuvem. Bom acima de um rodapé ou abaixo de um hero quando se quer algo simpático em vez de neutro.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 5 |
| Amplitude | 82% |
| Aleatoriedade | 0% |
| Linha de base | 50% |
| Camadas | 1 |
| Suavidade | 100% |
| Semente | 301 |
O que vale saber
- Poucos arcos e grandes: quanto menos bolhas, mais se lê como forma e menos como acabamento.
- Combine com uma cor suave; nesta escala uma cor saturada domina a seção.
- Apenas 295 bytes para uma forma deste tamanho.
O que custa em bytes
Esta forma exata tem 295 bytes como SVG e 456 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 | 295 B |
| Fundo CSS | 456 B |
| clip-path CSS | 487 B |
O começo do SVG de Borda de nuvem
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 160A144 99.71 0 0 1 0 160A144 99.71 0 0 1 288 160A144 99.71 0 0 1 576 160A144 99.71 0 0 1 864 160A144 99.71 0 0 1 1152 160A144 99.71 0 0 1 1440 160L1440 320L-288 320Z" fill="#4f46e5"/></svg>Em mais detalhe
Experimente esta espelhada na vertical e com os arcos recortados para dentro. Os mesmos cinco arcos que se leem como uma nuvem pendurada se leem como uma fileira de nichos quando mordem para cima dentro do preenchimento, e isso é um divisor genuinamente diferente a partir das mesmas quatro configurações.
Perguntas
Como eu altero Borda de nuvem depois de obtê-la?
Abra o gerador, clique em Borda de nuvem 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 301 com 5 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.