Masque d'avatar en blob
Gratuit, sans inscription, fonctionne dans votre navigateur.
Découper une photographie en blob plutôt qu'en cercle. C'est là que clip-path justifie sa place — l'image conserve son contenu et reçoit une nouvelle silhouette, au lieu de se placer derrière une forme.
La recette
| Forme | Blob organique |
|---|---|
| Exporter en | clip-path CSS |
| Taille | 620 B |
Étape par étape
- Choisissez Blob organique et mélangez jusqu'à ce que la silhouette convienne à la photo.
- Exportez en clip-path CSS — vous obtiendrez un bloc SVG en ligne et une règle CSS.
- Collez le bloc SVG n'importe où dans le document ; il est masqué et uniquement référencé par id.
- Appliquez la classe à votre image et donnez-lui la taille que la sortie précise.
Ce que vous allez copier
<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…Plus en détail
Donnez aussi `object-fit: cover` à l'image, sans quoi une photographie d'un autre rapport d'aspect se déformera avant d'être découpée. Et si vous utilisez plusieurs masques de blob sur une page, changez l'id à la fois dans le bloc SVG et dans la règle CSS — des id en double font que chaque élément découpé prend la forme que le navigateur a trouvée en premier.
Questions
De quelle forme partir pour Masque d'avatar en blob ?
Blob organique, exportée en clip-path CSS. C'est le couple autour duquel cette page est construite, et l'aperçu ci-dessus est exactement cette forme — mais c'est un point de départ, pas une règle. Tous les curseurs restent actifs dès que vous l'ouvrez.
Combien cela ajoute-t-il à la page ?
Environ 620 octets pour cette combinaison. C'est moins qu'une seule icône et cela ne demande aucune requête réseau, puisque la forme est du balisage et non un fichier image.
Est-ce que ça marchera sur mobile ?
Oui. Un séparateur en vague est réglé pour s'étirer à son conteneur plutôt que conserver ses proportions, et c'est ce qui permet à une seule forme de couvrir n'importe quelle largeur d'écran sans bandes noires. Les blobs gardent leurs proportions, puisqu'un blob étiré n'est qu'une ellipse.
Chaque chiffre et chaque forme de cette page ont été produits en exécutant le générateur au moment de la compilation : ils décrivent donc l'outil que vous vous apprêtez à utiliser, et non une version qui a existé un jour.