Plus de traits, de remplissages, d’animations et de problèmes de design

• Le design est important de même que de savoir ce que l’on veut animer exactement !
• Par exemple la loupe ci-bas. À la fin de l’animation, pour ne conserver que la loupe sans les petits cercles, il faudrait prévoir deux animations différentes car ils sont tous faits par remplissage (propriété fill).
• Or, si cela avait été prévu en tant que design, et design d’animation, j’aurais fait les cercles avec un trait (propriété stroke), sans remplissage, comme c’est le cas dans le dernier exemple.
• Ainsi, une seule animation, une classe attribuée au groupe (<g>), fonctionne, la même animation pour toutes les loupes de cette page en fait.
• En animant les propriétés CSS stroke, stroke-width, stroke-dashoffset,  stroke-dasharray et fill, il est possible d’arriver à un tel résultat rapidement lorsque la conception est bien faite et qu’on choisit une seule itération et un animation-fill-mode sur forwards.

Un mauvais design de loupe pour une animation avec une seule itération

Une loupe mieux conçue vectoriellement pour une seule animation dans le code