@africode/core 5.0.0

package/core/patterns.js

@@ -0,0 +1,833 @@
+/**
+ * AfriCode Procedural SVG Pattern Engine
+ * 
+ * Generates lightweight, on-the-fly SVG patterns inspired by
+ * African textiles from across the continent:
+ * 
+ * EAST AFRICA: Maasai Shuka, Kanga, Kitenge, Hadzabe
+ * WEST AFRICA: Ghana Kente, Adinkra, Nigeria Aso-Oke, Ankara
+ * SOUTHERN AFRICA: Ndebele, Zulu, Swazi/Eswatini, Xhosa
+ * 
+ * @module core/patterns
+ */
+
+/**
+ * Generate a polygon with n sides
+ * Based on the mathematical formula:
+ * x_i = cx + r * cos(2πi/n)
+ * y_i = cy + r * sin(2πi/n)
+ */
+export function generatePolygon(n, r, cx = 50, cy = 50) {
+  const points = [];
+  for (let i = 0; i < n; i++) {
+    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
+    const x = cx + r * Math.cos(angle);
+    const y = cy + r * Math.sin(angle);
+    points.push(`${x.toFixed(2)},${y.toFixed(2)}`);
+  }
+  return points.join(' ');
+}
+
+// ============================================
+// EAST AFRICAN PATTERNS
+// ============================================
+
+/**
+ * Generate Maasai Shuka tartan pattern (Tanzania/Kenya)
+ * Traditional red checkered blanket with overlapping stripes
+ */
+export function generateShuka({
+  primaryColor = '#FF0000',
+  secondaryColor = '#000000',
+  backgroundColor = '#8B0000',
+  stripeWidth = 4,
+  size = 40
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <rect x="0" y="0" width="${size}" height="${stripeWidth}" fill="${primaryColor}" opacity="0.8"/>
+      <rect x="0" y="${size / 2 - stripeWidth / 2}" width="${size}" height="${stripeWidth}" fill="${secondaryColor}" opacity="0.6"/>
+      <rect x="0" y="${size - stripeWidth}" width="${size}" height="${stripeWidth}" fill="${primaryColor}" opacity="0.8"/>
+      <rect x="0" y="0" width="${stripeWidth}" height="${size}" fill="${primaryColor}" opacity="0.5"/>
+      <rect x="${size / 2 - stripeWidth / 2}" y="0" width="${stripeWidth}" height="${size}" fill="${secondaryColor}" opacity="0.4"/>
+      <rect x="${size - stripeWidth}" y="0" width="${stripeWidth}" height="${size}" fill="${primaryColor}" opacity="0.5"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Hadzabe pattern (Tanzania)
+ * Inspired by cave paintings and natural earth tones
+ * Hunter-gatherer tribe with ancient artistic traditions
+ */
+export function generateHadzabe({
+  earthColor = '#8B4513',
+  ochreColor = '#CD853F',
+  charcoalColor = '#2F2F2F',
+  size = 50
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${earthColor}"/>
+      <!-- Cave art inspired figures -->
+      <circle cx="${size * 0.3}" cy="${size * 0.3}" r="${size * 0.08}" fill="${ochreColor}"/>
+      <line x1="${size * 0.3}" y1="${size * 0.38}" x2="${size * 0.3}" y2="${size * 0.6}" stroke="${charcoalColor}" stroke-width="2"/>
+      <line x1="${size * 0.2}" y1="${size * 0.45}" x2="${size * 0.4}" y2="${size * 0.45}" stroke="${charcoalColor}" stroke-width="2"/>
+      <!-- Animal figure -->
+      <ellipse cx="${size * 0.7}" cy="${size * 0.5}" rx="${size * 0.15}" ry="${size * 0.08}" fill="${ochreColor}"/>
+      <line x1="${size * 0.6}" y1="${size * 0.58}" x2="${size * 0.6}" y2="${size * 0.7}" stroke="${charcoalColor}" stroke-width="2"/>
+      <line x1="${size * 0.8}" y1="${size * 0.58}" x2="${size * 0.8}" y2="${size * 0.7}" stroke="${charcoalColor}" stroke-width="2"/>
+      <!-- Dots like ancient markings -->
+      <circle cx="${size * 0.15}" cy="${size * 0.8}" r="3" fill="${ochreColor}"/>
+      <circle cx="${size * 0.85}" cy="${size * 0.2}" r="3" fill="${ochreColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Kanga border pattern (Tanzania/Kenya)
+ */
+export function generateKangaBorder({
+  primaryColor = '#1EB53A', // Simple Green (Tanzania)
+  accentColor = '#FCD116',  // Gold
+  size = 30
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${primaryColor}"/>
+      <!-- Pindo (Border) Motifs: Cashew/Triangle -->
+      <path d="M0,0 L${size / 2},${size / 2} L0,${size} Z" fill="${accentColor}"/>
+      <path d="M${size},0 L${size / 2},${size / 2} L${size},${size} Z" fill="${accentColor}"/>
+      <circle cx="${size / 2}" cy="${size / 2}" r="${size * 0.15}" fill="none" stroke="${accentColor}" stroke-width="2"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Kanga traditional Swahili cloth pattern (East Africa)
+ */
+export function generateKanga({
+  primaryColor = '#FF6B00',
+  secondaryColor = '#002B5C',
+  backgroundColor = '#FFFFFF',
+  size = 40
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <!-- Border pattern -->
+      <rect x="0" y="0" width="${size}" height="${size * 0.1}" fill="${primaryColor}"/>
+      <rect x="0" y="${size * 0.9}" width="${size}" height="${size * 0.1}" fill="${primaryColor}"/>
+      <rect x="0" y="0" width="${size * 0.1}" height="${size}" fill="${primaryColor}"/>
+      <rect x="${size * 0.9}" y="0" width="${size * 0.1}" height="${size}" fill="${primaryColor}"/>
+      <!-- Center motif -->
+      <circle cx="${size * 0.5}" cy="${size * 0.5}" r="${size * 0.15}" fill="${secondaryColor}"/>
+      <text x="${size * 0.5}" y="${size * 0.55}" text-anchor="middle" fill="${primaryColor}" font-size="${size * 0.08}">KANGA</text>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Kuba Border pattern (Congo)
+ */
+export function generateKubaBorder({
+  primaryColor = '#8B4513',
+  secondaryColor = '#DAA520',
+  backgroundColor = '#F5F5DC',
+  size = 30
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <!-- Kuba geometric border -->
+      <polygon points="0,0 ${size * 0.3},0 0,${size * 0.3}" fill="${primaryColor}"/>
+      <polygon points="${size},0 ${size * 0.7},0 ${size},${size * 0.3}" fill="${primaryColor}"/>
+      <polygon points="0,${size} ${size * 0.3},${size} 0,${size * 0.7}" fill="${primaryColor}"/>
+      <polygon points="${size},${size} ${size * 0.7},${size} ${size},${size * 0.7}" fill="${primaryColor}"/>
+      <!-- Center diamond -->
+      <polygon points="${size * 0.5},${size * 0.3} ${size * 0.7},${size * 0.5} ${size * 0.5},${size * 0.7} ${size * 0.3},${size * 0.5}" fill="${secondaryColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Zulu Beads pattern (South Africa)
+ */
+export function generateZuluBeads({
+  primaryColor = '#FF0000',
+  secondaryColor = '#000000',
+  accentColor = '#FFFFFF',
+  size = 40
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${accentColor}"/>
+      <!-- Bead pattern -->
+      <circle cx="${size * 0.2}" cy="${size * 0.2}" r="${size * 0.08}" fill="${primaryColor}"/>
+      <circle cx="${size * 0.5}" cy="${size * 0.2}" r="${size * 0.08}" fill="${secondaryColor}"/>
+      <circle cx="${size * 0.8}" cy="${size * 0.2}" r="${size * 0.08}" fill="${primaryColor}"/>
+      <circle cx="${size * 0.2}" cy="${size * 0.5}" r="${size * 0.08}" fill="${secondaryColor}"/>
+      <circle cx="${size * 0.5}" cy="${size * 0.5}" r="${size * 0.08}" fill="${primaryColor}"/>
+      <circle cx="${size * 0.8}" cy="${size * 0.5}" r="${size * 0.08}" fill="${secondaryColor}"/>
+      <circle cx="${size * 0.2}" cy="${size * 0.8}" r="${size * 0.08}" fill="${primaryColor}"/>
+      <circle cx="${size * 0.5}" cy="${size * 0.8}" r="${size * 0.08}" fill="${secondaryColor}"/>
+      <circle cx="${size * 0.8}" cy="${size * 0.8}" r="${size * 0.08}" fill="${primaryColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Maasai Shield pattern (Kenya/Tanzania)
+ */
+export function generateMasaiShield({
+  primaryColor = '#8B0000',
+  secondaryColor = '#FFD700',
+  backgroundColor = '#654321',
+  size = 50
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <ellipse cx="${size * 0.5}" cy="${size * 0.5}" rx="${size * 0.4}" ry="${size * 0.45}" fill="${backgroundColor}"/>
+      <!-- Shield patterns -->
+      <ellipse cx="${size * 0.5}" cy="${size * 0.3}" rx="${size * 0.2}" ry="${size * 0.15}" fill="${primaryColor}"/>
+      <rect x="${size * 0.4}" y="${size * 0.5}" width="${size * 0.2}" height="${size * 0.3}" fill="${secondaryColor}"/>
+      <!-- Decorative lines -->
+      <line x1="${size * 0.3}" y1="${size * 0.2}" x2="${size * 0.7}" y2="${size * 0.2}" stroke="${primaryColor}" stroke-width="3"/>
+      <line x1="${size * 0.3}" y1="${size * 0.8}" x2="${size * 0.7}" y2="${size * 0.8}" stroke="${primaryColor}" stroke-width="3"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Ndebele Paint house pattern (South Africa)
+ */
+export function generateNdebelePaint({
+  primaryColor = '#FF1493',
+  secondaryColor = '#00FF00',
+  accentColor = '#FFFF00',
+  backgroundColor = '#FFFFFF',
+  size = 50
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <!-- Ndebele geometric patterns -->
+      <polygon points="${size * 0.2},${size * 0.2} ${size * 0.4},${size * 0.2} ${size * 0.3},${size * 0.4}" fill="${primaryColor}"/>
+      <polygon points="${size * 0.6},${size * 0.2} ${size * 0.8},${size * 0.2} ${size * 0.7},${size * 0.4}" fill="${secondaryColor}"/>
+      <polygon points="${size * 0.2},${size * 0.6} ${size * 0.4},${size * 0.6} ${size * 0.3},${size * 0.8}" fill="${accentColor}"/>
+      <polygon points="${size * 0.6},${size * 0.6} ${size * 0.8},${size * 0.6} ${size * 0.7},${size * 0.8}" fill="${primaryColor}"/>
+      <!-- Center design -->
+      <circle cx="${size * 0.5}" cy="${size * 0.5}" r="${size * 0.15}" fill="${secondaryColor}"/>
+      <rect x="${size * 0.45}" y="${size * 0.45}" width="${size * 0.1}" height="${size * 0.1}" fill="${accentColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Kitenge floral pattern (East Africa)
+ */
+export function generateKitenge({
+  primaryColor = '#00A3DD',
+  secondaryColor = '#FCD116',
+  backgroundColor = '#1EB53A',
+  size = 50
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <circle cx="${size * 0.25}" cy="${size * 0.25}" r="${size * 0.2}" fill="${primaryColor}" opacity="0.8"/>
+      <circle cx="${size * 0.75}" cy="${size * 0.75}" r="${size * 0.2}" fill="${primaryColor}" opacity="0.8"/>
+      <circle cx="${size * 0.25}" cy="${size * 0.25}" r="${size * 0.1}" fill="${secondaryColor}"/>
+      <circle cx="${size * 0.75}" cy="${size * 0.75}" r="${size * 0.1}" fill="${secondaryColor}"/>
+      <circle cx="${size * 0.75}" cy="${size * 0.25}" r="${size * 0.08}" fill="${secondaryColor}" opacity="0.6"/>
+      <circle cx="${size * 0.25}" cy="${size * 0.75}" r="${size * 0.08}" fill="${secondaryColor}" opacity="0.6"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+// ============================================
+// WEST AFRICAN PATTERNS
+// ============================================
+
+/**
+ * Generate Ghana Kente cloth pattern
+ * Royal cloth of the Ashanti people with geometric strips
+ * Colors: Gold (royalty), Green (harvest), Red (blood/sacrifice)
+ */
+export function generateKente({
+  colors = ['#FFD700', '#228B22', '#DC143C', '#000000'],
+  size = 60
+} = {}) {
+  const [gold, green, red, black] = colors;
+  const stripe = size / 6;
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${black}"/>
+      <!-- Horizontal bands -->
+      <rect x="0" y="0" width="${size}" height="${stripe}" fill="${gold}"/>
+      <rect x="0" y="${stripe}" width="${size}" height="${stripe}" fill="${green}"/>
+      <rect x="0" y="${stripe * 2}" width="${size}" height="${stripe}" fill="${red}"/>
+      <rect x="0" y="${stripe * 3}" width="${size}" height="${stripe}" fill="${gold}"/>
+      <rect x="0" y="${stripe * 4}" width="${size}" height="${stripe}" fill="${green}"/>
+      <rect x="0" y="${stripe * 5}" width="${size}" height="${stripe}" fill="${red}"/>
+      <!-- Vertical accents -->
+      <rect x="${size * 0.2}" y="0" width="3" height="${size}" fill="${black}" opacity="0.5"/>
+      <rect x="${size * 0.4}" y="0" width="3" height="${size}" fill="${black}" opacity="0.5"/>
+      <rect x="${size * 0.6}" y="0" width="3" height="${size}" fill="${black}" opacity="0.5"/>
+      <rect x="${size * 0.8}" y="0" width="3" height="${size}" fill="${black}" opacity="0.5"/>
+      <!-- Kente squares -->
+      <rect x="${size * 0.1}" y="${size * 0.1}" width="${size * 0.15}" height="${size * 0.15}" fill="${gold}" stroke="${black}" stroke-width="1"/>
+      <rect x="${size * 0.75}" y="${size * 0.75}" width="${size * 0.15}" height="${size * 0.15}" fill="${red}" stroke="${black}" stroke-width="1"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Ghana Adinkra symbols pattern
+ * Philosophical symbols of the Akan people
+ * Each symbol represents concepts like wisdom, strength, unity
+ */
+export function generateAdinkra({
+  symbolColor = '#000000',
+  backgroundColor = '#CD853F',
+  size = 50
+} = {}) {
+  // Gye Nyame symbol (Supremacy of God) simplified
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <!-- Sankofa-inspired heart shape (go back and get it) -->
+      <path d="M${size * 0.5} ${size * 0.2} 
+               C${size * 0.3} ${size * 0.1} ${size * 0.15} ${size * 0.3} ${size * 0.25} ${size * 0.5}
+               L${size * 0.5} ${size * 0.8}
+               L${size * 0.75} ${size * 0.5}
+               C${size * 0.85} ${size * 0.3} ${size * 0.7} ${size * 0.1} ${size * 0.5} ${size * 0.2}" 
+            fill="none" stroke="${symbolColor}" stroke-width="3"/>
+      <!-- Spiral detail -->
+      <circle cx="${size * 0.35}" cy="${size * 0.45}" r="${size * 0.08}" fill="none" stroke="${symbolColor}" stroke-width="2"/>
+      <circle cx="${size * 0.65}" cy="${size * 0.45}" r="${size * 0.08}" fill="none" stroke="${symbolColor}" stroke-width="2"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Nigeria Aso-Oke pattern (Yoruba)
+ * Hand-woven cloth with intricate strip patterns
+ * Traditional for special occasions
+ */
+export function generateAsoOke({
+  colors = ['#4B0082', '#FFD700', '#FFFFFF'],
+  size = 50
+} = {}) {
+  const [indigo, gold, white] = colors;
+  const stripe = size / 10;
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${indigo}"/>
+      <!-- Horizontal stripes -->
+      <rect x="0" y="${stripe}" width="${size}" height="${stripe * 0.5}" fill="${gold}"/>
+      <rect x="0" y="${stripe * 3}" width="${size}" height="${stripe * 0.5}" fill="${white}"/>
+      <rect x="0" y="${stripe * 5}" width="${size}" height="${stripe * 0.5}" fill="${gold}"/>
+      <rect x="0" y="${stripe * 7}" width="${size}" height="${stripe * 0.5}" fill="${white}"/>
+      <rect x="0" y="${stripe * 9}" width="${size}" height="${stripe * 0.5}" fill="${gold}"/>
+      <!-- Vertical accent lines -->
+      <rect x="${size * 0.48}" y="0" width="${stripe * 0.4}" height="${size}" fill="${gold}" opacity="0.7"/>
+      <!-- Diamond motifs -->
+      <polygon points="${size * 0.25},${size * 0.3} ${size * 0.35},${size * 0.5} ${size * 0.25},${size * 0.7} ${size * 0.15},${size * 0.5}" 
+               fill="${gold}" stroke="${white}" stroke-width="1"/>
+      <polygon points="${size * 0.75},${size * 0.3} ${size * 0.85},${size * 0.5} ${size * 0.75},${size * 0.7} ${size * 0.65},${size * 0.5}" 
+               fill="${gold}" stroke="${white}" stroke-width="1"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Nigeria Ankara/African wax print pattern
+ * Bold, colorful designs popular across Africa
+ */
+export function generateAnkara({
+  primaryColor = '#FF6B00',
+  secondaryColor = '#00A86B',
+  accentColor = '#FFD700',
+  backgroundColor = '#FFFFFF',
+  size = 60
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <!-- Bold circular motifs -->
+      <circle cx="${size * 0.3}" cy="${size * 0.3}" r="${size * 0.25}" fill="${primaryColor}"/>
+      <circle cx="${size * 0.3}" cy="${size * 0.3}" r="${size * 0.15}" fill="${secondaryColor}"/>
+      <circle cx="${size * 0.3}" cy="${size * 0.3}" r="${size * 0.08}" fill="${accentColor}"/>
+      
+      <circle cx="${size * 0.8}" cy="${size * 0.8}" r="${size * 0.2}" fill="${secondaryColor}"/>
+      <circle cx="${size * 0.8}" cy="${size * 0.8}" r="${size * 0.1}" fill="${primaryColor}"/>
+      
+      <!-- Connecting lines -->
+      <line x1="${size * 0.45}" y1="${size * 0.45}" x2="${size * 0.65}" y2="${size * 0.65}" 
+            stroke="${primaryColor}" stroke-width="4"/>
+      
+      <!-- Small dots -->
+      <circle cx="${size * 0.1}" cy="${size * 0.8}" r="${size * 0.05}" fill="${accentColor}"/>
+      <circle cx="${size * 0.9}" cy="${size * 0.2}" r="${size * 0.05}" fill="${accentColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+// ============================================
+// CENTRAL & NORTH AFRICAN PATTERNS
+// ============================================
+
+/**
+ * Generate Bogolanfini (Mud Cloth) pattern (Mali)
+ * Geometric abstract designs in earth tones
+ */
+export function generateBogolan({
+  primaryColor = '#000000',
+  secondaryColor = '#FFFFFF',
+  accentColor = '#8B4513',
+  size = 60
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${primaryColor}"/>
+      <!-- Zigzags -->
+      <polyline points="0,${size * 0.2} ${size * 0.25},0 ${size * 0.5},${size * 0.2} ${size * 0.75},0 ${size},${size * 0.2}" 
+                fill="none" stroke="${secondaryColor}" stroke-width="3"/>
+      <polyline points="0,${size * 0.8} ${size * 0.25},${size} ${size * 0.5},${size * 0.8} ${size * 0.75},${size} ${size},${size * 0.8}" 
+                fill="none" stroke="${secondaryColor}" stroke-width="3"/>
+      <!-- Crosses -->
+      <line x1="${size * 0.25}" y1="${size * 0.4}" x2="${size * 0.25}" y2="${size * 0.6}" stroke="${secondaryColor}" stroke-width="2"/>
+      <line x1="${size * 0.15}" y1="${size * 0.5}" x2="${size * 0.35}" y2="${size * 0.5}" stroke="${secondaryColor}" stroke-width="2"/>
+      <line x1="${size * 0.75}" y1="${size * 0.4}" x2="${size * 0.75}" y2="${size * 0.6}" stroke="${secondaryColor}" stroke-width="2"/>
+      <line x1="${size * 0.65}" y1="${size * 0.5}" x2="${size * 0.85}" y2="${size * 0.5}" stroke="${secondaryColor}" stroke-width="2"/>
+      <!-- Dots -->
+      <circle cx="${size * 0.5}" cy="${size * 0.5}" r="${size * 0.08}" fill="${accentColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Kuba Shoowa pattern (DRC)
+ * Complex interlocking geometric shapes
+ */
+export function generateKuba({
+  primaryColor = '#D2B48C',
+  secondaryColor = '#3E2723',
+  size = 60
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${primaryColor}"/>
+      <!-- Interlocking diamonds/rectangles -->
+      <rect x="${size * 0.1}" y="${size * 0.1}" width="${size * 0.3}" height="${size * 0.3}" fill="${secondaryColor}"/>
+      <rect x="${size * 0.6}" y="${size * 0.6}" width="${size * 0.3}" height="${size * 0.3}" fill="${secondaryColor}"/>
+      <rect x="${size * 0.6}" y="${size * 0.1}" width="${size * 0.3}" height="${size * 0.3}" 
+            fill="none" stroke="${secondaryColor}" stroke-width="4"/>
+      <rect x="${size * 0.1}" y="${size * 0.6}" width="${size * 0.3}" height="${size * 0.3}" 
+            fill="none" stroke="${secondaryColor}" stroke-width="4"/>
+      <!-- Center lines -->
+      <line x1="${size * 0.4}" y1="${size * 0.5}" x2="${size * 0.6}" y2="${size * 0.5}" stroke="${secondaryColor}" stroke-width="2"/>
+      <line x1="${size * 0.5}" y1="${size * 0.4}" x2="${size * 0.5}" y2="${size * 0.6}" stroke="${secondaryColor}" stroke-width="2"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Imigongo pattern (Rwanda)
+ * Spiral/Geometric ridges traditionally made from cow dung
+ */
+export function generateImigongo({
+  primaryColor = '#000000',
+  secondaryColor = '#FFFFFF',
+  accentColor = '#B22222',
+  size = 60
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${secondaryColor}"/>
+      <!-- Spiral/Diamond Motif -->
+      <path d="M${size * 0.5} ${size * 0.1} 
+               L${size * 0.9} ${size * 0.5} 
+               L${size * 0.5} ${size * 0.9} 
+               L${size * 0.1} ${size * 0.5} Z" 
+            fill="${primaryColor}"/>
+      <path d="M${size * 0.5} ${size * 0.3} 
+               L${size * 0.7} ${size * 0.5} 
+               L${size * 0.5} ${size * 0.7} 
+               L${size * 0.3} ${size * 0.5} Z" 
+            fill="${secondaryColor}"/>
+      <circle cx="${size * 0.5}" cy="${size * 0.5}" r="${size * 0.1}" fill="${accentColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Ethiopian Tibeb pattern
+ * Vibrant woven geometric borders
+ */
+export function generateTibeb({
+  colors = ['#009E60', '#FCDD09', '#EF3340'], // Ethiopian flag colors
+  backgroundColor = '#FFFFFF',
+  size = 40
+} = {}) {
+  const [c1, c2, c3] = colors;
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <!-- Diamond Chain -->
+      <polygon points="${size * 0.5},0 ${size},${size * 0.5} ${size * 0.5},${size} 0,${size * 0.5}" 
+               fill="${c1}" opacity="0.2"/>
+      <polygon points="${size * 0.5},${size * 0.2} ${size * 0.8},${size * 0.5} ${size * 0.5},${size * 0.8} ${size * 0.2},${size * 0.5}" 
+               fill="${c2}"/>
+      <rect x="${size * 0.4}" y="${size * 0.4}" width="${size * 0.2}" height="${size * 0.2}" fill="${c3}"/>
+      <!-- Side accents -->
+      <line x1="0" y1="0" x2="0" y2="${size}" stroke="${c1}" stroke-width="4"/>
+      <line x1="${size}" y1="0" x2="${size}" y2="${size}" stroke="${c1}" stroke-width="4"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+// ============================================
+// SOUTHERN AFRICAN PATTERNS
+// ============================================
+
+/**
+ * Generate Ndebele geometric mural pattern (South Africa)
+ */
+export function generateNdebele({
+  colors = ['#FFD700', '#4169E1', '#FF69B4', '#228B22'],
+  size = 60,
+  strokeWidth = 2
+} = {}) {
+  const [c1, c2, c3, c4] = colors;
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="#FFFFFF"/>
+      <rect x="${strokeWidth}" y="${strokeWidth}" 
+            width="${size - strokeWidth * 2}" height="${size - strokeWidth * 2}" 
+            fill="none" stroke="#000000" stroke-width="${strokeWidth}"/>
+      <rect x="${size * 0.15}" y="${size * 0.15}" width="${size * 0.35}" height="${size * 0.35}" 
+            fill="${c1}" stroke="#000000" stroke-width="${strokeWidth / 2}"/>
+      <rect x="${size * 0.5}" y="${size * 0.15}" width="${size * 0.35}" height="${size * 0.35}" 
+            fill="${c2}" stroke="#000000" stroke-width="${strokeWidth / 2}"/>
+      <rect x="${size * 0.15}" y="${size * 0.5}" width="${size * 0.35}" height="${size * 0.35}" 
+            fill="${c3}" stroke="#000000" stroke-width="${strokeWidth / 2}"/>
+      <rect x="${size * 0.5}" y="${size * 0.5}" width="${size * 0.35}" height="${size * 0.35}" 
+            fill="${c4}" stroke="#000000" stroke-width="${strokeWidth / 2}"/>
+      <polygon points="${size / 2},${size * 0.3} ${size * 0.7},${size / 2} ${size / 2},${size * 0.7} ${size * 0.3},${size / 2}"
+               fill="#FFFFFF" stroke="#000000" stroke-width="${strokeWidth}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Zulu beadwork pattern (South Africa)
+ * Traditional "love letter" beadwork with symbolic colors
+ * Colors carry deep meaning in Zulu courtship
+ */
+export function generateZulu({
+  colors = ['#FFFFFF', '#000000', '#FF0000', '#00A86B', '#FFD700'],
+  size = 50
+} = {}) {
+  const [white, black, red, green, gold] = colors;
+  const bead = size / 10;
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${black}"/>
+      <!-- Triangle pattern (isivivane - sacred cairn) -->
+      <polygon points="${size * 0.5},${size * 0.1} ${size * 0.9},${size * 0.9} ${size * 0.1},${size * 0.9}" 
+               fill="none" stroke="${white}" stroke-width="2"/>
+      <polygon points="${size * 0.5},${size * 0.25} ${size * 0.75},${size * 0.75} ${size * 0.25},${size * 0.75}" 
+               fill="${red}"/>
+      <!-- Beadwork dots -->
+      <circle cx="${size * 0.5}" cy="${size * 0.35}" r="${bead}" fill="${white}"/>
+      <circle cx="${size * 0.35}" cy="${size * 0.6}" r="${bead}" fill="${green}"/>
+      <circle cx="${size * 0.65}" cy="${size * 0.6}" r="${bead}" fill="${gold}"/>
+      <circle cx="${size * 0.5}" cy="${size * 0.8}" r="${bead}" fill="${white}"/>
+      <!-- Border dots -->
+      <circle cx="${size * 0.1}" cy="${size * 0.1}" r="${bead * 0.7}" fill="${red}"/>
+      <circle cx="${size * 0.9}" cy="${size * 0.1}" r="${bead * 0.7}" fill="${green}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Swazi/Eswatini pattern
+ * Inspired by Ligwalagwala (purple-crested turaco) and royal patterns
+ * Traditional shields and ceremonial designs
+ */
+export function generateSwazi({
+  colors = ['#3E5EB9', '#FECD00', '#B10C0C', '#FFFFFF'],
+  size = 50
+} = {}) {
+  const [blue, gold, red, white] = colors;
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${blue}"/>
+      <!-- Shield shape (central to Eswatini culture) -->
+      <ellipse cx="${size * 0.5}" cy="${size * 0.45}" rx="${size * 0.35}" ry="${size * 0.4}" 
+               fill="${gold}" stroke="${red}" stroke-width="3"/>
+      <!-- Inner pattern -->
+      <ellipse cx="${size * 0.5}" cy="${size * 0.45}" rx="${size * 0.2}" ry="${size * 0.25}" 
+               fill="${red}"/>
+      <!-- Feather accents -->
+      <line x1="${size * 0.5}" y1="${size * 0.05}" x2="${size * 0.5}" y2="${size * 0.2}" 
+            stroke="${white}" stroke-width="3"/>
+      <line x1="${size * 0.4}" y1="${size * 0.08}" x2="${size * 0.45}" y2="${size * 0.15}" 
+            stroke="${white}" stroke-width="2"/>
+      <line x1="${size * 0.6}" y1="${size * 0.08}" x2="${size * 0.55}" y2="${size * 0.15}" 
+            stroke="${white}" stroke-width="2"/>
+      <!-- Spear points -->
+      <polygon points="${size * 0.1},${size * 0.3} ${size * 0.05},${size * 0.5} ${size * 0.15},${size * 0.5}" fill="${white}"/>
+      <polygon points="${size * 0.9},${size * 0.3} ${size * 0.85},${size * 0.5} ${size * 0.95},${size * 0.5}" fill="${white}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Xhosa pattern (South Africa)
+ * Inspired by traditional Xhosa beadwork and blanket designs
+ * Known for bold geometric patterns
+ */
+export function generateXhosa({
+  primaryColor = '#FFFFFF',
+  accentColor = '#00A86B',
+  backgroundColor = '#1a1a2e',
+  size = 50
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <!-- Horizontal bands -->
+      <rect x="0" y="${size * 0.2}" width="${size}" height="${size * 0.1}" fill="${primaryColor}"/>
+      <rect x="0" y="${size * 0.7}" width="${size}" height="${size * 0.1}" fill="${primaryColor}"/>
+      <!-- Vertical bands -->
+      <rect x="${size * 0.2}" y="0" width="${size * 0.1}" height="${size}" fill="${accentColor}"/>
+      <rect x="${size * 0.7}" y="0" width="${size * 0.1}" height="${size}" fill="${accentColor}"/>
+      <!-- Central diamond -->
+      <polygon points="${size * 0.5},${size * 0.35} ${size * 0.65},${size * 0.5} ${size * 0.5},${size * 0.65} ${size * 0.35},${size * 0.5}" 
+               fill="${accentColor}" stroke="${primaryColor}" stroke-width="2"/>
+      <!-- Corner triangles -->
+      <polygon points="0,0 ${size * 0.15},0 0,${size * 0.15}" fill="${accentColor}"/>
+      <polygon points="${size},0 ${size * 0.85},0 ${size},${size * 0.15}" fill="${accentColor}"/>
+      <polygon points="0,${size} ${size * 0.15},${size} 0,${size * 0.85}" fill="${accentColor}"/>
+      <polygon points="${size},${size} ${size * 0.85},${size} ${size},${size * 0.85}" fill="${accentColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Apply pattern as background to an element
+ */
+export function applyPattern(element, patternUrl) {
+  element.style.backgroundImage = `url("${patternUrl}")`;
+  element.style.backgroundRepeat = 'repeat';
+}
+
+// ============================================
+// NORTH AFRICAN PATTERNS
+// ============================================
+
+/**
+ * Generate Berber pattern (North Africa)
+ * Geometric designs inspired by Amazigh rugs and tattoos
+ * Symbols of protection, fertility, and nature
+ */
+export function generateBerber({
+  primaryColor = '#8B0000', // Deep red
+  secondaryColor = '#000000',
+  accentColor = '#FFD700',
+  backgroundColor = '#F5F5DC', // Beige/Wool
+  size = 60
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${backgroundColor}"/>
+      <!-- Lozenge (Diamond) - universal protective symbol -->
+      <polygon points="${size * 0.5},${size * 0.1} ${size * 0.9},${size * 0.5} ${size * 0.5},${size * 0.9} ${size * 0.1},${size * 0.5}" 
+               fill="${primaryColor}" stroke="${secondaryColor}" stroke-width="2"/>
+      <!-- Inner geometric details -->
+      <line x1="${size * 0.5}" y1="${size * 0.1}" x2="${size * 0.5}" y2="${size * 0.9}" stroke="${accentColor}" stroke-width="2"/>
+      <line x1="${size * 0.1}" y1="${size * 0.5}" x2="${size * 0.9}" y2="${size * 0.5}" stroke="${accentColor}" stroke-width="2"/>
+      <!-- X symbols (Fibula/Cross) -->
+      <line x1="${size * 0.4}" y1="${size * 0.4}" x2="${size * 0.6}" y2="${size * 0.6}" stroke="${secondaryColor}" stroke-width="2"/>
+      <line x1="${size * 0.6}" y1="${size * 0.4}" x2="${size * 0.4}" y2="${size * 0.6}" stroke="${secondaryColor}" stroke-width="2"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Adire Oniko (Yoruba Indigo) pattern
+ * Resist-dyed circles and ripples
+ * "Tie and dye" technique simulation
+ */
+export function generateAdire({
+  primaryColor = '#4B0082', // Indigo
+  secondaryColor = '#8A2BE2', // Light Indigo
+  accentColor = '#FFFFFF',
+  size = 50
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${primaryColor}"/>
+      <!-- Resist circles (Oniko) -->
+      <circle cx="${size * 0.5}" cy="${size * 0.5}" r="${size * 0.35}" fill="none" stroke="${secondaryColor}" stroke-width="3"/>
+      <circle cx="${size * 0.5}" cy="${size * 0.5}" r="${size * 0.25}" fill="none" stroke="${accentColor}" stroke-width="2" stroke-dasharray="4 2"/>
+      <circle cx="${size * 0.5}" cy="${size * 0.5}" r="${size * 0.1}" fill="${accentColor}" opacity="0.8"/>
+      <!-- Corner ripples -->
+      <path d="M0,0 Q${size * 0.2},0 ${size * 0.2},${size * 0.2} Q0,${size * 0.2} 0,0" fill="${secondaryColor}"/>
+      <path d="M${size},${size} Q${size * 0.8},${size} ${size * 0.8},${size * 0.8} Q${size},${size * 0.8} ${size},${size}" fill="${secondaryColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+// Export all generators
+export default {
+  // East Africa
+  generatePolygon,
+  generateShuka,
+  generateHadzabe,
+  generateKanga,
+  generateKangaBorder,
+  generateKitenge,
+  generateMasaiShield,
+  generateTibeb, // Ethiopia
+  generateImigongo, // Rwanda
+  // West Africa
+  generateKente,
+  generateAdinkra,
+  generateAsoOke,
+  generateAnkara,
+  generateBogolan, // Mali/West
+  generateAdire, // Nigeria (Indigo)
+  // Central Africa
+  generateKuba, // DRC
+  generateKubaBorder,
+  // North Africa
+  generateBerber, // Amazigh
+  // Southern Africa
+  generateNdebele,
+  generateNdebelePaint,
+  generateZulu,
+  generateZuluBeads,
+  generateSwazi,
+  generateXhosa,
+  // Utilities
+  applyPattern,
+  // Tech Patterns
+  generateTuareg,
+  generateGeez,
+  generateBoli,
+  generateCircuit,
+  circuit: generateCircuit
+};
+
+/**
+ * Generate Tuareg Indigo pattern (Sahara/Berber)
+ * Inspired by the "Blue Men of the Sahara" and their geometric silver jewelry/stars
+ */
+export function generateTuareg({
+  primaryColor = '#2D3D6B', // Tuareg Indigo
+  secondaryColor = '#6B8CC7', // Sky Blue
+  accentColor = '#FFFFFF', // Silver/White
+  size = 60
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${primaryColor}"/>
+      <!-- Southern Cross / Tuareg Star -->
+      <path d="M${size * 0.5} 0 L${size * 0.6} ${size * 0.4} L${size} ${size * 0.5} L${size * 0.6} ${size * 0.6} L${size * 0.5} ${size} L${size * 0.4} ${size * 0.6} L0 ${size * 0.5} L${size * 0.4} ${size * 0.4} Z" 
+            fill="none" stroke="${accentColor}" stroke-width="2"/>
+      <circle cx="${size * 0.5}" cy="${size * 0.5}" r="${size * 0.1}" fill="${secondaryColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Ge'ez Script pattern (Ethiopia/Eritrea)
+ * Abstract calligraphic strokes inspired by one of the world's oldest scripts
+ */
+export function generateGeez({
+  inkColor = '#3A2E2C',
+  parchmentColor = '#F4E4BC',
+  size = 50
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${parchmentColor}"/>
+      <path d="M${size * 0.2} ${size * 0.2} L${size * 0.4} ${size * 0.2} M${size * 0.3} ${size * 0.2} L${size * 0.3} ${size * 0.5} Q${size * 0.4} ${size * 0.6} ${size * 0.2} ${size * 0.7}" 
+            fill="none" stroke="${inkColor}" stroke-width="3" stroke-linecap="round"/>
+      <path d="M${size * 0.6} ${size * 0.3} C${size * 0.8} ${size * 0.3} ${size * 0.8} ${size * 0.6} ${size * 0.6} ${size * 0.6} L${size * 0.8} ${size * 0.8}" 
+            fill="none" stroke="${inkColor}" stroke-width="3" stroke-linecap="round"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+/**
+ * Generate Boli pattern (Mali/Bambara)
+ * Abstract organic shapes inspired by mud-based ritual objects
+ */
+export function generateBoli({
+  clayColor = '#4E342E',
+  earthColor = '#3E2723',
+  accentColor = '#BCAAA4',
+  size = 60
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <rect width="${size}" height="${size}" fill="${earthColor}"/>
+      <path d="M${size * 0.2} ${size * 0.5} Q${size * 0.3} ${size * 0.2} ${size * 0.5} ${size * 0.3} T${size * 0.8} ${size * 0.5} Q${size * 0.7} ${size * 0.8} ${size * 0.5} ${size * 0.7} T${size * 0.2} ${size * 0.5}" 
+            fill="${clayColor}" stroke="${accentColor}" stroke-width="2"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}
+
+export function generateCircuit({
+  primaryColor = '#334155',
+  secondaryColor = '#1e293b',
+  size = 100
+} = {}) {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 100 100">
+      <rect width="100" height="100" fill="${secondaryColor}"/>
+      <path d="M10 10 H90 V90 H10 Z" fill="none" stroke="${primaryColor}" stroke-width="0.5" opacity="0.3"/>
+      <path d="M20 20 V50 H50 V80 H80" fill="none" stroke="${primaryColor}" stroke-width="1"/>
+      <circle cx="20" cy="20" r="2" fill="${primaryColor}"/>
+      <circle cx="80" cy="80" r="2" fill="${primaryColor}"/>
+      <circle cx="50" cy="50" r="1.5" fill="${primaryColor}"/>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
+}