git-hash-art 0.0.1

package/src/lib/canvas/shapes/basic.js

@@ -0,0 +1,93 @@
+export const drawCircle = (ctx, size) => {
+  ctx.beginPath();
+  ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+};
+
+export const drawSquare = (ctx, size) => {
+  ctx.beginPath();
+  ctx.rect(-size / 2, -size / 2, size, size);
+};
+
+export const drawTriangle = (ctx, size) => {
+  ctx.beginPath();
+  ctx.moveTo(0, -size / 2);
+  ctx.lineTo(-size / 2, size / 2);
+  ctx.lineTo(size / 2, size / 2);
+  ctx.closePath();
+};
+
+export const drawHexagon = (ctx, size) => {
+  ctx.beginPath();
+  for (let i = 0; i < 6; i++) {
+    const angle = (Math.PI / 8) * i;
+    const x = (size / 2) * Math.cos(angle);
+    const y = (size / 2) * Math.sin(angle);
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+};
+
+export const drawStar = (ctx, size) => {
+  ctx.beginPath();
+  for (let i = 0; i < 10; i++) {
+    const angle = Math.PI / 5 + (Math.PI / 5) * i * 3;
+    const radius = i % 2 === 0 ? size / 2 : size / 4;
+    const x = radius * Math.cos(angle);
+    const y = radius * Math.sin(angle);
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+};
+
+export const drawJackedStar = (ctx, size) => {
+  ctx.beginPath();
+  for (let i = 0; i < 10; i++) {
+    const angle = Math.PI / 30 + (Math.PI / 30) * i * 8;
+    const radius = i % 2 === 0 ? size / 2 : size / 8;
+    const x = radius * Math.cos(angle);
+    const y = radius * Math.sin(angle);
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+};
+
+export const drawHeart = (ctx, size) => {
+  ctx.beginPath();
+  ctx.moveTo(0, size / 4);
+  ctx.quadraticCurveTo(size / 2, size / 4, 0, -size / 4);
+  ctx.quadraticCurveTo(-size / 2, size / 4, 0, size / 4);
+};
+
+export const drawDiamond = (ctx, size) => {
+  ctx.beginPath();
+  ctx.moveTo(0, -size / 2);
+  ctx.lineTo(size / 2, 0);
+  ctx.lineTo(0, size / 2);
+  ctx.lineTo(-size / 2, 0);
+  ctx.closePath();
+};
+
+export const drawCube = (ctx, size) => {
+  ctx.beginPath();
+  ctx.moveTo(-size / 2, -size / 2);
+  ctx.lineTo(size / 2, -size / 2);
+  ctx.lineTo(size / 2, size / 2);
+  ctx.lineTo(-size / 2, size / 2);
+  ctx.closePath();
+};
+
+// Optional: Create a shape map for easier lookup
+export const basicShapes = {
+  circle: drawCircle,
+  square: drawSquare,
+  triangle: drawTriangle,
+  hexagon: drawHexagon,
+  star: drawStar,
+  "jacked-star": drawJackedStar,
+  heart: drawHeart,
+  diamond: drawDiamond,
+  cube: drawCube
+};

package/src/lib/canvas/shapes/complex.js

@@ -0,0 +1,205 @@
+import { defaultShapeConfig } from "../../constants";
+import { applyTransforms, createCirclePoints, restoreContext } from "./utils";
+
+export const ShapeConfigs = {
+  platonic: {
+    tetrahedron: { vertices: 4, faces: 4 },
+    cube: { vertices: 8, faces: 6 },
+    octahedron: { vertices: 6, faces: 8 },
+    dodecahedron: { vertices: 20, faces: 12 },
+    icosahedron: { vertices: 12, faces: 20 },
+  },
+  fibonacci: {
+    iterations: 13,
+    growthFactor: 1.618034, // Golden ratio
+  },
+  goldenRatio: {
+    iterations: 8,
+    ratio: 1.618034,
+  },
+};
+
+export const drawPlatonicSolid = (ctx, size, type, config = {}) => {
+  const finalConfig = { ...defaultShapeConfig, ...config };
+  applyTransforms(ctx, size, finalConfig);
+
+  const { 
+    vertices, 
+    // faces 
+  } = ShapeConfigs.platonic[type];
+  const radius = size / 2;
+
+  // Calculate vertices based on platonic solid type
+  const points = createCirclePoints(0, 0, radius, vertices);
+
+  ctx.beginPath();
+  // Draw edges between vertices
+  points.forEach((p1, i) => {
+    points.slice(i + 1).forEach((p2) => {
+      ctx.moveTo(p1.x, p1.y);
+      ctx.lineTo(p2.x, p2.y);
+    });
+  });
+
+  if (finalConfig.fillStyle !== "transparent") {
+    ctx.fill();
+  }
+  ctx.stroke();
+  restoreContext(ctx);
+};
+
+export const drawFibonacciSpiral = (ctx, size, config = {}) => {
+  const finalConfig = {
+    ...defaultShapeConfig,
+    ...ShapeConfigs.fibonacci,
+    ...config,
+  };
+  applyTransforms(ctx, size, finalConfig);
+
+  let current = 1;
+  let previous = 1;
+  let scale = size / Math.pow(finalConfig.growthFactor, finalConfig.iterations);
+
+  ctx.beginPath();
+  for (let i = 0; i < finalConfig.iterations; i++) {
+    const radius = scale * current;
+    const centerX = radius / 2;
+    const centerY = radius / 2;
+
+    ctx.arc(centerX, centerY, radius, Math.PI, Math.PI * 1.5);
+
+    // Calculate next Fibonacci number
+    const next = current + previous;
+    previous = current;
+    current = next;
+
+    // Transform for next iteration
+    ctx.translate(radius, 0);
+    ctx.rotate(Math.PI / 2);
+  }
+
+  ctx.stroke();
+  restoreContext(ctx);
+};
+
+export const drawIslamicPattern = (ctx, size, config = {}) => {
+  const finalConfig = { ...defaultShapeConfig, ...config };
+  applyTransforms(ctx, size, finalConfig);
+
+  const gridSize = 8;
+  const unit = size / gridSize;
+
+  ctx.beginPath();
+  // Create base grid
+  for (let i = 0; i <= gridSize; i++) {
+    for (let j = 0; j <= gridSize; j++) {
+      const x = (i - gridSize / 2) * unit;
+      const y = (j - gridSize / 2) * unit;
+
+      // Draw star pattern at each intersection
+      const radius = unit / 2;
+      for (let k = 0; k < 8; k++) {
+        const angle = (k / 8) * Math.PI * 2;
+        const x1 = x + Math.cos(angle) * radius;
+        const y1 = y + Math.sin(angle) * radius;
+        if (k === 0) {
+          ctx.moveTo(x1, y1);
+        } else {
+          ctx.lineTo(x1, y1);
+        }
+      }
+      ctx.closePath();
+    }
+  }
+
+  if (finalConfig.fillStyle !== "transparent") {
+    ctx.fill();
+  }
+  ctx.stroke();
+  restoreContext(ctx);
+};
+
+export const drawCelticKnot = (ctx, size, config = {}) => {
+  const finalConfig = { ...defaultShapeConfig, ...config };
+  applyTransforms(ctx, size, finalConfig);
+
+  const gridSize = 4;
+  const unit = size / gridSize;
+
+  const drawKnotSegment = (x, y, type) => {
+    ctx.beginPath();
+    switch (type) {
+      case "over":
+        ctx.moveTo(x, y);
+        ctx.bezierCurveTo(
+          x + unit / 2,
+          y,
+          x + unit / 2,
+          y + unit,
+          x + unit,
+          y + unit
+        );
+        break;
+      case "under":
+        ctx.moveTo(x, y + unit);
+        ctx.bezierCurveTo(x + unit / 2, y + unit, x + unit / 2, y, x + unit, y);
+        break;
+    }
+    ctx.stroke();
+  };
+
+  // Create knot pattern
+  for (let i = 0; i < gridSize; i++) {
+    for (let j = 0; j < gridSize; j++) {
+      const x = (i - gridSize / 2) * unit;
+      const y = (j - gridSize / 2) * unit;
+      drawKnotSegment(x, y, (i + j) % 2 === 0 ? "over" : "under");
+    }
+  }
+
+  restoreContext(ctx);
+};
+
+export const drawMerkaba = (ctx, size, config = {}) => {
+  const finalConfig = { ...defaultShapeConfig, ...config };
+  applyTransforms(ctx, size, finalConfig);
+
+  const radius = size / 2;
+
+  // Draw two intersecting tetrahedra
+  ctx.beginPath();
+  // First tetrahedron
+  const points1 = createCirclePoints(0, 0, radius, 3);
+  points1.forEach((p1, i) => {
+    points1.slice(i + 1).forEach((p2) => {
+      ctx.moveTo(p1.x, p1.y);
+      ctx.lineTo(p2.x, p2.y);
+    });
+  });
+
+  // Second tetrahedron (rotated)
+  ctx.rotate(Math.PI / 6);
+  const points2 = createCirclePoints(0, 0, radius, 3);
+  points2.forEach((p1, i) => {
+    points2.slice(i + 1).forEach((p2) => {
+      ctx.moveTo(p1.x, p1.y);
+      ctx.lineTo(p2.x, p2.y);
+    });
+  });
+
+  if (finalConfig.fillStyle !== "transparent") {
+    ctx.fill();
+  }
+  ctx.stroke();
+  restoreContext(ctx);
+};
+
+export const complexShapes = {
+  platonicSolid: (ctx, size, type = "tetrahedron", config) =>
+    drawPlatonicSolid(ctx, size, type, config),
+  fibonacciSpiral: (ctx, size, config) =>
+    drawFibonacciSpiral(ctx, size, config),
+  islamicPattern: (ctx, size, config) => drawIslamicPattern(ctx, size, config),
+  celticKnot: (ctx, size, config) => drawCelticKnot(ctx, size, config),
+  merkaba: (ctx, size, config) => drawMerkaba(ctx, size, config),
+};

package/src/lib/canvas/shapes/index.js

@@ -0,0 +1,9 @@
+import { basicShapes } from "./basic";
+import { complexShapes } from "./complex";
+import { sacredShapes } from "./sacred";
+
+export const shapes = {
+  ...basicShapes,
+  ...complexShapes,
+  ...sacredShapes,
+};

package/src/lib/canvas/shapes/sacred.js

@@ -0,0 +1,173 @@
+import { createCirclePoints } from "./utils";
+
+export const drawFlowerOfLife = (ctx, size) => {
+  const radius = size / 6;
+  const centers = [
+    { x: 0, y: 0 },
+    { x: radius * Math.sqrt(3), y: 0 },
+    { x: radius * Math.sqrt(3) / 2, y: 1.5 * radius },
+    { x: -radius * Math.sqrt(3) / 2, y: 1.5 * radius },
+    { x: -radius * Math.sqrt(3), y: 0 },
+    { x: -radius * Math.sqrt(3) / 2, y: -1.5 * radius },
+    { x: radius * Math.sqrt(3) / 2, y: -1.5 * radius }
+  ];
+
+  ctx.beginPath();
+  centers.forEach(center => {
+    ctx.moveTo(center.x + radius, center.y);
+    ctx.arc(center.x, center.y, radius, 0, Math.PI * 2);
+  });
+};
+
+export const drawTreeOfLife = (ctx, size) => {
+  const radius = size / 12;
+  const spacing = radius * 2.5;
+  
+  // Sephirot positions (traditional layout)
+  const positions = [
+    { x: 0, y: -spacing * 2 },    // Kether
+    { x: -spacing, y: -spacing },  // Chokmah
+    { x: spacing, y: -spacing },   // Binah
+    { x: -spacing, y: 0 },        // Chesed
+    { x: spacing, y: 0 },         // Geburah
+    { x: 0, y: 0 },              // Tiphereth
+    { x: -spacing, y: spacing },  // Netzach
+    { x: spacing, y: spacing },   // Hod
+    { x: 0, y: spacing * 2 },    // Yesod
+    { x: 0, y: spacing * 3 }     // Malkuth
+  ];
+
+  // Draw circles
+  ctx.beginPath();
+  positions.forEach(pos => {
+    ctx.moveTo(pos.x + radius, pos.y);
+    ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
+  });
+
+  // Draw connecting lines
+  ctx.moveTo(positions[0].x, positions[0].y);
+  positions.forEach((pos, i) => {
+    if (i > 0) {
+      positions.slice(i + 1).forEach(nextPos => {
+        ctx.moveTo(pos.x, pos.y);
+        ctx.lineTo(nextPos.x, nextPos.y);
+      });
+    }
+  });
+};
+
+export const drawMetatronsCube = (ctx, size) => {
+  const radius = size / 3;
+  
+  // Create 13 points - one center and 12 vertices of an icosahedron
+  
+  // const phi = (1 + Math.sqrt(5)) / 2; // Golden ratio
+  
+  const vertices = [
+    { x: 0, y: 0 }, // Center point
+    ...createCirclePoints(0, 0, radius, 6), // Inner hexagon
+    ...createCirclePoints(0, 0, radius * 1.5, 6) // Outer hexagon
+  ];
+
+  ctx.beginPath();
+  // Draw all connecting lines
+  vertices.forEach((v1, i) => {
+    vertices.slice(i + 1).forEach(v2 => {
+      ctx.moveTo(v1.x, v1.y);
+      ctx.lineTo(v2.x, v2.y);
+    });
+  });
+};
+
+export const drawSriYantra = (ctx, size) => {
+  const radius = size / 2;
+  ctx.beginPath();
+
+  // Draw outer triangles
+  for (let i = 0; i < 9; i++) {
+    const angle = (i / 9) * Math.PI * 2;
+    const x1 = Math.cos(angle) * radius;
+    const y1 = Math.sin(angle) * radius;
+    const x2 = Math.cos(angle + Math.PI / 9) * radius;
+    const y2 = Math.sin(angle + Math.PI / 9) * radius;
+    
+    ctx.moveTo(0, 0);
+    ctx.lineTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.lineTo(0, 0);
+  }
+
+  // Draw inner triangles
+  const innerRadius = radius * 0.6;
+  for (let i = 0; i < 9; i++) {
+    const angle = (i / 9) * Math.PI * 2 + Math.PI / 18;
+    const x1 = Math.cos(angle) * innerRadius;
+    const y1 = Math.sin(angle) * innerRadius;
+    const x2 = Math.cos(angle + Math.PI / 9) * innerRadius;
+    const y2 = Math.sin(angle + Math.PI / 9) * innerRadius;
+    
+    ctx.moveTo(0, 0);
+    ctx.lineTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.lineTo(0, 0);
+  }
+};
+
+export const drawSeedOfLife = (ctx, size) => {
+  const radius = size / 4;
+  const centers = [
+    { x: 0, y: 0 },
+    ...createCirclePoints(0, 0, radius * 2, 6)
+  ];
+
+  ctx.beginPath();
+  centers.forEach(center => {
+    ctx.moveTo(center.x + radius, center.y);
+    ctx.arc(center.x, center.y, radius, 0, Math.PI * 2);
+  });
+};
+
+export const drawVesicaPiscis = (ctx, size) => {
+  const radius = size / 3;
+  ctx.beginPath();
+  
+  // Draw two overlapping circles
+  ctx.arc(-radius/2, 0, radius, 0, Math.PI * 2);
+  ctx.arc(radius/2, 0, radius, 0, Math.PI * 2);
+};
+
+export const drawTorus = (ctx, size) => {
+  const outerRadius = size / 2;
+  const innerRadius = size / 4;
+  const steps = 36;
+  
+  ctx.beginPath();
+  for (let i = 0; i < steps; i++) {
+    const angle1 = (i / steps) * Math.PI * 2;
+    // const angle2 = ((i + 1) / steps) * Math.PI * 2;
+    
+    for (let j = 0; j < steps; j++) {
+      const phi1 = (j / steps) * Math.PI * 2;
+      const phi2 = ((j + 1) / steps) * Math.PI * 2;
+      
+      const x1 = (outerRadius + innerRadius * Math.cos(phi1)) * Math.cos(angle1);
+      const y1 = (outerRadius + innerRadius * Math.cos(phi1)) * Math.sin(angle1);
+      const x2 = (outerRadius + innerRadius * Math.cos(phi2)) * Math.cos(angle1);
+      const y2 = (outerRadius + innerRadius * Math.cos(phi2)) * Math.sin(angle1);
+      
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+    }
+  }
+};
+
+// Add to the existing shapes map
+export const sacredShapes = {
+  // flowerOfLife: drawFlowerOfLife,
+  // treeOfLife: drawTreeOfLife,
+  metatronsCube: drawMetatronsCube,
+  sriYantra: drawSriYantra,
+  seedOfLife: drawSeedOfLife,
+  vesicaPiscis: drawVesicaPiscis,
+  torus: drawTorus
+};

package/src/lib/canvas/shapes/utils.js

@@ -0,0 +1,37 @@
+export const degToRad = (degrees) => (degrees * Math.PI) / 180;
+
+export const applyTransforms = (ctx, size, config) => {
+  ctx.save();
+  ctx.translate(0, 0);
+  if (config.rotation) {
+    ctx.rotate(degToRad(config.rotation));
+  }
+  ctx.lineWidth = config.lineWidth;
+  ctx.strokeStyle = config.strokeStyle;
+  ctx.fillStyle = config.fillStyle;
+};
+
+export const restoreContext = (ctx) => {
+  ctx.restore();
+};
+
+// Animation configuration stub for future use
+export const createAnimationConfig = (type) => ({
+  enabled: false,
+  duration: 1000,
+  easing: "linear",
+  type,
+  // Add more animation-specific properties as needed
+});
+
+export const createCirclePoints = (cx, cy, radius, segments) => {
+  const points = [];
+  for (let i = 0; i < segments; i++) {
+    const angle = (i / segments) * Math.PI * 2;
+    points.push({
+      x: cx + Math.cos(angle) * radius,
+      y: cy + Math.sin(angle) * radius,
+    });
+  }
+  return points;
+};

package/src/lib/constants.js

@@ -0,0 +1,138 @@
+export const PRESETS = {
+  // Standard sizes with different hashes
+  react: {
+    hash: "46192e59d42f741c761cbea79462a8b3815dd905",
+    width: 1024,
+    height: 1024,
+  },
+  angular: {
+    hash: "f31a6c3e94420f43c0cd323a5a6a99376ee59ff8",
+    width: 1024,
+    height: 1024,
+    gridSize: 6, // Higher density grid
+  },
+  // Wide format variations
+  banner: {
+    hash: "d847ffd4269b22c54d6e85ad3c1892a298e961fb",
+    width: 1920,
+    height: 480,
+    gridSize: 8, // More horizontal cells for wide format
+    shapesPerLayer: 40,
+  },
+  ultrawide: {
+    hash: "a3e126e537ed2cd11ddf3a96c37066e97c7afee6",
+    width: 3440,
+    height: 1440,
+    gridSize: 12, // Extra wide needs more cells
+    shapesPerLayer: 60,
+  },
+  // Social media sizes
+  "instagram-square": {
+    hash: "ff00ff00ff00ff00ff00ff00ff00ff00ff00ff0",
+    width: 1080,
+    height: 1080,
+  },
+  "instagram-story": {
+    hash: "abc123def456abc123def456abc123def456abc1",
+    width: 1080,
+    height: 1920,
+    gridSize: 6,
+    layers: 6,
+  },
+  "twitter-header": {
+    hash: "7777777777777777777777777777777777777777",
+    width: 1500,
+    height: 500,
+    gridSize: 8,
+    shapesPerLayer: 35,
+  },
+  "linkedin-banner": {
+    hash: "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
+    width: 1584,
+    height: 396,
+    gridSize: 8,
+    shapesPerLayer: 35,
+  },
+  // Mobile sizes
+  "phone-wallpaper": {
+    hash: "ffffffffffffffffffffffffffffffffaaaaaaaa",
+    width: 1170,
+    height: 2532, // iPhone 13 Pro size
+    gridSize: 5,
+    layers: 6,
+  },
+  "tablet-wallpaper": {
+    hash: "123456789abcdef0123456789abcdef012345678",
+    width: 2048,
+    height: 2732, // iPad Pro size
+    gridSize: 7,
+    layers: 6,
+  },
+  // Special configurations
+  minimal: {
+    hash: "000000000000000000000000000000000fffffff",
+    width: 1024,
+    height: 1024,
+    layers: 3,
+    baseOpacity: 0.8,
+    shapesPerLayer: 15,
+  },
+  complex: {
+    hash: "deadbeefdeadbeefdeadbeefdeadbeefdeadbeef",
+    width: 2048,
+    height: 2048,
+    gridSize: 8,
+    layers: 7,
+    shapesPerLayer: 50,
+    minShapeSize: 30,
+    maxShapeSize: 250,
+  },
+};
+
+// Basic configuration that applies to all shapes
+export const defaultShapeConfig = {
+  strokeStyle: "#000000",
+  fillStyle: "transparent",
+  lineWidth: 1,
+  rotation: 0,
+  iterations: 1,
+  animate: false, // For future use
+};
+
+// Base configuration types that can be extended per shape
+export const ShapeConfigTypes = {
+  BASIC: "basic",
+  DETAILED: "detailed",
+  ANIMATED: "animated",
+};
+
+// Golden ratio and other important proportions
+export const Proportions = {
+  GOLDEN_RATIO: 1.618034,
+  SQUARE_ROOT_2: Math.sqrt(2),
+  SQUARE_ROOT_3: Math.sqrt(3),
+  SQUARE_ROOT_5: Math.sqrt(5),
+  PI: Math.PI,
+  PHI: (1 + Math.sqrt(5)) / 2,
+};
+
+// Helper for creating common sacred geometry combinations
+export const PatternPresets = {
+  flowerOfLifeMandala: (size) => [
+    // { type: "flowerOfLife", config: { size } },
+    { type: "merkaba", config: { size: size * 0.8 } },
+    { type: "sriYantra", config: { size: size * 0.5 } },
+  ],
+
+  platonicProgression: (size) => [
+    { type: "platonicSolid", config: { size, type: "tetrahedron" } },
+    { type: "platonicSolid", config: { size: size * 0.8, type: "cube" } },
+    { type: "platonicSolid", config: { size: size * 0.6, type: "octahedron" } },
+  ],
+
+  cosmicTree: (size) => [
+    // { type: "treeOfLife", config: { size } },
+    { type: "fibonacciSpiral", config: { size: size * 0.9 } },
+    { type: "metatronsCube", config: { size: size * 0.7 } },
+  ],
+};

package/src/lib/utils.js

@@ -0,0 +1,59 @@
+import { shapes } from "./canvas/shapes";
+
+export function gitHashToSeed(gitHash) {
+  return parseInt(gitHash.slice(0, 8), 16);
+}
+
+export function getRandomFromHash(hash, index, min, max) {
+  const hexPair = hash.substr((index * 2) % hash.length, 2);
+  const decimal = parseInt(hexPair, 16);
+  return min + (decimal / 255) * (max - min);
+}
+
+// Golden ratio and other important proportions
+export const Proportions = {
+  GOLDEN_RATIO: 1.618034,
+  SQUARE_ROOT_2: Math.sqrt(2),
+  SQUARE_ROOT_3: Math.sqrt(3),
+  SQUARE_ROOT_5: Math.sqrt(5),
+  PI: Math.PI,
+  PHI: (1 + Math.sqrt(5)) / 2,
+};
+
+// Pattern combination utilities
+export class PatternCombiner {
+  static getProportionalSize(baseSize, proportion) {
+    return baseSize * proportion;
+  }
+
+  static centerPattern(ctx, width, height) {
+    ctx.translate(width / 2, height / 2);
+  }
+
+  // Combines sacred geometry patterns with proper proportions
+  static layerPatterns(ctx, patterns, config) {
+    const {
+      baseSize,
+      baseOpacity = 0.6,
+      opacityReduction = 0.1,
+      rotationOffset = 0,
+      proportionType = "GOLDEN_RATIO",
+    } = config;
+
+    patterns.forEach((pattern, index) => {
+      const size = this.getProportionalSize(
+        baseSize,
+        Math.pow(Proportions[proportionType], index)
+      );
+      const opacity = Math.max(0.1, baseOpacity - index * opacityReduction);
+      const rotation = rotationOffset * index;
+
+      ctx.save();
+      ctx.globalAlpha = opacity;
+      ctx.rotate((rotation * Math.PI) / 180);
+
+      shapes[pattern.type](ctx, size, pattern.config);
+      ctx.restore();
+    });
+  }
+}