Pour comprendre comment le tampon que nous avons créé fonctionne, il faut analyser l'interaction entre trois technologies : le HTML (la structure), le CSS (le style et le déclencheur) et le SVG (le moteur de calcul des défauts graphiques).

Voici comment ces éléments communiquent et collaborent pour créer l'effet visuel final :

1. Le HTML : L'ancrage des éléments

Le fichier HTML fournit la structure de base. Il contient deux éléments distincts qui vont être connectés :

2. Le CSS : Le pont de liaison

Le CSS joue le rôle de traducteur et de chef d'orchestre. Il applique le style classique (couleur rouge vif, police Impact, inclinaison) et ordonne au navigateur d'appliquer le filtre SVG au texte HTML grâce à cette propriété :

filter: url(#degradation-tampon);

Cette seule ligne indique au moteur de rendu du navigateur : "Prends le texte HTML classique, et avant de l'afficher, passe-le à travers la machine à calculer du filtre SVG qui porte cet ID."

3. Le SVG : La fabrique de défauts numériques

C'est à l'intérieur du SVG que la magie de la déformation opère. Le filtre SVG reçoit le texte net du HTML (appelé SourceGraphic) et lui fait subir un traitement en 3 étapes :

Étape A : La création du bruit brut

<feTurbulence type="fractalNoise" baseFrequency="0.15" numOctaves="5" result="bruit" />

Le SVG génère un motif de texture aléatoire invisible, une sorte de "brouillard" de pixels gris (le bruit fractal). Plus le nombre d'octaves est élevé (ici 5), plus ce brouillard est détaillé et rugueux. Ce résultat est nommé bruit.

Étape B : La déformation des contours

<feDisplacementMap in="SourceGraphic" in2="bruit" scale="6" xChannelSelector="R" yChannelSelector="G" result="deforme" />

Cette instruction croise le texte net d'origine (SourceGraphic) avec le bruit. Le SVG utilise les variations du brouillard pour déplacer physiquement les pixels rouges du texte. Les zones droites deviennent tremblantes, tordues et baveuses. Le résultat déformé est nommé deforme.

Étape C : La création des micro-trous

<feComponentTransfer in="deforme" result="trous">
<feFuncA type="linear" slope="0.9" />
</feComponentTransfer>

Le filtre modifie l'opacité (le canal Alpha feFuncA) pour percer le texte de milliers de micro-trous invisibles à l'œil nu, simulant un manque d'encre sur le papier poreux.

Étape D : La fusion finale

<feBlend mode="multiply" in="SourceGraphic" in2="trous" />

Le filtre fusionne le texte d'origine avec le texte texturé et troué en mode "produit" (multiply), puis le renvoie au CSS qui l'affiche enfin à l'écran.

Résumé du flux d'interaction

  1. HTML déclare le texte et le filtre.
  2. CSS capture le texte et l'envoie au filtre SVG via url(#id).
  3. SVG déforme les contours et perce des trous dans le texte.
  4. CSS récupère le résultat modifié, lui applique la rotation à -10° et l'affiche à l'utilisateur.

Les corrections appliquées dans le SVG :