Máscara de avatar em blob
Grátis, sem cadastro, roda no seu navegador.
Recortar uma fotografia num blob em vez de num círculo. É aqui que o clip-path justifica seu lugar — a imagem mantém o conteúdo e ganha uma silhueta nova, em vez de ficar atrás de uma forma.
A receita
| Forma | Blob orgânico |
|---|---|
| Exportar como | clip-path CSS |
| Tamanho | 620 B |
Passo a passo
- Escolha Blob orgânico e sorteie até a silhueta combinar com a foto.
- Exporte como clip-path CSS — você receberá um bloco SVG inline e uma regra CSS.
- Cole o bloco SVG em qualquer lugar do documento; ele fica oculto e é só referenciado por id.
- Aplique a classe à sua imagem e dê a ela o tamanho que a saída especifica.
O que você vai copiar
<svg width="0" height="0" style="position:absolute">
<defs>
<clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
<path d="M100 54.85C116.91 53.97,145.16 39.06,153.41 46.59C161.66 54.11,150.46 83.17,149.49 100C148.51 116.83,155.8 138.58,147.55 147.55C139.3 156.52,117.11 152.56,100 153.82C82.89 155.08,56.37 164.08,44.89 155.11C33.41 146.14,29.94 117.2,31.11 100C32.28 82.8,40.44 59.45,51.92 51.92C63.4 4…Em mais detalhe
Dê também `object-fit: cover` à imagem, ou uma fotografia com outra proporção vai distorcer antes de ser recortada. E se você usar mais de uma máscara de blob numa página, troque o id tanto no bloco SVG quanto na regra CSS — ids duplicados fazem cada elemento recortado assumir a forma que o navegador encontrou primeiro.
Perguntas
De qual forma devo partir para Máscara de avatar em blob?
Blob orgânico, exportada como clip-path 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 620 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.