Les masques (et un début de solution aux problèmes de dessin)

1. Quatre variations avec un masque animé

Expérimentation avec un masque comportant un dégradé

Exercice de base faisant parti du tutoriel Learn SVG Animation – With HTML, CSS & Javascript sur Udemy.

Base

Technique de l’élément SVG <mask>

Extrait de code pour visualiser qu’il faut déboubler les <path>s dans l’élément <mask>, et ensuite les afficher. Ici, on applique le masque au tube (#devoile) alors que le cercle reçoit une animation CSS (#demasque-1-2102024).

<defs>
  <mask id="devoile">
    <path class="tube" fill="#020202" d="M136.07 ..." />
    <circle id="demasque-1-2102024" fill="#fff" cx="66.836" cy="50.356" r="34" />
  </mask>
</defs>

<path mask="url(#devoile)" fill="#020202"class="tube" fill="gray"d="M136.07 ..." />
<circle id="demasque-1-2102024" fill="none" cx="66.836" cy="50.356" r="34" />
</svg>

Un avancement pour la préparation des SVG dans Adobe Illustrator

Pour l’exercice de masque, le mot EXPERIMENT en SVG était fourni. J’ai voulu faire mon propre mot et comme les tutos ne montrent pas comment préparer les fichiers SVG, j’ai eu à chercher comment faire pour créer un seul et unique path dans Adobe Illustrator car mon exercice ne fonctionnait pas 🙁 C’est en ouvrant le fichier fournit que j’ai remarqué dans les calques qu’il s’agissait d’un compound path et non pas d’un path!

Enfin, ceci pourrait régler, en partie, les problèmes de dessin rencontré jusqu’à présent, notament avec les signatures, pour avoir un seul path et donc une seule animation continue. Pour ce, il faut faire un Compound path (Object > Coumpound Path > Make).

Variation #1

J’ai voulu rendre l’effet de dévoiler quelque chose de flou avec un verre ou une loupe, en plus d’ajouter un trait autour du cercle.

Variation #2

Je n’ai pas aimé que le flou reste lorsque l’animation de dévoilement passe. J’ai donc retravaillé pour rendre l’effet souhaité.

Comprendre la variation #2 : deux masques et 4 cercles animés

Un cercle qui dévoile le texte et un cercle qui masque le texte flou, et chacun d’eux ont un deuxième cercle avec le contour noir (stroke) qui les suivent.

2. Masque avec un png externe

Je l’avais déjà fait lorsque je testais du grain pour une première fois. Cette fois-ci l’image est externe, dans les <defs>, et ensuite appliqué comme un masque. Le résultat est pas mal mieux que celui obtenu avec un filtre de grain dans Adobe Illustrator.

  <defs>
    <mask id="masque-1-20022024">
      <image height="400" width="600" x="0" y="0"
        xlink:href="https://phospixel.com/
              wp-content/uploads/2024/02/photos....png"
    </mask>
</defs>
<text x="22" y="100" class="texte-01-20022024" 
        mask="url(#masque-1-20022024)">Texture type Alpha
</text>

• Le positionnement x et y permet de déplacer l’image dans le masque.
• Le PNG est une texture en valeurs de gris. Il agit tel tout masque alpha : le noir bloque et le blanc laisse passer la couleur.
• Le fichier png est dans la bibliothèque de WordPress, celà allège le code de plus de 14 milles lignes!!
• Remarquez le xlink, sa fin est déjà annoncée avec le SVH 2, une solution CSS serait à privilégier.

image height="400" weight="600" : un problème à régler pour l’adaptabilité ?

Mask vs clipPath et clip-path

Même si je n’ai pas encore tester les clipPath (SVG) ou clip-path (CSS), je sais qu’ils permettent d’afficher ou non une partie d’une image. Je me demandais par contre le contexte d’utilisation par rapport aux masques et cet article très imagé aborde très bien la question.

En gros, les masques sont beaucoup plus puissant car on peut faire des dégradés. Les clipPath c’est noir ou blanc, ça passe ou pas, c’est visible ou non, il n’y a pas d’entre-deux.