Motifs SVG maoris

En hommage à nos amis néo-zélandais, voici un article de la série sur les backgrounds SVG consacré aux motifs maoris, à la fougère argentée, aux fractales et à l’ethnomathématique.

Par

L’appropriation culturelle des motifs est une constante de l’histoire, et elle ne s’accompagne généralement ni d’une véritable appréciation ni d’une vraie compréhension, comme en témoigne la vogue actuelle des tatouages “tribaux”. Utilisés pour leur seul aspect “cool”, ces emprunts culturels ignorent la pensée, la signification et le développement de ces motifs à travers le temps — ce que je veux absolument éviter dans mon exploration de la culture de la Nouvelle-Zélande, mon pays natal. Dans cette démarche d’apprentissage du SVG à travers les motifs, j’espère donc vous vous faire également partager un peu de l’histoire de cette culture.

Kowhaiwhai

Lorsqu’ils ont atteint les rivages de la Nouvelle-Zélande à l’occasion de la dernière grande vague de migration du Pacifique, les Polynésiens qui ont découvert le pays appelé par eux Aotearoa ont apporté un langage de motifs qu’ils avaient développé pendant plus d’un millénaire. Des siècles d’isolation culturelle ont permis à ces motifs de prendre une forme distinctive, connue sous le nom de “kowhaiwhai” : un large système reflétant l’environnement naturel. Ces motifs uniques utilisent généralement les formes du koru (la fronde de fougère jeune en train de se dérouler), mais également celles du requin marteau, du bec de perroquet, du croissant de lune et d’autres éléments naturels.

Photo d’une jeune feuille de fougère argentée en cours de déploiement, source d’inspiration du motif de koru symbolisant le renouvellement de la vie, la croissance, la force et la paix.

Ces formes ont été fortement associées à certaines tribus. Avec le temps, ces motifs se sont déplacés des rames des canoës de guerre jusqu’aux poutres des maisons communautaires et au-delà. Aujourd’hui, il existe de nombreuses variantes de ce motif — depuis la queue des avions de la compagnie aérienne nationale jusqu’à l’un des drapeaux proposés récemment pour le pays — au point que “kowhaiwhai” est utilisé comme terme générique pour ce motif.

Drapeau koru, proposition de Andrew Fyfe, l’une des cinq retenues pour le futur drapeau de la Nouvelle-Zélande.

Le SVG

