Motifs
Des motifs africains générés entièrement en CSS — sans image, sans SVG. Utilisation instantanée via className.
Pourquoi ce sujet est important
Les motifs CSS permettent d'ajouter des textures visuelles riches sans surcharger l'application avec des images. Ils sont générés entièrement en CSS, ce qui les rend légers et personnalisables.
Explication
Des motifs africains générés entièrement en CSS — sans image, sans SVG. Utilisation instantanée via className direct.
Catalogue
Kente
Akan, Ghana
Bandelettes entrelacées
className="kente"
Ndop
Bamoum, Cameroun
Grille et cercles rituels
className="ndop"
Bogolan
Bambara, Mali
Teintures à la boue
className="bogolan"
Wax
Pan-africain
Losanges et points
className="wax"
Adinkra
Asante, Ghana
Symboles philosophiques
className="adinkra"
Kuba
Kasaï, Congo
Géométrie entrelacée
className="kuba"
Usages typiques
Section Hero
// Utilisation directe avec Tailwind - très simple !
<div className="ndop h-20 w-full" />
<div className="kente h-32 w-32 rounded-full" />
<div className="bogolan h-16 w-full opacity-20" />
// Fond de section hero
<section className="ndop relative min-h-screen">
<div className="absolute inset-0 bg-avs-accent/80" />
<div className="relative">{/* contenu */}</div>
</section>
// Avatar circulaire avec initiale
<div className="kente h-10 w-10 rounded-full ring-2 ring-white">
<span className="font-display font-black text-white drop-shadow">A</span>
</div>
// Spinner animé
<div className="kente h-10 w-10 rounded-full animate-spin" />
// Bande décorative en tête de card
<div className="rounded-2xl overflow-hidden">
<div className="ndop h-1 w-full" />
<div className="p-5">{/* contenu */}</div>
</div>Info
linear-gradient et radial-gradient imbriqués, définis dans packages/patterns/src/theme/patterns.css. Utilisez-les directement avec className="ndop h-20 w-full".