Каким образом сделать подобное?

var width = window.innerWidth 
  , height = window.innerHeight 
  , cx = width / 2 
  , cy = height / 2 
  , radius = Math.min(cx, cy) - 1 
  , segmentsPerRow = 48 
  , angle = 360 / segmentsPerRow 
  , rows = 13 
  , rowHeight = radius / 23 
  , borderWidth = 1 
  , borderColor = '#000' 
  , segmentColor = '#fff' 
  , segments = []; 
   
function polarToCartesian(cx, cy, radius, deg) { 
  var rad = (deg - 90) * Math.PI / 180; 
  return { 
    x: cx + (radius * Math.cos(rad)), 
    y: cy + (radius * Math.sin(rad)) 
  }; 
} 
 
function segmentPath(x, y, radius1, radius2, angleStart, angleEnd) { 
  var start1 = polarToCartesian(x, y, radius1, angleEnd) 
    , end1 = polarToCartesian(x, y, radius1, angleStart) 
    , start2 = polarToCartesian(x, y, radius2, angleEnd) 
    , end2 = polarToCartesian(x, y, radius2, angleStart); 
  return [ 
    'M', start1.x, start1.y,  
    'A', radius1, radius1, 0, 0, 0, end1.x, end1.y, 
    'L', end2.x, end2.y, 
    'A', radius2, radius2, 0, 0, 1, start2.x, start2.y, 
    'L', start1.x, start1.y 
  ].join(' ');        
} 
 
window.onload = function() { 
  var scene = document.getElementById('scene'); 
  scene.setAttribute('viewBox',  [0, 0, width, height].join(' '));   
   
  for (var row = 0; row < rows; row++) { 
    segments.push([]); 
    for (var segment = 0; segment < segmentsPerRow; segment++) { 
      var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
      path.setAttribute('fill', segmentColor); 
      path.setAttribute('stroke', borderColor); 
      path.setAttribute('stroke-width', borderWidth); 
      path.setAttribute('d', segmentPath(cx, cy, radius - row * rowHeight 
        , radius - (row + 1) * rowHeight, angle * segment, angle * (segment + 1))); 
      scene.appendChild(path); 
      segments[row].push(path); 
    } 
  } 
 
  segments[0][0].setAttribute('fill', '#f33'); 
  segments[6][16].setAttribute('fill', '#f33'); 
  segments[12][32].setAttribute('fill', '#f33');   
};

<svg id="scene"></svg>