Voronoi Pattern
Vrai diagramme de Voronoi en SVG : douze points dérivent lentement et chaque cellule, recalculée à chaque image, garde un dégradé centré sur son point.
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
Un diagramme de Voronoi découpe une surface en cellules : chaque cellule rassemble tous les endroits plus proches de son point (son germe) que de n'importe quel autre. Le script le calcule exactement. Pour chaque germe, il part du rectangle de la zone et le coupe successivement par la médiatrice qui le sépare de chacun des autres germes ; ce qui reste est le polygone de la cellule, écrit dans un <polygon> SVG. Avec 12 germes, cela fait 132 découpes par image, un calcul négligeable.
Les germes partent d'une position et d'une direction au hasard, avancent à 18 px par seconde (data-speed) et rebondissent sur les bords. Le déplacement est multiplié par le temps écoulé depuis l'image précédente, plafonné à 50 ms : même vitesse sur un écran 60 Hz ou 120 Hz, pas de bond au retour d'un onglet. Chaque cellule a un radialGradient centré sur son germe, de sa couleur pleine à 18 % d'opacité ; les joints sont tracés dans la couleur du fond et un petit point clair marque chaque germe. Par-dessus, la teinte dérive lentement (hue-rotate de 0 à 60° puis retour, en 10 s).
La zone prend la largeur de son parent et la hauteur --vrn-height (300 px). Un ResizeObserver recale le repère SVG et la position des germes quand la zone change de taille, y compris quand elle sort d'un onglet ou d'un accordéon fermé. Un IntersectionObserver arrête le calcul quand le diagramme n'est plus à l'écran. Chaque copie a ses propres dégradés, avec des identifiants tirés au hasard : deux diagrammes dans la page ne se volent jamais leurs couleurs. Avec data-pointer="follow", le premier germe suit le pointeur tant qu'il survole la zone : sa cellule se déplace sous la souris et repousse les voisines.
Accessibilité
- Fond décoratif : le SVG porte
aria-hidden="true"et ne contient aucun texte. Si le diagramme accompagne un titre, écrivez ce titre dans la page, pas dans le dessin. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les germes ne bougent plus et la teinte ne dérive plus ; le diagramme est dessiné une fois, net. L'optiondata-pointer="follow"reste active, car c'est l'utilisateur qui déplace la cellule. - Clavier : rien à activer. Le suivi du pointeur est un agrément visuel sans équivalent clavier, et aucune information ne dépend de lui.
- Toucher : avec
data-pointer="follow", un toucher place la cellule sous le doigt et un glissé court l'entraîne ; dès que le navigateur fait défiler la page, il interrompt le suivi et la cellule repart de là. Le défilement n'est jamais bloqué. - Texte par-dessus : les cellules sont vives. Posez le texte sur un fond à lui (carte, pastille sombre), comme dans les exemples.
Compatibilité navigateur
SVG dessiné en JavaScript, sans canvas ni bibliothèque. ResizeObserver (Chrome 64, Firefox 69, Safari 13.1) fixe les versions minimales relevées dans les données MDN ; les Pointer Events (Safari 13) et IntersectionObserver (Safari 12.1) sont plus anciens. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 12 cellules par copie, deux copies indépendantes, suivi du pointeur sur la deuxième copie, repère recalculé quand la zone passe de 400 à 800 px, immobile en mouvement réduit.
Sans JavaScript, la zone garde seulement sa couleur de fond. Sans ResizeObserver, le diagramme suit les redimensionnements de la fenêtre mais pas ceux de son seul conteneur ; sans IntersectionObserver, il continue de se calculer hors de l'écran.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0613-root" data-points="12">
<svg class="vrn-svg" aria-hidden="true"></svg>
</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 |
|---|---|---|
data-points (racine) |
12 | Nombre de germes, donc de cellules (2 à 60). Au-delà de 30 sur une petite zone, les cellules deviennent des éclats. |
data-speed (racine) |
18 | Vitesse des germes en pixels par seconde ; 0 donne un diagramme fixe. |
data-colors (racine) |
#6366f1, #8b5cf6, #d946ef, #06b6d4, #f43f5e, #22c55e, #f59e0b | Couleurs des cellules, séparées par des virgules, attribuées à tour de rôle. |
data-pointer="follow" (racine) |
absent | Le premier germe suit le pointeur pendant le survol, puis reprend sa dérive. |
--vrn-line |
2px | Largeur des joints entre cellules, tracés dans la couleur --vrn-bg. |
--vrn-seed |
rgba(255,255,255,.75) | Couleur des points qui marquent les germes ; transparent les cache. |
--vrn-hue-speed |
10s | Durée d'un aller-retour de la dérive de teinte (0 → 60° → 0). |
--vrn-height / --vrn-bg |
300px / #0a0a0f | Hauteur de la zone et couleur des joints et du fond. |
FAQ
build() pour lire vos coordonnées et mettre data-speed="0".