Le SVG de chaque design rappelle celui utilisé pour les motifs géométriques des frises grecques anciennes de mon article précédent.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.6 29.4">  
<style type="text/css">  
   svg { background: #000; }
</style>  
    <path fill="#EF3633" d="M0,4.7v1.6c0,0,11.3-0.7,15.8,9.8c9.3,5.7,10.6,6.8,15.8,6.8s12.1-4.2,21.5-13.6c5.7-2.6,12.4-3.1,12.4-3.1 V4.7L0,4.7z"/>
    <path fill="#FFF" d="M67.6,4.7,65,4.7c-13.8,0-26,14.8-26,14.8c-2.5-3.1-3.2-9.9,3-11.7
c-3.9,2.9-0.1,5.5,1.3,5.3c4.9,0.1,5.3-7.9-2.2-7.9H41c-5.2,0-7.2,5.6-7.2,9c0,1.4,0.6,4.6,2.2,7c-1.3,0.4-2.9,0.6-4.9,0.5  
c-9.1-0.3-17.6-10-21.3-13.9c9.6-0.6,10.1,2.2,11.7,3.9c-1.6,0.2-2.2,1.1-2.2,2.5c0,1.6,1,2.6,3.2,2.6c3,0,3-3.1,3-3.1  
c0-0.1,0-0.2,0-0.3C25.3,5,13.4,4.7,13.4,4.7c-4.1,0-7.7,0.8-7.7,0.8C4.6,5,2.6,4.7,0,4.7c-13.8,0-26,14.8-26,14.8  
c-2.5-3.1-3.2-9.9,3-11.7c-3.9,2.9-0.1,5.5,1.3,5.3c4.9,0.1,5.3-7.9-2.2-7.9H-24c-5.2,0-7.2,5.6-7.2,9c0,1.7,1,6.6,3.9,8.7  
c4.3,3.1,19.8,3.9,19.8-8l0-0.3c0,0-0.5-2.6-2.9-2.6c-2.4,0-3.2,1.3-3.2,2.8c0,1.5,1.8,2.8,2.6,2.8c0.8,0-4.3,5.9-12,3.9  
C-17.6,16-8.1,5.4,2.9,8c-5.1,9,0.9,15.9,5.7,15.9s6.1-1.9,6.1-3.9s-2.2-4-3.7-4s-2.9,1.1-2.9,2.3s0.1,2,1.3,2.8  
c-3.4-0.3-4.9-3.9-4.9-5.6s-0.4-4,1.9-6.4c2.6,3.2,12.3,11.5,17.1,13.6c4.7,2.1,11.6,2,14.9,0.5c5,2.8,19.2,3,19.2-8.4l0-0.3  
c0,0-0.5-2.6-2.9-2.6c-2.4,0-3.2,1.3-3.2,2.8c0,1.5,1.8,2.8,2.6,2.8c0.8,0-4.3,5.9-12,3.9C47.4,16,56.9,5.4,67.9,8"/>  
    <line stroke="#FFF" stroke-width="2" x1="0" y1="3.7" x2="65.8" y2="3.7"/>
    <line stroke="#FFF" stroke-width="2" x1="0" y1="25.5" x2="65.8" y2="25.5"/>
</svg>  

Ce qui nous donne :

Les lignes du haut et du bas sont les bordures blanches. Le remplissage noir de l’élément SVG est une façon simple et rapide d’obtenir un background dans un SVG.

Le motif de “tourbillon” est un peu plus complexe :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.7 46.3" xmlns:xlink="http://www.w3.org/1999/xlink">  
    <g id="bottom-swirl">
        <path fill="#9D553C" d="M-6.9,46.9C-2.6,42.4,5,30.7,10.8,18.7S28,0,35.8,0s18.8,5.7,18.8,17.5s-5.3,17.2-11.7,17.2
S31.1,32,31.1,24.3c0,0,0.6-3.2,1.8-5c1.2-1.8,2.2-1.6,3.1-1c0.9,0.6,1,2.1,0,3.2s-2.4,6.2,3.2,8.8c4.2,2,7.9-0.3,9.2-2.2  
c2.1-2.9,5.7-12.5-3.5-20.3S25.8,7.5,23.3,9.3s-9.5,12.9-11.8,18S4,40.8,0.8,44.8s-8,1.8-8,1.8"/>  
        <path d="M6.5,46.3c3.8-4.5,8.8-12.3,10.6-16.7c1.2,5,5.7,12.4,9.3,16.7c-2.9,0-6.2,0-6.2,0s-3.8-4.4-4.8-6.1 c-0.8,1.7-3.2,5.5-3.5,5.9C11.6,46.6,6.5,46.3,6.5,46.3z"/>
    </g>
    <g id="upper-swirl">
        <path d="M42.1,23.2c2-0.6,1.6-7.3-3-9s-9.9,1.2-11.4,3.5c-2.1,3.2-3,10,0,15.2c1.8,3.2,7.2,7.4,13.1,7.3s11.1-2.9,13.8-6
s4.6-10,4.6-12.9S56.3,8.1,47.2,0c2.5,0,2.8,0,5.8,0c6,5.6,9,13.2,10.8,17.1c1.8-4,7.8-11.9,13-17.1c2.2,0,5.9,0,6.9,0  
c-6.1,5.6-10.6,11.9-12.9,15.8S65.9,26,62.1,32.2c-3.9,6.3-8.2,12.9-19.2,12.9S28.6,41.9,25.2,37s-5.2-11.9-2.4-18.4  
s10.1-8.5,14.1-8.5s8.9,4.4,9.5,7.8s1,4.4-0.6,6.6s-2,2.8-4.5,2S38.9,24.1,42.1,23.2z"/>  
        <path d="M57.1,0c2.6,2.4,5.5,6.4,6.9,8.8c2.2-2.9,5.4-7.2,7-8.8c-2.4,0-4.6,0-4.6,0s-1.1,2-1.6,2.9C63.4,1.5,62.3,0,62.3,0H57.1z" />
    </g>
    <use xlink:href="#upper-swirl" transform="translate(-64.8)" />
    <use xlink:href="#bottom-swirl" transform="translate(64.8)" />
</svg>  

Ce qui nous donne :

image

Pour donner aux tourbillons un aspect un peu brut, “fait-main”, ceux-ci ne sont pas réalisés comme de simples lignes mais comme des formes. Les groupes sont dupliqués et transformés avec <use> pour compléter le tuilage du motif (en donnant à translate une valeur unique, on indique que la translation est sur l’axe des x).

Le CSS

Les deux motifs sont sauvegardés comme des fichiers SVG. Pour les utiliser dans un élément, (une <div> par exemple), j’ai utilisé ce CSS :

div {  
    background-repeat: repeat-x;
    background-size: contain;
    background-image: url(koru.svg);
}

N’oubliez pas que les éléments doivent avoir une hauteur pour qu’on puisse voir une image de background. Cette hauteur est soit donnée par le contenu de la div, soit par une valeur explicite de height. Vous pouvez voir d’autres exemples dans le CodePen associé.

Ethnomathématiques

Ces deux motifs sont de bons exemples d’ethnomathématiques — expressions complètes des mathématiques dans les cultures sans écriture. D’autres exemples sont disponibles dans cette vidéo de Ron Eglash sur les fractales dans les motifs africains ( NdT : une vidéo fascinante, à regarder absolument !!).


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 les backgrounds SVG parus dans la Cascade.


Du même auteur dans La Cascade :

Motifs SVG maoris
Les bases de SVG : Groupes
Bien utiliser l’attribut alt
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.