Un cas intéressant d’utilisation de CSS Blend Mode est l’amélioration du design des diagrammes et des graphes.

Diagrammes de Venn améliorés

Prenez par exemple le diagramme de Venn classique illustrant la règle "Fast, Cheap, Good" : Le markup SVG du diagramme de base pourrait être :

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <title>Project Triangle</title>
      <desc>Three overlapping circles, labelled "Good", "Fast" and "Cheap"</desc>
      <style type="text/css">
        svg {
          background: #1c1c38;
          }
        circle {
          opacity: 0.76;
          }
        text {
          font-family: Avenir Black, Avenir, sans-serif;
          font-weight: 700;
          font-size: 36px;
          }
      </style>
      <circle fill="#ED1F24" cx="163" cy="165" r="141" aria-labelledby="#fast" /> <circle fill="#55C6D9" cx="250" cy="306" r="141" aria-labelledby="#good" /> <circle fill="#FEE600" cx="337" cy="165" r="141" aria-labelledby="#cheap">      <text x="100" y="165" id="fast">FAST</text>
      <text x="310" y="165" id="good">GOOD</text>
      <text x="190" y="340" id="cheap">CHEAP</text>
  </svg>

Le résultat :

Remarquez que nous aurions pu laisser l’opacité en ligne pour chacun des cercles, puisque c’est également un attribut de présentation SVG. Je les ai intégrés comme des styles pour économiser de l’espace et éviter des répétitions inutiles. J’ai utilisé aria-labelledby pour l’accessibilité afin d’associer chaque cercle avec le texte approprié.

C’est un bon début, mais nous pouvons améliorer l’apparence du diagramme en ajoutant mix-blend-mode aux éléments circle :

circle {
  opacity: 0.76;
  mix-blend-mode: color-dodge;
}

Ce qui nous donne :

👉🏾 Nota Bene : pour parvenir au résultat espéré, les éléments auxquels on applique mix-blend-mode ne doivent pas être sur un fond blanc ou noir purs. C’est une bonne règle pour tester vos blend modes en général.\n\nTout comme opacity, nous aurions pu appliquer la version SVG native de blend-mode, les filtres <feBlend>. Comme beaucoup d’aspects récents de CSS, les blend modes ont leurs racines dans la syntaxe SVG. J’ai utilisé la version CSS dans la mesure où il s’agit d’une amélioration de la présentation, et non une obligation, et la syntaxe CSS est plus simple à écrire et à utiliser.

Graphiques à barres améliorés

Comme dans mon article sur les textes avec effets blend modes, nous pouvons utiliser les blend modes pour donner un background aux barres verticales d’un diagramme en barres. Pour cet exemple, j’ai laissé de côté les aspects liés à l’accessibilité ainsi que les légendes, pour plus de clarté. L’effet principal ici est obtenu par le fait que le SVG qui contient le diagramme en barres est lui-même inclus dans une div qui a une image de background :

div {
  background-image: url(new-york-city-skyline.jpg);
  background-size: cover;
  font-size: 0;
}
svg {
  background: #fff;
  mix-blend-mode: lighten;
}
rect {
  fill: #202020;
  width: 42.4px;
}

Nous pourrions donner un aspect plus propre à l’effet en redimensionnant l’image de background. Telles quelles, les axes des abscisses et des ordonnées prennent également l’effet. Une autre manière de faire serait d’entourer les rectangles représentant les barres avec des éléments clip-path, ce qui fonctionnerait assez comme notre effet blend-mode.

voir Better SVG Diagrams & Graphs with Blend Modes de Dudley Storey dans CodePen

(Photo par Josh Liba, sous licence CC-BY-NC-ND 2.0)