Image révélée au grattage avec SVG et Blend Modes

Encore une association de SVG et CSS Blend Modes pour de nouveaux effets créatifs. Dudley Storey anime une ligne multiple SVG et révèle un (joli) contenu en arrière-plan. Très malin!

Par

En associant les animations CSS, SVG dash-array et blend modes, nous pouvons recréer un effet d’image “révélée au grattage” en quelques étapes simples.

Le procédé

1 - Créez un élément SVG aux mêmes dimensions que le contenu que vous souhaitez révéler et dessinez une polyligne, une ligne, ou un chemin qui recouvre le canevas d’un côté à l’autre, en lui donnant une bonne épaisseur de trait avec stroke-width.

image
Le griffonnage réalisé sur Illustrator avant son export en format SVG

2 - Sauvegardez le SVG et insérez-le dans une page HTML à l’intérieur d’un élément <div>. Le code ressemblera à quelque chose comme ceci :

    <div id="stripped">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1062">
    <polyline points="0,154 131,0 0,348 269,0 0,562 437,0 0,766 565,14 0,1062 719,0 289,1062 843,0 543,1062 995,0 729,1062 1161,0 947,1062 1307,0 1143,1062 1500,162 1299,1062 1500,830"/>
    </svg>
    </div>

3 - Appliquez un style CSS aux éléments et placez l’image en arrière-plan de la div via background-image :

    div#stripped {
      background: #000;
      background-image: url(olga.jpg);
      background-size: cover;
      font-size: 0;
    }
    div#stripped svg {
      background: #fff;
    }
    div#stripped svg polyline {
      fill: none;
      stroke: #000;
      stroke-width: 200;
    }

Les couleurs utilisées ici sont absolument nécessaire pour que cette démo fonctionne, mais il y a pas mal de variations possibles, discutées ci-dessous.

4 - Arrivé ici, votre image sera pour l’essentiel rendue invisible par la polyligne. Éliminons-la en donnant aux attributs stroke-dasharray et stroke-dashoffset une valeur suffisamment élevée.

    div#stripped svg polyline {
      stroke-dasharray: 20000;
      stroke-dashoffset: 20000;
    }

Nous n’appliquons pas de “nombre magique” ici, la bonne valeur dépendra de la taille et de la longueur de l’élément <polyline> et nous demandera de procéder à vue.

5 - Appliquez le bon blend mode à l’élément <svg> et animez le stroke-dashoffset de la polyligne vers 0 :

    @keyframes scribble {
      to { stroke-dashoffset: 0; }
    }
    div#stripped svg polyline {
      animation: scribble 3s linear forwards;
    }
    div#stripped svg {
      mix-blend-mode: lighten;
    }

Nous obtenons une belle image révélée au grattage.( NdT : rafraîchir la page pour (re)voir l’effet).


Variations

Il y a de nombreuses variantes de cette technique, dont l’altération des couleurs et des blend modes pour parvenir à des effets visuels différents, par exemple en utilisant cette combinaison :

div#stripped {
  background: #000;
  background-image: url(olga.jpg);
}
div#stripped svg {
  background: #000;
  mix-blend-mode: darken;
}
div#stripped svg polyline {
  fill: none;
  stroke: #f00;
}

...qui nous donne l’effet ci-dessous ( NdT : rafraîchir la page pour voir l’effet) :


Autres possibilités :

  • La <polyline> pourrait être tracée automatiquement avec JavaScript plutôt que manuellement.
  • On pourrait aussi imaginer une série d’éléments <line> rayant l’image dans tous les sens. Ces lignes seraient animées de manière séquentielle pour faire apparaître l’image.

Limites

Pour l’instant, il n’existe pas de méthode en SVG pour modifier les arêtes des traits de <polyline> si l’on veut leur donner une apparence plus brute ou plus proche d’un trait de pinceau, cependant ce point devrait être réglé dans la prochaine version SVG2.


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur SVG parus dans la Cascade.

Tous les articles sur Blend Modes parus dans la Cascade.


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.