Halftone Effect
Filtre SVG pur à deux états : dégradé lisse au repos, motif halftone par posterisation et érosion au survol — transition fluide, zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet est entièrement déclaratif — zéro JavaScript. Un élément <svg> caché hors écran définit deux <filter> nommés, et le CSS bascule entre eux au survol via filter: url(#halftone-filter) (repos) et filter: url(#halftone-filter-hover) (survol).
feComponentTransfer avec feFuncR/G/B type="discrete" quantize chaque canal couleur en marches discrètes. Au repos, 6 valeurs (0 0.2 0.4 0.6 0.8 1) posterisent légèrement le dégradé en bandes. Au survol, 3 valeurs (0 0.5 1) réduisent le spectre à trois blocs de couleur tranchés — chaque pixel snap à noir, mi-teinte ou couleur pleine.
feMorphology operator="erode" érode ensuite les zones colorées de radius pixels vers l'intérieur. Avec radius="1" au repos, l'effet est quasi invisible. Avec radius="5" au survol, l'érosion creuse des espaces entre les blocs posterisés : sur un dégradé à 135°, les bandes se réduisent en lignes ou points isolés, produisant le motif halftone visible.
La transition visuelle est portée par transition: filter .4s en CSS pur. Les deux <filter> coexistent dans le DOM, et le navigateur interpole le rendu entre l'état repos et l'état survol sans script.
Accessibilité
- Pas de prefers-reduced-motion dans le code fourni — la transition
filter .4sse déclenche au survol sans vérifier la préférence OS. Pour les projets accessibles, ajoutez@media (prefers-reduced-motion: reduce) { .halftone-content { transition: none } }. - Aucune animation automatique en boucle : l'effet n'est actif qu'au survol de l'utilisateur — aucun
requestAnimationFrameni timer ne tourne en arrière-plan. - Le code de base n'expose pas d'attribut ARIA sur le conteneur. Si le fond est purement décoratif, ajoutez
aria-hidden="true"au<svg>de filtres et au.halftone-container; s'il est sémantique, utilisezrole="img"etaria-label. - Le contraste du texte blanc sur le dégradé violet–rose–ambre par défaut dépasse 4,5:1 sur les zones sombres (violet) mais peut descendre en dessous sur les zones claires (ambre) — vérifiez avec un outil de contraste avant de modifier la palette.
- L'effet SVG ne crée aucune zone focusable parasite : le flux de tabulation reste intact.
Compatibilité navigateur
Nécessite SVG Filter Effects (feComponentTransfer, feMorphology) — supportés nativement dans tous les navigateurs modernes depuis 2015.
Si <code>filter: url(#id)</code> n'est pas reconnu (IE11), le dégradé s'affiche sans effet halftone — aucune erreur JS, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<svg aria-hidden="true" style="position:absolute;width:0;height:0">
<defs>
<filter id="halftone-filter"><!-- feComponentTransfer discrete + feMorphology erode radius="1" --></filter>
<filter id="halftone-filter-hover"><!-- feComponentTransfer discrete + feMorphology erode radius="5" --></filter>
</defs>
</svg>
<div class="halftone-container">
<div class="halftone-content">
<!-- overlay texte ou vide (gradient seul) -->
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| background (CSS .halftone-content) | linear-gradient(135deg, #6366f1, #ec4899, #f59e0b) | Couleurs et angle du dégradé de fond. Remplacez par votre palette ou par background-image: url(…) : le filtre SVG s'applique au rendu final quel que soit le type de fond. |
| 135deg (angle du dégradé) | 135deg | Direction du dégradé et donc des bandes halftone : 0° = haut→bas, 90° = gauche→droite, 45° = diagonale inverse. |
| tableValues (feComponentTransfer — repos) | "0 0.2 0.4 0.6 0.8 1" | Paliers de posterisation au repos. 6 valeurs = bandes fines, effet subtil. Ajoutez des valeurs intermédiaires pour plus de finesse, réduisez pour un rendu plus graphique. |
| tableValues (feComponentTransfer — survol) | "0 0.5 1" | Paliers au survol. "0 1" = binarisation totale (noir/blanc), très fort. "0 0.33 0.67 1" = 4 blocs, plus doux. Calibrez selon l'intensité voulue. |
| radius (feMorphology — repos) | 1 | Érosion au repos en pixels. 0 non valide (utiliser 0.5+) ; 1–2 quasi invisible ; 3+ amincit les bandes dès l'état normal. |
| radius (feMorphology — survol) | 5 | Érosion au survol. 3 = halftone léger, 5–7 = bandes/points bien séparés, 10+ = quasi invisible (à éviter). Calibrez selon la taille du conteneur. |
| transition: filter .4s (CSS) | .4s | Durée et easing de la transition entre les deux états. .2s = réponse immédiate, .8s ease-in-out = morphing progressif. |
FAQ
filter: url(#halftone-filter) s'applique au rendu final de l'élément, quelle que soit sa source : image <img>, background-image: url(…) ou <video>. Remplacez background: linear-gradient(…) sur .halftone-content par votre image et le filtre SVG s'applique de façon identique.feMorphology erode avec un rayon décimal (ex. 2.5) est arrondi différemment selon les moteurs SVG. Utilisez des valeurs entières (1, 2, 3…) pour un résultat cohérent entre navigateurs. De légères variations de quantification dans feComponentTransfer sont normales et attendues..halftone-container:hover .halftone-content { filter: url(#halftone-filter-hover) } et faites pointer le CSS de repos vers #halftone-filter-hover, ou définissez un troisième <filter id="halftone-static"> avec les valeurs permanentes souhaitées et affectez-le à .halftone-content.
