Créer de superbes diagrammes avec SVG et Blend Modes

Une nouvelle association de SVG et CSS Blend Modes pour de nouveaux effets créatifs. De quoi vous faire regretter le bureau, les graphiques et les diagrammes en camembert. Merci Dudley!

Par

Un cas intéressant d’utilisation de CSS Blend Modes 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 :

Project TriangleThree overlapping circles, labelled "Good", "Fast" and "Cheap"FASTGOODCHEAP

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 :

image

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.

Tout 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.

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


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, the new code.

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.