Squared Circles

var colors = ['#BB2843', '#EE983F', '#F4F34D', '#C3DA40', '#56B952', '#24ABC0', '#2DA6D2', '#216AB6', '#342983', '#6D2A87', '#A61A81', '#EC3994']

var startColorIndex = getRandomInt(0, colors.length - 1);
var i = 0;

function squaredCircle(x, y) {
  var g = s.g();
  
  // cell is either...
  if (i % 2 == 0){
    // background color with black/white circle
    var halfCircleColor = '#000000';
    var backgroundColor = colors[(startColorIndex + i) % colors.length];
  } else {
    // black color with white/color circle
    var halfCircleColor = colors[(startColorIndex + i) % colors.length];
    var backgroundColor = '#000000';    
  }
  
  g.append(s.rect(100, 100, 200, 200).attr({fill: backgroundColor}));
  g.append(s.path("M0,0 C45,0 83,37 83,83 C83,128 45,166 0,166 L0,0 Z").attr({fill: '#ffffff'}).transform('t200,120'))
  g.append(s.path("M0,0 83,0 C37,0 0,37 0,83 C0,128 37,166 83,166 L83,0 Z").attr({fill: halfCircleColor}).transform('t120,120'))

  var r = getRandomInt(0, 1) == 0 ? 90 : 0;
  
  g.transform('r0s0.5t-100,-100t'+x+','+y+'r'+r)

  i += 1;
}

for (var x = 0; x <= width; x += 200){
  for (var y = 0; y <= height; y += 200){
    squaredCircle(x, y)
  }  
}