dans la ou les catégorie(s) : code

Sur cet exemple, je vais effacer un tracé vectoriel selon le temps qui s’écoule.
La première étape consiste à dessiner le tracé sous Illustrator ou autres et l’exporter en SVG.

Une fois le SVG préparé, on l’ouvre avec un éditeur (VS Code), on ajoute un id sur la balise path et enfin un peu de CSS.

See the Pen svg, chemin et temps 01 by Benoît Wimart (@benoitwimart) on CodePen.0

À cette étape, il faut mesurer la taille du chemin… pas besoin de calcul savant, on va jouer avec la taille des pointillés. J’ajoute stroke-dasharray:0px sur mon id et avec l’inspecteur je modifie la valeur avec les flèches et la touche maj.

J’obtiens le chiffre magique de ‘4891px’, j’ajoute la même valeur en offset et le tracé disparait.

  #jens{
    stroke:#f60;
    stroke-width: 6px;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dashoffset: 4891px; /* 0 trait*/
    stroke-dasharray:  4891px; 
  }

Un codepen avec la moitié du tracé :

See the Pen svg, chemin et temps 02 by Benoît Wimart (@benoitwimart) on CodePen.0

Un peu de JavaScript

var d = new Date().getSeconds(); // le nombre de secondes 16:42:18 -> 18
var jens = document.querySelector('#jens'); // le chemin 
jens.style.strokeDashoffset = d * (4891/60) + "px"; // calcul et changement du style

Avec ce code, à chaque ouverture de la page, le chemin s’efface selon le nombre de secondes écoulées depuis la dernière minute.

See the Pen svg, chemin et temps 03 by Benoît Wimart (@benoitwimart) on CodePen.0

Version animée (requestAnimationFrame lance ou relance la fonction en visant les 60 fps)

See the Pen svg, chemin et temps 04 by Benoît Wimart (@benoitwimart) on CodePen.0