JSFiddle - React, Tailwind, and code Playground

by Graham Heath

HTML

<div id="wrapper"></div>

<svg version="1.1" class="overlap-svg" id="alaska" xmlns:svg="http://www.w3.org/2000/svg"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="939.1 268.4 1000 1000"
	 enable-background="new 939.1 268.4 1000 1000" xml:space="preserve">
<path id="path2431" fill="#F70B0B" d="M1273.2,961c-0.3-0.3-0.2-1.5,0.1-1.7c0.8-0.5,2.3,0.8,1.7,1.5
	C1274.7,961.1,1273.5,961.3,1273.2,961z M1279.2,960.7c-0.3-0.3-0.1-0.8,0.6-1.7c0.7-0.8,0.9-0.9,2.1-0.8l1.3,0.1v1
	c0,0.8-0.1,1-0.6,1.2C1281.5,960.7,1279.3,960.9,1279.2,960.7z M1303.4,960.3c0-0.3,0.3-0.6,0.6-0.6c0.3,0,0.8-0.1,1.1-0.2
	c0.8-0.2,3.3-2.7,3.3-3.3c0-0.3,0.5-1.1,1.2-1.9l1.2-1.4l1.9,0.1l1.9,0.1l0.1-1.6c0.1-1.6,0.2-1.6,1-2.1c0.5-0.2,1.2-0.4,1.5-0.4
	c0.4,0,0.9-0.2,1.1-0.5c0.4-0.4,0.7-0.5,1.7-0.4c1.3,0.2,3.2,1.3,3.2,1.9c0,0.2-0.2,0.6-0.5,0.9c-0.3,0.3-0.5,0.8-0.5,1.3
	c0,1.3-0.9,1.9-2.9,1.9c-1.9,0-3.4,0.7-4.5,2.2c-0.4,0.5-0.9,0.8-1.1,0.8c-0.2,0-1,0.6-1.7,1.4c-1.2,1.4-1.3,1.4-2.1,1.1
	c-1.2-0.4-1.8-0.3-2.5,0.2c-0.7,0.6-2.6,1.3-3.4,1.3C1303.4,960.9,1303.3,960.8,1303.4,960.3z M1247.2,960c-0.6-0.2-2.1-0.4-3.3-0.5
	c-2.1-0.2-2.2-0.2-2.8-1c-0.4-0.5-0.9-0.9-1.4-1c-0.8-0.2-3.1-2.3-2.9-2.7c0.3-0.4,1.4-0.3,2.1,0.3c0.5,0.4,1,0.5,2.4,0.5
	c1.5,0,1.8,0.1,2.1,0.6c0.2,0.3,0.8,0.9,1.3,1.2c0.8,0.5,1.5,0.7,4.3,1.4c0.8,0.2,1.3,0.8,1.1,1.2
	C1249.8,960.5,1248.7,960.4,1247.2,960z M1289,959.5c-0.1-0.1-0.2-0.5-0.2-0.9c0-0.7,0.6-1.2,1.3-1.2c0.3,0,1.1,1.7,0.9,2
	C1290.8,959.7,1289.2,959.7,1289,959.5z M1295.1,959.1c-0.2-0.4-0.6-0.5-1.4-0.6c-0.8-0.1-1.3-0.2-1.4-0.5c-0.4-0.6,0-0.9,1.8-1.2
	c2-0.4,2.4-0.1,2.2,1.5C1296.2,959.6,1295.6,960,1295.1,959.1z M1275.9,958.8c-0.2-0.5,0.1-0.9,0.6-0.9c0.5,0,0.8,0.8,0.3,1
	C1276.2,959.2,1276,959.2,1275.9,958.8z M1255.8,958c-0.2-0.5,0.2-1.2,0.8-1.3c0.3,0,0.7-0.3,0.9-0.5c0.9-0.8,3.3,0.3,2.9,1.3
	c-0.2,0.6-1.3,0.9-2.9,0.9C1256.3,958.4,1255.9,958.3,1255.8,958z...

SCSS

html, body {
    position: relative;
}
.overlap-svg {
    position: absolute;
    left:0;
    top: 0;
}
#wrapper{
}
.hidden {
    /* you'd probably not want this styled this way.*/
    position: absolute;
    top: 0;
    z-index:1000;
}
}
#alaska {
    opacity:0.2;
}
#grid {
    
}

JavaScript

// In answer to StackOverflow question; http://stackoverflow.com/questions/33158918/transform-complex-svg-shapes-into-a-circle-abstraction/33192262#33192262

//You could can take the svg and load it into a canvas element. Take the element, and because it is a canvas element you can get an array of its pixels.

//Your circle abstraction could be built by building the grid out of the pixels of an appropriately resized canvas.

//Sounds simple enough, let's give it a shot;

//First a helper: Grid Manager.

function GridManager(configIn) {
  var gm_ = {};

  gm_.config = {
    'gridWidth': 10,
    'gridHeight': 10,
    'gridCellWidth': 10,
    'gridCellHeight': 10,
    'gridHeight': 100,
    'dataSrc': []
  };

  // Load new config over defaults
  for (var property in configIn) {
    gm_.config[property] = configIn[property];
  }

  /** 
    * Creates an array using the module's config building a 2d data array 
    * from a flat array. Loops over GridManager.config.dataSrc
    * 
    * Render a checkerboard pattern:
    *   GridManager.config.dataSrc = ["#"," "]
    * 
    * Render you can load a image by passing in its full pixel array, 
    * provided image height and width match GridManager.config.gridHeight
    * and GridManager.config.gridWidth. 
    */
  gm_.createGridSrc = function() {
    var height = this.config.gridHeight;
    var width = this.config.gridWidth;
    var output = [];

    for (var i = 0; i < height; i++) {
      output[i] = [];

      for (var ii = 0; ii < width; ii++) {
        if (this.config.dataSrc !== undefined) {
          var dataSrc = this.config.dataSrc;
          output[i][ii] = dataSrc[i*width + ii % dataSrc.length];
        }
      }
    }
    return output;
  };

  /** 
    * Creates a SVG with a grid of circles based on
    * GridManager.config.dataSrc.
    * 
    * This is where you can customize GridManager output.
    */
  gm_.createSvgGrid = function() {
    var cellWidth = this.config.gridCellWidth;
    var cellHeight =...