git-hash-art 0.8.0 → 0.10.0

package/src/lib/render.ts

@@ -31,13 +31,15 @@ import {
     enforceContrast,
     buildColorHierarchy,
     pickHierarchyColor, pickColorGrade,
-    type ColorHierarchy
+    evolveHierarchy, type ColorHierarchy
 } from "./canvas/colors";
 import {
     enhanceShapeGeneration,
+    drawMirroredShape,
+    pickMirrorAxis,
     pickBlendMode,
     pickRenderStyle,
-    type RenderStyle,
+    type RenderStyle
 } from "./canvas/draw";
 import { shapes } from "./canvas/shapes";
 import {
@@ -272,6 +274,92 @@ function drawBackground(
   }
 }
 
+// ── Shape constellations — pre-composed groups of shapes ────────
+
+interface ConstellationDef {
+  name: string;
+  /** Generate member positions/shapes relative to center */
+  build: (rng: () => number, baseSize: number) => Array<{
+    dx: number; dy: number; shape: string; size: number; rotation: number;
+  }>;
+}
+
+const CONSTELLATIONS: ConstellationDef[] = [
+  {
+    name: "flanked-triangle",
+    build: (rng, baseSize) => {
+      const gap = baseSize * (0.6 + rng() * 0.3);
+      return [
+        { dx: 0, dy: 0, shape: "triangle", size: baseSize, rotation: rng() * 360 },
+        { dx: -gap, dy: gap * 0.3, shape: "circle", size: baseSize * 0.35, rotation: 0 },
+        { dx: gap, dy: gap * 0.3, shape: "circle", size: baseSize * 0.35, rotation: 0 },
+      ];
+    },
+  },
+  {
+    name: "hexagon-ring",
+    build: (rng, baseSize) => {
+      const members: Array<{ dx: number; dy: number; shape: string; size: number; rotation: number }> = [];
+      const count = 5 + Math.floor(rng() * 2);
+      const ringR = baseSize * 0.6;
+      for (let i = 0; i < count; i++) {
+        const angle = (i / count) * Math.PI * 2;
+        members.push({
+          dx: Math.cos(angle) * ringR,
+          dy: Math.sin(angle) * ringR,
+          shape: "hexagon",
+          size: baseSize * (0.25 + rng() * 0.1),
+          rotation: (angle * 180) / Math.PI,
+        });
+      }
+      return members;
+    },
+  },
+  {
+    name: "spiral-dots",
+    build: (rng, baseSize) => {
+      const members: Array<{ dx: number; dy: number; shape: string; size: number; rotation: number }> = [];
+      const count = 7 + Math.floor(rng() * 5);
+      const turns = 1.5 + rng();
+      for (let i = 0; i < count; i++) {
+        const t = i / count;
+        const angle = t * Math.PI * 2 * turns;
+        const r = t * baseSize * 0.7;
+        members.push({
+          dx: Math.cos(angle) * r,
+          dy: Math.sin(angle) * r,
+          shape: "circle",
+          size: baseSize * (0.08 + (1 - t) * 0.12),
+          rotation: 0,
+        });
+      }
+      return members;
+    },
+  },
+  {
+    name: "diamond-cluster",
+    build: (rng, baseSize) => {
+      const gap = baseSize * 0.45;
+      return [
+        { dx: 0, dy: -gap, shape: "diamond", size: baseSize * 0.4, rotation: 0 },
+        { dx: gap, dy: 0, shape: "diamond", size: baseSize * 0.35, rotation: 15 },
+        { dx: 0, dy: gap, shape: "diamond", size: baseSize * 0.3, rotation: 30 },
+        { dx: -gap, dy: 0, shape: "diamond", size: baseSize * 0.35, rotation: -15 },
+      ];
+    },
+  },
+  {
+    name: "crescent-pair",
+    build: (rng, baseSize) => {
+      const gap = baseSize * 0.5;
+      return [
+        { dx: -gap * 0.4, dy: 0, shape: "crescent", size: baseSize * 0.5, rotation: rng() * 30 },
+        { dx: gap * 0.4, dy: 0, shape: "crescent", size: baseSize * 0.45, rotation: 180 + rng() * 30 },
+      ];
+    },
+  },
+];
+
 // ── Main render function ────────────────────────────────────────────
 
 export function renderHashArt(
@@ -321,6 +409,9 @@ export function renderHashArt(
   // ── 0e. Light direction — consistent shadow angle ──────────────
   const lightAngle = rng() * Math.PI * 2;
 
+  // ── 0f. Palette evolution — hue drift direction across layers ──
+  const paletteHueShift = (rng() - 0.5) * 40; // -20° to +20° total drift
+
   const scaleFactor = Math.min(width, height) / 1024;
   const adjustedMinSize = minShapeSize * scaleFactor;
   const adjustedMaxSize = maxShapeSize * scaleFactor;
@@ -385,6 +476,69 @@ export function renderHashArt(
   }
   ctx.globalCompositeOperation = "source-over";
 
+  // ── 1c. Background pattern layer — subtle textured paper ───────
+  const bgPatternRoll = rng();
+  if (bgPatternRoll < 0.6) {
+    ctx.save();
+    ctx.globalCompositeOperation = "soft-light";
+    const patternOpacity = 0.02 + rng() * 0.04;
+    const patternColor = hexWithAlpha(colorHierarchy.dominant, 0.15);
+
+    if (bgPatternRoll < 0.2) {
+      // Dot grid
+      const dotSpacing = Math.max(8, Math.min(width, height) * (0.015 + rng() * 0.015));
+      const dotR = dotSpacing * 0.08;
+      ctx.globalAlpha = patternOpacity;
+      ctx.fillStyle = patternColor;
+      for (let px = 0; px < width; px += dotSpacing) {
+        for (let py = 0; py < height; py += dotSpacing) {
+          ctx.beginPath();
+          ctx.arc(px, py, dotR, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+    } else if (bgPatternRoll < 0.4) {
+      // Diagonal lines
+      const lineSpacing = Math.max(6, Math.min(width, height) * (0.02 + rng() * 0.02));
+      ctx.globalAlpha = patternOpacity;
+      ctx.strokeStyle = patternColor;
+      ctx.lineWidth = 0.5 * scaleFactor;
+      const diag = Math.hypot(width, height);
+      for (let d = -diag; d < diag; d += lineSpacing) {
+        ctx.beginPath();
+        ctx.moveTo(d, 0);
+        ctx.lineTo(d + height, height);
+        ctx.stroke();
+      }
+    } else {
+      // Tessellation — hexagonal grid of tiny shapes
+      const tessSize = Math.max(10, Math.min(width, height) * (0.025 + rng() * 0.02));
+      const tessH = tessSize * Math.sqrt(3);
+      ctx.globalAlpha = patternOpacity * 0.7;
+      ctx.strokeStyle = patternColor;
+      ctx.lineWidth = 0.4 * scaleFactor;
+      for (let row = 0; row * tessH < height + tessH; row++) {
+        const offsetX = (row % 2) * tessSize * 0.75;
+        for (let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5; col++) {
+          const hx = col * tessSize * 1.5 + offsetX;
+          const hy = row * tessH;
+          ctx.beginPath();
+          for (let s = 0; s < 6; s++) {
+            const angle = (Math.PI / 3) * s - Math.PI / 6;
+            const vx = hx + Math.cos(angle) * tessSize * 0.5;
+            const vy = hy + Math.sin(angle) * tessSize * 0.5;
+            if (s === 0) ctx.moveTo(vx, vy);
+            else ctx.lineTo(vx, vy);
+          }
+          ctx.closePath();
+          ctx.stroke();
+        }
+      }
+    }
+    ctx.restore();
+  }
+  ctx.globalCompositeOperation = "source-over";
+
   // ── 2. Composition mode ────────────────────────────────────────
   const compositionMode =
     COMPOSITION_MODES[Math.floor(rng() * COMPOSITION_MODES.length)];
@@ -447,6 +601,48 @@ export function renderHashArt(
     return [rx + (nearest.x - rx) * pull, ry + (nearest.y - ry) * pull];
   }
 
+  // ── 3b. Void zone decoration — intentional negative space ────
+  for (const zone of voidZones) {
+    // Subtle halo ring around void zones
+    ctx.globalAlpha = 0.04 + rng() * 0.04;
+    ctx.strokeStyle = hexWithAlpha(colorHierarchy.accent, 0.2);
+    ctx.lineWidth = 1.5 * scaleFactor;
+    ctx.beginPath();
+    ctx.arc(zone.x, zone.y, zone.radius, 0, Math.PI * 2);
+    ctx.stroke();
+
+    // ~50% chance: scatter tiny dots inside the void
+    if (rng() < 0.5) {
+      const dotCount = 3 + Math.floor(rng() * 6);
+      ctx.globalAlpha = 0.06 + rng() * 0.04;
+      ctx.fillStyle = hexWithAlpha(colorHierarchy.secondary, 0.15);
+      for (let d = 0; d < dotCount; d++) {
+        const angle = rng() * Math.PI * 2;
+        const dist = rng() * zone.radius * 0.7;
+        const dotR = (1 + rng() * 3) * scaleFactor;
+        ctx.beginPath();
+        ctx.arc(
+          zone.x + Math.cos(angle) * dist,
+          zone.y + Math.sin(angle) * dist,
+          dotR, 0, Math.PI * 2,
+        );
+        ctx.fill();
+      }
+    }
+
+    // ~30% chance: thin concentric ring inside
+    if (rng() < 0.3) {
+      ctx.globalAlpha = 0.03 + rng() * 0.03;
+      ctx.strokeStyle = hexWithAlpha(colorHierarchy.dominant, 0.1);
+      ctx.lineWidth = 0.5 * scaleFactor;
+      const innerR = zone.radius * (0.4 + rng() * 0.3);
+      ctx.beginPath();
+      ctx.arc(zone.x, zone.y, innerR, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+  }
+  ctx.globalAlpha = 1;
+
   // ── 4. Flow field seed values ──────────────────────────────────
   const fieldAngleBase = rng() * Math.PI * 2;
   const fieldFreq = 0.5 + rng() * 2;
@@ -533,6 +729,26 @@ export function renderHashArt(
     // Atmospheric desaturation for later layers
     const atmosphericDesat = layerRatio * 0.3;
 
+    // Depth-of-field simulation — later layers are "further away"
+    // Reduce stroke widths and shift colors toward the background
+    const dofFactor = 1 - layerRatio * 0.5; // 1.0 for front layer, 0.5 for back
+    const dofStrokeScale = 0.4 + dofFactor * 0.6; // strokes thin out with depth
+    const dofContrastReduction = layerRatio * 0.2; // colors fade toward bg
+
+    // Color palette evolution — hue-rotate the hierarchy per layer
+    const layerHierarchy = evolveHierarchy(colorHierarchy, layerRatio, paletteHueShift);
+
+    // Focal depth: shapes near focal points get more detail
+    const focalDetailBoost = (px: number, py: number): number => {
+      let minFocalDist = Infinity;
+      for (const fp of focalPoints) {
+        const d = Math.hypot(px - fp.x, py - fp.y);
+        if (d < minFocalDist) minFocalDist = d;
+      }
+      const maxDist = Math.hypot(width, height) * 0.5;
+      return Math.max(0, 1 - minFocalDist / maxDist); // 1.0 at focal, 0.0 at edges
+    };
+
     for (let i = 0; i < numShapes; i++) {
       // Position from composition mode, then focal bias
       const rawPos = getCompositionPosition(
@@ -584,9 +800,9 @@ export function renderHashArt(
         }
       }
 
-      // Positional color from hierarchy + jitter
-      let fillBase = getPositionalColor(x, y, width, height, colorHierarchy, rng);
-      const strokeBase = pickHierarchyColor(colorHierarchy, rng);
+      // Positional color from hierarchy + jitter (using evolved layer palette)
+      let fillBase = getPositionalColor(x, y, width, height, layerHierarchy, rng);
+      const strokeBase = pickHierarchyColor(layerHierarchy, rng);
 
       // Desaturate colors on later layers for depth
       if (atmosphericDesat > 0) {
@@ -605,9 +821,11 @@ export function renderHashArt(
       const fillAlpha = 0.2 + rng() * 0.5;
       const transparentFill = hexWithAlpha(fillColor, fillAlpha);
 
-      const strokeWidth = (0.5 + rng() * 2.0) * scaleFactor;
+      const strokeWidth = (0.5 + rng() * 2.0) * scaleFactor * dofStrokeScale;
 
-      ctx.globalAlpha = layerOpacity * (0.5 + rng() * 0.5);
+      // Depth-of-field: reduce opacity slightly for distant layers
+      const dofOpacityScale = 1 - dofContrastReduction;
+      ctx.globalAlpha = layerOpacity * (0.5 + rng() * 0.5) * dofOpacityScale;
 
       // Glow on sacred shapes more often — scaled by archetype
       const isSacred = SACRED_SHAPES.includes(shape);
@@ -634,13 +852,47 @@ export function renderHashArt(
       const shadowOffX = shadowDist * Math.cos(lightAngle);
       const shadowOffY = shadowDist * Math.sin(lightAngle);
 
-      enhanceShapeGeneration(ctx, shape, x, y, {
+      // ── 5a. Tangent placement — nudge toward nearest shape edge ──
+      let finalX = x;
+      let finalY = y;
+      if (shapePositions.length > 0 && rng() < 0.25) {
+        // Find nearest placed shape
+        let nearestDist = Infinity;
+        let nearestPos: { x: number; y: number; size: number } | null = null;
+        for (const sp of shapePositions) {
+          const d = Math.hypot(x - sp.x, y - sp.y);
+          if (d < nearestDist && d > 0) {
+            nearestDist = d;
+            nearestPos = sp;
+          }
+        }
+        if (nearestPos) {
+          // Target distance: edges kissing (sum of half-sizes)
+          const targetDist = (size + nearestPos.size) * 0.5;
+          if (nearestDist > targetDist * 0.5 && nearestDist < targetDist * 3) {
+            const angle = Math.atan2(y - nearestPos.y, x - nearestPos.x);
+            finalX = nearestPos.x + Math.cos(angle) * targetDist;
+            finalY = nearestPos.y + Math.sin(angle) * targetDist;
+            // Keep in bounds
+            finalX = Math.max(0, Math.min(width, finalX));
+            finalY = Math.max(0, Math.min(height, finalY));
+          }
+        }
+      }
+
+      // ── 5b. Shape mirroring — basic shapes get reflected copies ──
+      const mirrorAxis = pickMirrorAxis(rng);
+      const isBasicShape = ["circle", "triangle", "square", "hexagon", "star",
+        "diamond", "crescent", "penroseTile", "reuleauxTriangle"].includes(shape);
+      const shouldMirror = mirrorAxis !== null && isBasicShape && size > adjustedMaxSize * 0.2;
+
+      const shapeConfig = {
         fillColor: transparentFill,
         strokeColor,
         strokeWidth,
         size,
         rotation,
-        proportionType: "GOLDEN_RATIO",
+        proportionType: "GOLDEN_RATIO" as const,
         glowRadius: glowRadius || (shadowDist > 0 ? shadowDist * 2 : 0),
         glowColor: hasGlow
           ? hexWithAlpha(fillColor, 0.6)
@@ -648,19 +900,49 @@ export function renderHashArt(
         gradientFillEnd: gradientEnd,
         renderStyle: finalRenderStyle,
         rng,
-      });
+      };
+
+      if (shouldMirror) {
+        drawMirroredShape(ctx, shape, finalX, finalY, {
+          ...shapeConfig,
+          mirrorAxis: mirrorAxis!,
+          mirrorGap: size * (0.1 + rng() * 0.3),
+        });
+      } else {
+        enhanceShapeGeneration(ctx, shape, finalX, finalY, shapeConfig);
+      }
+
+      // ── Glazing — luminous multi-pass transparency on ~20% of shapes ──
+      if (rng() < 0.2 && size > adjustedMinSize * 2) {
+        const glazePasses = 2 + Math.floor(rng() * 2);
+        for (let g = 0; g < glazePasses; g++) {
+          const glazeScale = 1 - (g + 1) * 0.12; // progressively smaller
+          const glazeAlpha = 0.08 + g * 0.04; // progressively more opaque toward center
+          ctx.globalAlpha = glazeAlpha;
+          enhanceShapeGeneration(ctx, shape, finalX, finalY, {
+            fillColor: hexWithAlpha(fillColor, 0.15 + g * 0.1),
+            strokeColor: "rgba(0,0,0,0)",
+            strokeWidth: 0,
+            size: size * glazeScale,
+            rotation,
+            proportionType: "GOLDEN_RATIO",
+            renderStyle: "fill-only",
+            rng,
+          });
+        }
+      }
 
-      shapePositions.push({ x, y, size, shape });
+      shapePositions.push({ x: finalX, y: finalY, size, shape });
 
-      // ── 5b. Size echo — large shapes spawn trailing smaller copies ──
+      // ── 5c. Size echo — large shapes spawn trailing smaller copies ──
       if (size > adjustedMaxSize * 0.5 && rng() < 0.2) {
         const echoCount = 2 + Math.floor(rng() * 2);
         const echoAngle = rng() * Math.PI * 2;
         for (let e = 0; e < echoCount; e++) {
           const echoScale = 0.3 - e * 0.08;
           const echoDist = size * (0.6 + e * 0.4);
-          const echoX = x + Math.cos(echoAngle) * echoDist;
-          const echoY = y + Math.sin(echoAngle) * echoDist;
+          const echoX = finalX + Math.cos(echoAngle) * echoDist;
+          const echoY = finalY + Math.sin(echoAngle) * echoDist;
           const echoSize = size * Math.max(0.1, echoScale);
 
           if (echoX < 0 || echoX > width || echoY < 0 || echoY > height) continue;
@@ -680,8 +962,11 @@ export function renderHashArt(
         }
       }
 
-      // ── 5c. Recursive nesting ──────────────────────────────────
-      if (size > adjustedMaxSize * 0.4 && rng() < 0.15) {
+      // ── 5d. Recursive nesting ──────────────────────────────────
+      // Focal depth: shapes near focal points get more detail
+      const focalProximity = focalDetailBoost(finalX, finalY);
+      const nestingChance = 0.15 + focalProximity * 0.15; // 15-30% near focal
+      if (size > adjustedMaxSize * 0.4 && rng() < nestingChance) {
         const innerCount = 1 + Math.floor(rng() * 3);
         for (let n = 0; n < innerCount; n++) {
           // Pick inner shape from palette affinities
@@ -700,8 +985,8 @@ export function renderHashArt(
           enhanceShapeGeneration(
             ctx,
             innerShape,
-            x + innerOffX,
-            y + innerOffY,
+            finalX + innerOffX,
+            finalY + innerOffY,
             {
               fillColor: innerFill,
               strokeColor: hexWithAlpha(strokeColor, 0.5),
@@ -715,6 +1000,50 @@ export function renderHashArt(
           );
         }
       }
+
+      // ── 5e. Shape constellations — pre-composed groups ─────────
+      const constellationChance = 0.12 + focalProximity * 0.1; // 12-22% near focal
+      if (size > adjustedMaxSize * 0.35 && rng() < constellationChance) {
+        const constellation = CONSTELLATIONS[Math.floor(rng() * CONSTELLATIONS.length)];
+        const members = constellation.build(rng, size);
+        const groupRotation = rng() * Math.PI * 2;
+        const cosR = Math.cos(groupRotation);
+        const sinR = Math.sin(groupRotation);
+
+        for (const member of members) {
+          // Rotate the group offset by the group rotation
+          const mx = finalX + member.dx * cosR - member.dy * sinR;
+          const my = finalY + member.dx * sinR + member.dy * cosR;
+
+          if (mx < 0 || mx > width || my < 0 || my > height) continue;
+
+          const memberFill = hexWithAlpha(
+            jitterColorHSL(pickHierarchyColor(colorHierarchy, rng), rng, 8, 0.06),
+            fillAlpha * 0.8,
+          );
+          const memberStroke = enforceContrast(
+            jitterColorHSL(strokeBase, rng, 5, 0.04), bgLum,
+          );
+
+          ctx.globalAlpha = layerOpacity * 0.6;
+          // Use the member's shape if available, otherwise fall back to palette
+          const memberShape = shapeNames.includes(member.shape)
+            ? member.shape
+            : pickShapeFromPalette(shapePalette, rng, member.size / adjustedMaxSize);
+
+          enhanceShapeGeneration(ctx, memberShape, mx, my, {
+            fillColor: memberFill,
+            strokeColor: memberStroke,
+            strokeWidth: strokeWidth * 0.7,
+            size: member.size,
+            rotation: member.rotation + (groupRotation * 180) / Math.PI,
+            proportionType: "GOLDEN_RATIO",
+            renderStyle: pickStyleForShape(memberShape, layerRenderStyle, rng) as RenderStyle,
+            rng,
+          });
+          shapePositions.push({ x: mx, y: my, size: member.size, shape: memberShape });
+        }
+      }
     }
   }
 
@@ -801,7 +1130,41 @@ export function renderHashArt(
     }
   }
 
-  // ── 6b. Apply symmetry mirroring ─────────────────────────────────
+  // ── 6b. Motion/energy lines — short directional bursts ─────────
+  const energyArchetypes = ["dense-chaotic", "cosmic", "neon-glow", "bold-graphic"];
+  const hasEnergyLines = energyArchetypes.some(a => archetype.name.includes(a)) || rng() < 0.25;
+  if (hasEnergyLines && shapePositions.length > 0) {
+    const energyCount = 5 + Math.floor(rng() * 10);
+    ctx.lineCap = "round";
+    for (let e = 0; e < energyCount; e++) {
+      // Pick a random shape to radiate from
+      const source = shapePositions[Math.floor(rng() * shapePositions.length)];
+      const burstCount = 2 + Math.floor(rng() * 4);
+      const baseAngle = flowAngle(source.x, source.y);
+
+      for (let b = 0; b < burstCount; b++) {
+        const angle = baseAngle + (rng() - 0.5) * 1.2;
+        const lineLen = (source.size * 0.3 + rng() * source.size * 0.5) * scaleFactor * 0.3;
+        const startDist = source.size * 0.5;
+        const sx = source.x + Math.cos(angle) * startDist;
+        const sy = source.y + Math.sin(angle) * startDist;
+        const ex = sx + Math.cos(angle) * lineLen;
+        const ey = sy + Math.sin(angle) * lineLen;
+
+        ctx.globalAlpha = 0.04 + rng() * 0.06;
+        ctx.strokeStyle = hexWithAlpha(
+          enforceContrast(pickHierarchyColor(colorHierarchy, rng), bgLum), 0.3,
+        );
+        ctx.lineWidth = (0.5 + rng() * 1.5) * scaleFactor;
+        ctx.beginPath();
+        ctx.moveTo(sx, sy);
+        ctx.lineTo(ex, ey);
+        ctx.stroke();
+      }
+    }
+  }
+
+  // ── 6c. Apply symmetry mirroring ─────────────────────────────────
   if (symmetryMode !== "none") {
     const canvas = ctx.canvas;
     ctx.save();
@@ -924,6 +1287,50 @@ export function renderHashArt(
     ctx.globalCompositeOperation = "source-over";
   }
 
+  // ── 11. Signature mark — unique geometric chop from hash prefix ──
+  {
+    const sigRng = createRng(seedFromHash(gitHash, 42));
+    const sigSize = Math.min(width, height) * 0.025;
+    // Bottom-right corner with padding
+    const sigX = width - sigSize * 2.5;
+    const sigY = height - sigSize * 2.5;
+    const sigSegments = 4 + Math.floor(sigRng() * 4); // 4-7 segments
+    const sigColor = hexWithAlpha(colorHierarchy.accent, 0.15);
+
+    ctx.save();
+    ctx.globalAlpha = 0.12 + sigRng() * 0.08;
+    ctx.translate(sigX, sigY);
+    ctx.strokeStyle = sigColor;
+    ctx.fillStyle = hexWithAlpha(colorHierarchy.dominant, 0.06);
+    ctx.lineWidth = Math.max(0.5, 0.8 * scaleFactor);
+
+    // Outer ring
+    ctx.beginPath();
+    ctx.arc(0, 0, sigSize, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.fill();
+
+    // Inner geometric pattern — unique per hash
+    ctx.beginPath();
+    for (let s = 0; s < sigSegments; s++) {
+      const angle1 = sigRng() * Math.PI * 2;
+      const angle2 = sigRng() * Math.PI * 2;
+      const r1 = sigSize * (0.2 + sigRng() * 0.6);
+      const r2 = sigSize * (0.2 + sigRng() * 0.6);
+      ctx.moveTo(Math.cos(angle1) * r1, Math.sin(angle1) * r1);
+      ctx.lineTo(Math.cos(angle2) * r2, Math.sin(angle2) * r2);
+    }
+    ctx.stroke();
+
+    // Center dot
+    ctx.beginPath();
+    ctx.arc(0, 0, sigSize * 0.12, 0, Math.PI * 2);
+    ctx.fillStyle = sigColor;
+    ctx.fill();
+
+    ctx.restore();
+  }
+
   ctx.globalAlpha = 1;
 
 }