SVG Clip Path
Un bloc découpé en étoile à cinq branches par un vrai clipPath SVG, qui pivote et grossit au survol ; dégradé, texte ou photo à l'intérieur.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le HTML contient un petit SVG invisible (width="0" height="0") qui ne sert qu'à définir un <clipPath> : un polygone de 10 points, les 5 pointes et les 5 creux d'une étoile régulière. Ses coordonnées vont de 0 à 1 (clipPathUnits="objectBoundingBox") : l'étoile se cale sur la boîte de l'élément découpé, quelle que soit sa taille.
Le bloc .stc-star est un carré (aspect-ratio:1, 200 px par défaut) rempli d'un dégradé rose → magenta, découpé par clip-path:url(#…). Tout ce qui est dedans est découpé avec lui : le mot « Star » centré, ou une <img> qui remplit le carré (object-fit:cover). Au survol de la souris, au focus d'un lien placé dans l'étoile, ou avec la classe stc-on, il pivote de 15° et grossit de 10 % en 0,3 s.
Le petit script donne à chaque copie son propre id de clipPath (fx-0623-star- suivi de caractères tirés au hasard) et le reporte dans le clip-path de son étoile. Deux étoiles sur une même page ne dépendent donc jamais l'une de l'autre, même si la première est dans un onglet fermé. Sans JavaScript, l'id fixe fx-0623-star du HTML sert de valeur par défaut.
Accessibilité
- SVG caché : le SVG de définition porte
aria-hidden="true"etfocusable="false"; il ne dessine rien et n'est pas annoncé. - Contenu lisible : le texte dans l'étoile est un vrai
<span>. Une photo placée dedans garde sonalt; laissez-le vide si le nom de la personne est écrit juste à côté, comme dans l'exemple de la banque alimentaire. - Clavier et toucher : l'étoile elle-même n'est pas un contrôle. Si elle contient un lien ou un bouton, le focus clavier déclenche la même inclinaison (
:focus-within). Au toucher, il n'y a pas de survol : la règle:hoverest réservée aux appareils qui en ont un (@media (hover:hover)), pour éviter une étoile qui reste penchée après un appui ; ajoutezstc-onen JS si l'inclinaison doit suivre un appui. - Mouvement réduit : avec
prefers-reduced-motion: reduce, la transition est supprimée ; l'étoile change d'angle d'un coup, sans rotation animée.
Compatibilité navigateur
clip-path:url() vers un <clipPath> SVG sur un élément HTML (préfixe -webkit- inclus), aspect-ratio, inset, @media (hover:hover). Mesuré dans Chromium, Firefox et WebKit (Playwright) : étoile découpée (retirer le découpage change 14,7 % de l'image), inclinaison au survol, deux copies avec des id distincts, copie seule affichée quand la première est masquée, 390 px, mouvement réduit.
Sans aspect-ratio (navigateurs plus anciens que ceux de la liste), le bloc perd sa hauteur : donnez-lui une hauteur égale à --stc-size. Si le clipPath ne s'applique pas, on voit le carré entier, contenu compris.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0623-root">
<svg class="stc-defs" width="0" height="0" aria-hidden="true" focusable="false">
<clipPath id="fx-0623-star" clipPathUnits="objectBoundingBox">
<polygon points="0.500,0.048 0.612,0.393 0.976,0.393 0.682,0.607 0.794,0.952 0.500,0.739 0.206,0.952 0.318,0.607 0.024,0.393 0.388,0.393"/>
</clipPath>
</svg>
<div class="stc-star">
<span class="stc-label">Star</span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille (CSS — --stc-size) |
200px | Côté du carré découpé ; l'étoile suit, ses proportions ne changent pas. |
Remplissage (CSS — --stc-fill) |
linear-gradient(135deg, #f43f5e, #ec4899, #d946ef) | Toute valeur de background : couleur, dégradé, image. Une <img> placée dans .stc-star le remplit aussi. |
Inclinaison (CSS — --stc-tilt) |
15deg | Angle pris au survol ; une valeur négative tourne dans l'autre sens, 0deg garde seulement l'agrandissement. |
Agrandissement (CSS — --stc-grow) |
1.1 | Échelle au survol. Prévoyez la place autour : à 1,25, une étoile de 200 px occupe 250 px. |
Durée (CSS — --stc-speed) |
.3s | Durée de la transition à l'aller comme au retour. |
État actif sans survol (classe stc-on sur .stc-star) |
absente | Même inclinaison que le survol, à poser en JS : appui au toucher, récompense, survol d'un parent. |
Fond et hauteur du bloc (CSS — --stc-page, --stc-height) |
#0a0a0f / 300px | transparent et 0px pour poser l'étoile dans une carte, un badge ou une ligne d'icônes. |
Forme (HTML — points du <polygon>) |
étoile à 5 branches | Coordonnées entre 0 et 1. Pour une étoile plus fine, rapprochez les 5 points creux du centre (0,5 ; 0,5). |
FAQ
clip-path pointe vers un id qui n'existe pas dans la page : SVG de définition oublié au collage, ou id modifié à la main. Gardez le SVG .stc-defs dans la racine ; le script relie lui-même chaque étoile à son clipPath.<span class="stc-label"> par <img src="photo.jpg" alt="…">. Elle remplit le carré (object-fit:cover) puis l'ensemble est découpé. Cadrez le sujet au centre : les pointes ne gardent que de fines bandes de l'image.stc-on dans un écouteur pointerdown, ou mettez un lien dans l'étoile : le focus fait le même effet.
