Motifs géométriques sans couture en SVG et CSS : 36 motifs, couleurs en variables (SVG, CSS, PNG)

Ces motifs s’adressent aux designers UI et aux développeurs front-end qui veulent un fond discret derrière un en-tête, une carte, une section ou une page entière, sans charger d’image. Chaque motif est une classe de CSS à variables : la forme est écrite une fois dans la feuille de style, et ses couleurs sont des variables que vous changez sans toucher au dessin. Le même motif existe aussi en tuile SVG et en PNG, pour une maquette, une présentation ou un visuel.

Chaque motif se répète sans joint visible : posé sur une surface de n’importe quelle taille, il ne laisse voir ni le bord de la tuile ni la répétition.

• 36 motifs, répartis en 6 familles :
  • Grilles et points : dot-halftone-wave, dot-quincunx, dot-two-sizes, ring-dot, cross-grid, graph-paper ;
  • Rayures et chevrons : line-diagonal, line-pin-pair, chevron-v, chevron-alt, line-running-bond, line-gingham ;
  • Art déco : deco-corner-arcs, deco-fan, deco-rainbow, deco-diamond-nest, deco-ring-lattice, deco-truchet ;
  • Ondes : wave-sine, wave-lens, wave-square, wave-semicircle, wave-ribbon, wave-beads ;
  • Isométrique : iso-diamond-grid, iso-rhombus-tiles, iso-dash-lattice, iso-cross, iso-argyle, iso-slope-bands ;
  • Terrazzo vectoriel : terrazzo-chips-fine, terrazzo-chips-bold, terrazzo-speckle, terrazzo-shards, terrazzo-mixed, terrazzo-bauhaus.
• 6 palettes nommées : paper, slate, clay, moss, dusk et sand. Chaque famille en reçoit une par défaut, et chaque palette donne une couleur de fond, une encre, un accent et une couleur de texte.
• 2 thèmes, clair et sombre, pour chaque palette.
• 37 fichiers CSS : css/patterns.css, qui réunit les 36 motifs, et un fichier autonome par motif dans css/patterns/, à copier seul.
• 72 fichiers SVG : une tuile par motif et par thème.
• 72 fichiers PNG : un rendu par motif et par thème.
• Un fichier de palettes (palettes/palettes.json) : les valeurs claires et sombres de chaque palette, les familles et les motifs.
• 1 page HTML de démonstration, en français, qui s’ouvre hors ligne : les 36 motifs en tuiles nommées, un sélecteur de thème (système, clair ou sombre) et un sélecteur de palette.

Organisation de l’archive :

css/patterns.css
css/patterns/<nom>.css
svg/light/<nom>.svg
svg/dark/<nom>.svg
png/light/<nom>.png
png/dark/<nom>.png
palettes/palettes.json
demo/index.html

Le zip contient aussi le texte de la licence, un fichier LISEZMOI et les crédits.

Comment l’utiliser

Chargez css/patterns.css (ou le seul fichier du motif choisi), puis posez sur l’élément la classe pt, suivie de celle du motif.

<link rel="stylesheet" href="css/patterns.css">
<section class="pt pt-line-diagonal">…</section>

Voici un extrait recopié tel quel de css/patterns/line-diagonal.css : les variables claires de la palette slate, la classe qui les attribue au motif, puis la classe du motif. La forme tient dans un masque SVG, les couleurs ne passent que par des variables.

