Exploration d’une signature animée et problèmes de dessin

1. Signature faite au crayon sur une tablette

• On obtient un PNG qu’il faut vectoriser pour obtenir un dessin vectoriel.
• Le path devient double pour chaque lettre au lieu d’être un seul trait.
• Or, on sait que pour animer et simuler une écriture, on doit animer le trait (stroke-dashoffset), pas le fill.

2. Animer le remplissage?

• À partir du même dessin SVG (même path), pour animer le remplissage (fill), ce n’est pas par CSS mais bien avec des propriétés de <animate>, propre au SVG.
• Au lieu de mettre une couleur au fill, on utilise le linearGradient et on peut animer le remplissage, ici de gauche à droite.
• Il semble que ce svg ne fonctionne pas toujours avec les navigateurs à l’exception de Firefox. À investiguer, un jour!

  <defs>
    <linearGradient id="gauche-a-droite-1-170224">
      <stop offset="0" stop-color="#00a98c">
        <animate attributeName="offset" from="0" to="1" dur="3s" repeatCount="indefinite" />
      </stop>
      <stop offset=" 0" stop-color="#b4eae1">
        <animate attributeName="offset" from="0" to="1" dur="3s"/>
      </stop>
    </linearGradient>
  </defs>

  <path fill="url(#gauche-a-droite-1-170224)"

3. Visualiser le problème en apprenant à animer un cercle sur le path de la signature avec <animateMotion>

  <circle r="5" fill="red">
    <animateMotion dur="30s" repeatCount="indefinite"
      path="M115.9 241.4c3.9-15.8 7.7-31.6 11.8-47.3 [...]

• Pour animer sur un path, il faut utiliser <animateMotion> sur l’objet à animer.
• Une des propriétés de <animateMotion> est <path>, on remet alors le code du path SVG, ici celui de la signature.
• J’ai tenté d’utiliser un lien interne, au lieu de recopier le code, tel path d="url(#ID)", et celà n’a pas fonctionné.

4. Nouvelle signature faite au crayon, un trait simple, dans Illustrator

• Look enfantin, aurait besoin que ce soit fait avec un crayon/tablette mais pour les besoins de l’exercice, j’ai simplement tracé par dessus ma signature précédente.
• Le code a un seul path mais les lettres étant détachées, on remarque que l’effet d’écriture n’y est pas du tout.
• Donc, l’animation ressemble à la première, sans faire le tour des lettres, mais l’effet de tout s’écrire en même temps c’est dû aux lettres détachées mais comprises dans un seul path au niveau du code.
• Pour résoudre le problème, je comprends qu’il y a deux possibilités au niveau du dessin : un seul trait continue, ou plusieurs traits mais chacun bien encapsulé dans sa balise <path>, avec donc en plus une animation par path.

Au niveau d’Illustrator, j’en conclus qu’un calque = un path. Bien logique! Mais dans le cas d’une écriture ce n’est pas si simple à contrôler.

5. Dessin au crayon dans Illustrator, 3 calques, 3 paths & 3 animations dont 2 avec délais

J’ai opté pour une signature toute en lettres attachées, afin de vérifier ma conclusion. Cela fonctionne en effet.