Discussion :

[Invité]

Manifestement, parce qu'on n'a rien d'autre à foutre un 31 décembre.......

Idem le 1er janvier !....

Ni femme ni enfants, mais.......... la grippe !!

J'ai froid, j'ai les glandes, j'ai les boules...

[NoSmoking]

Bonjour à tous,
c'est vrai qu'il aurait été dommage de décrire clairement le besoin tout de suite

Du coup, ça me fait penser à une AUTRE solution !
Plus simple :

• une seul <svg>
• on masque les <path> (en CSS)
• on les fait apparaitre progressivement

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
"use strict";
const lui = document.querySelector('#lui');
const paths = document.querySelectorAll('#lui path');
for( let i=0, lg=paths.length; i<lg; i++ )
{
  setTimeout(function(){ 
    paths[i].style.display = 'block';
  }, i*500); // apparition progressive
}

Pour l'affichage tu peux tirer avantage à utiliser window.requestAnimationFrame qui est fait justement pour de tels cas, sans plus de commentaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
const paths = [...document.querySelectorAll('#lui path')];
function affiche(){
  if( paths.length){ 
    paths.shift().style.display = 'block';
    window.requestAnimationFrame(affiche);
  }
}
affiche();