Logo Draw
Un emblème en trois temps — cercle, hexagone, point central — qui se dessine au trait sur un même cycle, en boucle ou une seule fois, sans JavaScript.
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 SVG de 120×120 unités contient trois éléments : un cercle de rayon 55 (.lgd-ring, trait violet de 4), un hexagone (.lgd-shape, trait magenta de 3 aux angles arrondis) et un disque plein de rayon 8 au centre (.lgd-dot). Les deux contours portent pathLength="100" et un tiret de 100 : en décalant ce tiret (stroke-dashoffset de 100 à 0), le trait apparaît depuis son point de départ.
Les trois animations partagent la même durée (--lgd-speed, 2,5 s) et se répartissent le cycle : le cercle se trace de 0 à 40 %, l'hexagone de 20 à 60 %, puis le point grossit depuis son centre et devient opaque entre 60 et 70 %. Le dessin reste complet jusqu'à la fin du cycle. En boucle (réglage par défaut), il disparaît d'un coup et recommence ; avec --lgd-repeat: 1, il se dessine une fois et reste affiché.
Les trois éléments suivent une seule horloge : le point ne s'allume qu'une fois par cycle, en grossissant depuis son propre centre (transform-box: fill-box), et l'hexagone reste calé sur le cercle d'un cycle à l'autre. --lgd-play: paused fait attendre le dessin (rien n'est visible) jusqu'à ce que vous passiez la variable à running ; masquer puis réafficher la racine rejoue le tracé depuis le début.
Accessibilité
- Décoratif : le SVG porte
aria-hidden="true". Utilisé comme logo cliquable, le nom de la marque doit être dans le lien (texte visible ouaria-label). - Mouvement réduit : avec
prefers-reduced-motion: reduce, les trois animations sont retirées et l'emblème s'affiche complet, même en attente avec--lgd-play: paused(mesuré dans les trois moteurs : 0 animation en cours, image stable). - Pas de clignotement : le point s'allume une seule fois par cycle ; en boucle, l'emblème se redessine toutes les 2,5 s.
- Contraste : le cercle violet
#8b5cf6atteint 4,7:1 sur le fond livré et 4,2:1 sur du blanc ; le magenta#d946eftombe à 3,5:1 sur blanc, assez pour un élément graphique.
Compatibilité navigateur
CSS seul. pathLength sur un cercle demande Chrome 57, Firefox 61 et Safari 14 ; transform-box (grossissement depuis le centre du point), Chrome 64, Firefox 55 et Safari 11 ; la règle de mouvement réduit, Chrome 74 et Firefox 63. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 0 erreur, les trois éléments redémarrent ensemble (1 fois en 3 s chacun), deux copies indépendantes.
Sans animations CSS, l'emblème s'affiche complet. Avant Safari 14, les tirets ignorent pathLength : le cercle et l'hexagone se dessinent en pointillés.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0600-root">
<svg class="lgd-svg" viewBox="0 0 120 120" aria-hidden="true">
<circle class="lgd-ring" pathLength="100" …/>
<path class="lgd-shape" pathLength="100" d="…"/>
<circle class="lgd-dot" …/>
</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 |
|---|---|---|
--lgd-repeat |
infinite |
1 : le logo se dessine une fois et reste affiché. |
--lgd-play |
running |
paused : rien n'est dessiné tant que vous ne repassez pas la variable à running (par exemple quand le logo devient visible). |
--lgd-speed |
2.5s |
Durée d'un cycle : les trois éléments gardent leur ordre et leurs proportions. |
--lgd-size |
120px |
Largeur du dessin (jamais plus large que son conteneur). |
--lgd-ring, --lgd-shape, --lgd-dot |
#8b5cf6, #d946ef, #6366f1 |
Couleurs du cercle, de l'hexagone et du point. |
--lgd-bg et --lgd-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale du cadre ; transparent et 0 dans un en-tête. |
| Vos propres formes | cercle, hexagone, point | Remplacez les éléments du SVG en gardant les classes (lgd-ring se trace en premier, lgd-shape ensuite, lgd-dot apparaît en dernier) et pathLength="100" sur les contours. |
FAQ
--lgd-repeat: 1 sur .fx-0600-root.--lgd-play: paused sur la racine, puis : new IntersectionObserver(e => { if (e[0].isIntersecting) racine.style.setProperty('--lgd-play', 'running'); }).observe(racine);. Pour le rejouer plus tard, masquez puis réaffichez la racine.@keyframes sur le modèle de lgdShape avec d'autres pourcentages.