:root{--pt-slate-bg:#EDF1F5;--pt-slate-ink:#D0DAE5;--pt-slate-accent:#B6C4D4;--pt-slate-text:#15202B}
.pt-theme-slate{--pt-bg:var(--pt-slate-bg);--pt-ink:var(--pt-slate-ink);--pt-accent:var(--pt-slate-accent);--pt-text:var(--pt-slate-text)}
.pt-line-diagonal{--pt-w:32px;--pt-h:32px;--pt-d-bg:var(--pt-slate-bg);--pt-d-ink:var(--pt-slate-ink);--pt-d-accent:var(--pt-slate-accent);--pt-d-text:var(--pt-slate-text);--pt-after:none;--pt-m-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23000'%3E%3Cpath d='M4 0 0 4 0 0zm28 0L32 4 4 32 0 32 0 28 28 0zm-4 32L32 28 32 32z'/%3E%3C/svg%3E")}

• Recolorer : redéfinissez --pt-bg, --pt-ink et --pt-accent sur l’élément ou sur un parent. Le dessin ne bouge pas, seules les couleurs changent.
• Changer de palette : ajoutez la classe pt-theme-<palette> sur le motif ou sur un parent, par exemple pt-theme-moss.
• Clair et sombre : le thème suit le réglage du système de la personne qui visite. Pour l’imposer, ajoutez data-theme="light" ou data-theme="dark" sur la racine de la page. Le thème sombre ne change que des variables.
• Échelle : la variable --pt-scale agrandit la tuile. Gardez une valeur entière.
• Coins arrondis : le motif suit le border-radius de l’élément. L’élément reçoit position: relative et isolation: isolate, et le motif est peint en ::before et ::after, sous le contenu.

Un contraste faible, et voulu

Les motifs sont volontairement discrets : entre l’encre du motif et le fond, le contraste est faible. Ce sont des motifs de fond, pas du texte, et ils ne portent aucune information : les retirer ne change rien au sens de la page. La couleur de texte de chaque palette (--pt-text) a été mesurée sur le fond, sur l’encre et sur l’accent, en clair comme en sombre, et le plus faible contraste relevé est de 7,55:1. Un texte fin posé directement sur un motif reste pourtant moins confortable à lire que sur un fond uni : pour un texte courant ou de petite taille, posez-le sur un aplat, une carte unie par exemple, comme le fait la page de démonstration. Si vous voulez un motif plus marqué, choisissez une encre et un accent plus soutenus, et vérifiez alors le contraste de votre texte avec ces nouvelles couleurs.

Fabrication et IA

Les motifs, les palettes, le CSS, les SVG, les scripts de rendu et la démonstration ont été produits avec un assistant d’IA, puis relus et contrôlés : raccord de chaque tuile, rendu du CSS comparé aux PNG dans Chromium et dans WebKit, contraste du texte, poids des fichiers. Aucune image n’a été produite par un générateur d’images : chaque fichier sort du même code.

• CSS (variables) : la source des motifs, sans script, sans dépendance et sans adresse externe. Le rendu a été mesuré dans Chromium et dans WebKit, contre les PNG livrés, pour les 36 motifs en clair et en sombre : Chromium et WebKit dessinent le même motif, et l’écart mesuré se limite au lissage de quelques bords.
• SVG : une tuile par motif et par thème, à répéter en mosaïque. Les couleurs y sont écrites en clair, avec la variable CSS en repli : le fichier s’affiche tel quel dans la plupart des outils de design, et se recolore par les mêmes variables s’il est inséré directement dans une page. Il ne contient ni texte, ni image, ni filtre, ni dégradé.
• PNG 3840 × 2160 : un rendu continu du motif par thème, en sRGB et sans métadonnées, pour une présentation, un fond d’écran ou un document. Pour répéter un motif dans une maquette, partez plutôt de la tuile SVG.
• HTML : la page de démonstration, à ouvrir dans un navigateur, sans connexion.

À savoir

• Gardez --pt-scale entier : à une échelle fractionnaire, un navigateur peut laisser un fin filet entre deux tuiles. Ce cas n’a pas été mesuré.
• terrazzo-bauhaus est posé sur une grille, par construction. Les autres terrazzo sont semés sans maille visible.
• Les motifs ne contiennent ni texte ni marque.

Les motifs sont livrés sous licence commerciale : vous pouvez les utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les produits que vous vendez, mais pas revendre ni redistribuer les fichiers, même gratuitement.

• Copy & Rotate : créer des motifs circulaires et des menus radiaux
• Grainy gradient : des dégradés texturés et élégants
• Pour donner de la matière à vos fonds, les packs de textures sans couture : papier et carton, béton doux, enduit, toile et feutre et grain.

1.0.0 (11 novembre 2026) : première version.