Dans un précédent article, j’ai présenté l’utilisation de SVG dans des backgrounds “carrelés”. Ces simples lignes et rayures peuvent devenir des formes complexes, et on peut les mélanger à des images bitmap via CSS Blend Modes pour créer des backgrounds “pop art”. Ces techniques permettent de créer des effets visuels plus riches avec un code plus simple et plus de flexibilité que mon essai précédent qui faisait appel aux dégradés CSS.

Motif en échiquier

Pour créer un échiquier avec SVG, il suffit d’utiliser deux éléments carrés disposés diagonalement :

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <g fill="#ccc">
    <rect width="25" height="25" />
    <rect x="25" y="25" width="25" height="25" />
  </g>
</svg>

Ce qui produit :

section#grid {
  background-image: url(checkerboard.svg), url(grace-kelly.jpg);
  background-size: 100px 100px, cover;
  background-blend-mode: overlay;
}

Cela nous donne ce bel effet :

L’image bitmap est dimensionnée pour couvrir la surface de l’élément. Le motif en échiquier se répète tous les 100px à la fois horizontalement et verticalement. Mais plutôt que de recouvrir l’image, il se mélange avec elle dans le mode overlay ( NdT : en fait ici dans le mode multiply qui est plus doux.)

Motif à pois

La même idée peut être utilisée pour recouvrir une image d’un motif à pois, à l’aide de cinq cercles SVG : un au centre exact de la viewbox et les quatre autres ayant leur centre à chaque coin.

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<style type="text/css">
  circle { fill: #f99; }
</style>
<circle cx="0" cy="0" r="100"/>
<circle cx="300" cy="0" r="100"/>
<circle cx="0" cy="300" r="100" />
<circle cx="300" cy="300" r="100"/>
<circle cx="150" cy="150" r="100"/></svg>

Ce qui crée ce pattern :

On sauvegarde ce code comme circle-grid.svg et on applique le SVG sur l’image bitmap dans le background de l’élément :

section#circles {
  background-image: url(kelly-brook-as-gilda.jpg), url(circle-grid.svg);
  background-size: cover, 100px 100px;
  background-blend-mode: multiply;
  }

voir Pop Art Backgrounds with SVG & Blend Modes de Dudley Storey dans CodePen

Conclusion

J’espère que cela vous a donné une idée de la façon dont vous pouvez mettre en œuvre vos propres idées. Il y a bien d’autres possibilités de designs de ce genre, nous les verrons dans de futurs articles.