Un récent dossier de travail réalisé par un de mes étudiants utilisait une image de background “en écailles”, très intéressante, encodée en base64. J’ai décodé la texture puis j’ai apporté quelques améliorations au SVG. Pour compléter, j’ai créé un background hexagonal simple que je partage ici.

Motif en écailles

Pour les écailles, le balisage est assez simple :

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="scales" width="30" height="30"
    patternUnits="userSpaceOnUse"  patternTransform="scale(2)">
            <g id="curves">
                <path id="inner" d="M0 0c0,30, 30,30 30,0" />
                <path id="outer" d="M0 0c0,30, 30,30 30,0" />
            </g>
            <use x="15" y="15" xlink:href="#curves" />
            <use x="-15" y="15" xlink:href="#curves" />
            <use x="0" y="0" xlink:href="#curves" />
            <use x="15" y="-15" xlink:href="#curves" />
            <use x="-15" y="-15" xlink:href="#curves" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#scales)" />
</svg>

Le SVG utilise la technique standard du <pattern> que j’ai déjà illustrée dans de précédents articles (par exemple : motifs japonais, diagonales et motifs SVG en background) . Moins habituel, le motif utilisé dans le pattern est un élément “groupe”.

L’arrière-plan SVG est associé aux styles suivants :

svg {
  background: #0F7173;
}
#scales {
  fill: #0F7173;
}
#inner {
    stroke: #0c4c4d;
    stroke-width: 3.1;
}
#outer {
  stroke: #098f92;
  stroke-width: 0.9;
}

voir écailles SVG de dudleystorey dans CodePen

Remarquez que l’élément SVG et les écailles utilisent la même couleur pour leur background et fill. Cette technique est répétée dans l’exemple de motifs hexagonaux qui va suivre.

Le pattern pourait être amélioré en définissant le stroke des chemins (path) en rgba plutôt qu’en valeurs hexadécimales. On pourrait ainsi les corriger automatiquement si les couleurs de background et de fill des écailles étaient modifiées.

Motifs hexagonaux

Le code comprend un balisage minimal pour créer un background hexagonal lié :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%">
     <defs>
        <pattern id="hexagons" width="50" height="43.4"
        patternUnits="userSpaceOnUse"
        patternTransform="scale(5) translate(2) rotate(45)">
            <polygon
            points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2"
            id="hex" />
            <use xlink:href="#hex" x="25" />
            <use xlink:href="#hex" x="-25" />
            <use xlink:href="#hex" x="12.5" y="-21.7" />
            <use xlink:href="#hex" x="-12.5" y="-21.7" />
        </pattern>
     </defs>
<rect width="100%" height="100%" fill="url(#hexagons)" />
</svg>

Le pattern utilise le CSS suivant :

svg {
  background: rgb(125,155,132);
}
polygon {
  fill: rgb(125,155,132);
  stroke-width: 2;
  stroke: #000;
}

voir background SVG hexagones de dudleystorey dans CodePen

Là encore, le SVG utilise la même technique consistant à s’appuyer sur les mêmes background et fill pour l’élément SVG et ses polygones pour “remplir” l’espace vide. Dans cet exemple, j’ai utilisé une série de transformations du pattern pour le placé légèrement “en dehors” de la page.

Le translate est particulièrement important car un hexagone ayant un bord placé contre une bordure du viewport semblera avoir un côté plus long que l’autre.

Les traits (stroke) SVG s’étendent de manière égale de chaque côté d’une ligne interne représentant le chemin, par conséquent une augmentation de la valeur stroke-width (“épaisseur du trait”) aura pour conséquence de réduire la taille des hexagones.

Exemples CodePen

Les exemples CodePen qui précèdent utilisent le code SVG directement dans le HTML pour plus de clarté. En production, le CSS serait intégré au SVG et l’ensemble serait transformé en code base64 qui serait utilisé comme valeur de la propriété background-image.