How to Detect and Color Closed Regions in SVG Kufi Typography Art with JavaScript

Below is an overview of two approaches you might use, along with some sample code ideas to get you started.

---

1. Use a Hidden “Color Map” on a Canvas

One common technique (used by many pixel art or flood-fill apps) is to “paint” each closed region with a unique color on an offscreen canvas. Then, when the user hovers over the visible SVG, you use the mouse coordinates to look up the pixel color in the canvas. That tells you which region (and hence which path) is under the cursor and can be filled accordingly.

Basic idea:

• Precompute or predefine each closed region’s path (see approach 2 below).
• Create a hidden canvas where you render the same shapes but fill each region with a unique color.
• On a mouse event, get the canvas pixel at that position and map it back to your region.

Example Code (simplified):

HTMLCopied
<svg id="artSvg" width="1000" height="1000">
  <!-- Your drawn circles, rectangles, and lines -->
</svg>
<canvas id="picker" width="1000" height="1000" style="display:none;"></canvas>

JSCopied
// Suppose you have an array of region objects like:
const regions = [
  { id: 1, path: "M100,100 L200,100 L200,200 L100,200 Z", color: "#010203" },
  { id: 2, path: "M200,200 L300,200 L300,300 L200,300 Z", color: "#040506" }
  // ...more regions
];

// Render each region on the hidden canvas with its unique color:
const canvas = document.getElementById("picker");
const ctx = canvas.getContext("2d");

regions.forEach(region => {
  const path2D = new Path2D(region.path);
  ctx.fillStyle = region.color;
  ctx.fill(path2D);
});

// When hovering on the SVG, translate the mouse position and get the region:
document.getElementById("artSvg").addEventListener("mousemove", function(e) {
  const rect = this.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pixel = ctx.getImageData(x, y, 1, 1).data;
  const colorKey = "#" + ("000000" + ((pixel[0] << 16) | (pixel[1] << 8) | pixel[2]).toString(16)).slice(-6);
  
  // Find region by unique color.
  const found = regions.find(r => r.color.toLowerCase() === colorKey);
  if(found) {
    console.log("Hovering region: ", found.id);
    // You can now add highlighting or further actions.
  }
});

Note: The above code assumes you have already computed the paths for each closed region.

---

2. Compute Closed Regions via Geometry and Graph Traversal

Because your SVG drawing uses separate primitive elements (circles, lines, rectangles), you need to work out where their boundaries intersect and how they form cycles. A general plan is as follows:

• Convert primitives to segments:
  For example, a rectangle gives you four line segments. For circles, approximate the curves (or use arc math) to get segments.

• Find all intersection points:
  Iterate over each pair of segments to compute intersection points. Store these as nodes, and keep track which segments (edges) connect which nodes.

• Graph/Tree construction and cycle detection:
  Use a graph algorithm (for example, depth-first search) to detect cycles. Each cycle would correspond to a closed region.

• Once you have each closed region as a list of nodes, you can convert that into an SVG .

While there isn’t a built‐in JavaScript library that “magically” returns each closed region from a set of arbitrary shapes, you can either:

• Build this functionality yourself using geometry libraries (or low-level math), or
• Use libraries that allow boolean operations on SVG paths (for example, Paper.js or Snap.svg) which can help combine shapes and obtain subpaths.

Pseudo-Code Outline:

JSCopied
// 1. Convert each SVG element (line, circle, rect) into segments.
// Example for a line:
const segments = [];
segments.push({ start: {x: x1, y: y1}, end: {x: x2, y: y2} });
// 2. Compute intersections:
segments.forEach(seg1 => {
  segments.forEach(seg2 => {
    let pt = findIntersection(seg1, seg2);
    if (pt) {
      // Store the intersection in a graph (each endpoint and intersection become a node)
    }
  });
});

// 3. Build a graph from nodes connected by segments.
// 4. Apply cycle detection (graph traversal) to find closed loops.

Implementing such an algorithm is nontrivial, but it will let you “digitally” detect closed regions just like Illustrator’s live paint bucket.

---

Final Thoughts

If your grid is based on regular, predictable geometry (like a set of regularly spaced circles and rotated rectangles), you might precompute the regions mathematically rather than performing real-time intersection calculations. Predefined paths can then be stored and manipulated with event listeners.

Using a hidden color map canvas is often simpler in practice for hover/click detection without needing to compute each closed path in the DOM. This approach is widely used for region picking in complex vector art.

Both approaches let you use JavaScript and SVG to achieve an interactive art tool similar to a live paint bucket. Choose the one that best fits your project’s complexity and performance requirements.

---

This should help you move forward with creating interactive, colorable, closed regions for your kufi typography art. Happy coding!