Máscara de avatar con blob
Gratis, sin registro, funciona en tu navegador.
Recortar una fotografía en un blob en lugar de en un círculo. Aquí es donde clip-path se gana su sitio: la imagen conserva su contenido y gana una silueta nueva, en vez de quedarse detrás de una forma.
La receta
| Forma | Blob orgánico |
|---|---|
| Exportar como | clip-path CSS |
| Tamaño | 620 B |
Paso a paso
- Elige Blob orgánico y baraja hasta que la silueta le siente bien a la foto.
- Exporta como clip-path CSS: obtendrás un bloque SVG en línea y una regla CSS.
- Pega el bloque SVG en cualquier parte del documento; está oculto y solo se referencia por id.
- Aplica la clase a tu imagen y dale el tamaño que indica la salida.
Lo que vas a 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…Con más detalle
Dale también `object-fit: cover` a la imagen, o una fotografía con otra proporción se deformará antes de recortarse. Y si usas más de una máscara de blob en una página, cambia el id tanto en el bloque SVG como en la regla CSS: los ids duplicados hacen que cada elemento recortado tome la forma que el navegador encontró primero.
Preguntas
¿De qué forma debería partir para Máscara de avatar con blob?
Blob orgánico, exportada como clip-path CSS. Esa combinación es la que vertebra esta página, y la vista previa de arriba es exactamente esa forma — pero es un punto de partida, no una regla. Todos los controles siguen activos en cuanto la abres.
¿Cuánto añade a la página?
Unos 620 bytes para esta combinación. Es menos que un solo icono y no necesita ninguna petición de red, porque la forma es marcado y no un archivo de imagen.
¿Funcionará en móvil?
Sí. Un divisor de onda está configurado para estirarse hasta su contenedor en lugar de mantener su proporción, que es lo que permite que una sola forma cubra cualquier ancho de pantalla sin bandas negras. Los blobs mantienen sus proporciones, porque un blob estirado no es más que una elipse.
Cada cifra y cada forma de esta página se produjeron ejecutando el generador durante la compilación, así que describen la herramienta que estás a punto de usar y no una versión que existió una vez.