Blob sem SVG nenhum
Grátis, sem cadastro, roda no seu navegador.
Quando você quer uma forma orgânica mas não pode — ou prefere não — acrescentar um SVG: uma biblioteca de componentes cuja marcação você não controla, um modelo de e-mail, um bloco de CMS que remove elementos desconhecidos.
A receita
| Forma | Seixo |
|---|---|
| Exportar como | border-radius CSS |
| Tamanho | 104 B |
Passo a passo
- Mude para o gerador de blobs e escolha Seixo.
- Escolha border-radius CSS na fileira de exportação.
- Copie a declaração para qualquer elemento que já tenha largura e altura.
- Ajuste a aleatoriedade e copie de novo até a silhueta combinar — há só quatro cantos com que trabalhar.
O que você vai copiar
.blob {
width: 320px;
height: 320px;
border-radius: 46% 52.2% 40.5% 40% / 49.8% 56.1% 39.1% 45%;
}Em mais detalhe
Saiba do que você está abrindo mão. Um blob de border-radius tem quatro cantos, cada um um quarto de arco elíptico, então ele só pode ser um retângulo arredondado deformado — não consegue ter seis lóbulos por mais que os números sejam escolhidos. O que você ganha em troca é real: uma propriedade, nenhuma marcação extra, e ele faz transição e anima suavemente, o que um caminho SVG não faz sem bem mais trabalho.
Perguntas
De qual forma devo partir para Blob sem SVG nenhum?
Seixo, exportada como border-radius CSS. Essa combinação é a que estrutura esta página, e a pré-visualização acima é exatamente essa forma — mas é um ponto de partida, não uma regra. Todos os controles continuam ativos assim que você a abre.
Quanto isso adiciona à página?
Cerca de 104 bytes para esta combinação. É menos que um único ícone e não precisa de nenhuma requisição de rede, porque a forma é marcação e não um arquivo de imagem.
Vai funcionar no celular?
Sim. Um divisor de onda é configurado para esticar até o contêiner em vez de manter a proporção, e é isso que permite que uma única forma cubra qualquer largura de tela sem tarjas. Blobs mantêm as proporções, já que um blob esticado é só uma elipse.
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.