Sectors

to generate a new and unique variation

Source Code

Every variart piece is open source, you can see exactly how it is drawn from the code.

var colors = ['#5898c3', '#c0cee4', '#f6da4d', '#eeeeee', '#55a84b'];
var trackWidth = intVariable('trackWidth', 5, 20);
var centerX = intVariable('centerX', 0, width);
var centerY = intVariable('centerY', 0, height);

// from opsb, http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){
  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);

  var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

  var d = [
      "M", start.x, start.y, 
      "A", radius, radius, 0, arcSweep, 0, end.x, end.y
  ].join(" ");

  return d;       
}

for (var i = 0; i < width; i += trackWidth * 0.9){
  for (var j = 0.0001; j <= 360; j += getRandomInt(0, 50)){
    s.path(describeArc(centerX, centerY, i, j, 360))
     .attr({stroke: colors[getRandomInt(0, colors.length - 1)], fill: 'none', strokeWidth: trackWidth});
  }
}