linked-gears

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 900px;
  height: 500px;
  position: relative;
}

form {
  position: absolute;
  top: 1em;
  left: 1em;
}

path {
  fill-rule: evenodd;
  stroke: #333;
  stroke-width: 2px;
}

.sun path {
  fill: #6baed6;
}

.planet path {
  fill: steelblue;
}

.center path {
  fill: #ED4E4E;
}

.moon path {
  fill: rgb(45, 176, 89);
}
.star path {
  fill: rgb(255, 205, 63);
}

</style>

var width = 900,
    height = 500,
    radius = 40,
    ratio = 5;
    ratio2 = 4
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3);

var offset = 0,
    speed = .03,
    start = Date.now();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(.55)")
  .append("g");

var frame = svg.append("g")
    .datum({radius: Infinity});

frame.append("g")
    .attr("class", "center")
    .attr("transform", "translate(" + (radius*0) + ",0) rotate(" + 16 + ")")
    .datum({teeth: 11*ratio, radius: radius*ratio, direction: 1})
  .append("path")
    .attr("d", gear);

frame.append("g")
    .attr("class", "center")
    .attr("transform", "translate(" + (radius*0) + ",0) rotate(" + 16 + ")")
    .datum({teeth: 11, radius: radius, direction: 1})
  .append("path")
    .attr("d", gear);

// frame.append("g")
//     .attr("class", "planet")
//     .attr("transform", "translate(" + -(radius*1.28*2) + ",0)")
//     .datum({teeth: 11, radius: radius, direction: -1})
//   .append("path")
//     .attr("d", gear);

frame.append("g")
    .attr("class", "sun")
    .attr("transform", "translate(" + (radius*(1.58 + ratio2)) + ",0) rotate(23)")
    .datum({teeth: 11*ratio2, radius: radius*ratio2, direction: -1/ratio2})
  .append("path")
    .attr("d", gear);

frame.append("g")
    .attr("class", "moon")
    .attr("transform", "translate(" + -(radius*(ratio + 1.58)) + ",0) rotate(1)")
    .datum({teeth: 11, radius: radius, direction: -ratio})
  .append("path")
    .attr("d", gear);

frame.append("g")
    .attr("class", "star")
    .attr("transform", "translate(" + -(radius*(ratio*2 + 1.58 + 1.58)) + ",0) rotate(16)")
    .datum({teeth: 11*ratio, radius: radius*ratio, direction: 1})
  .append("path")
    .attr("d", gear);

function gear(d) {
  var n = d.teeth,
      r0 = Math.abs(d.radius) + radius/2,
      r2 = r0 - radius/2,
      r3 = 10,
      da = Math.PI / n,
      a0 = -Math.PI / 2 + (d.annulus ? Math.PI / n : 0),
      i = -1,
      path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
  while (++i < n){
    path.push("L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0))
    a0 += da;
    path.push("L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0))
    a0 += da;
  } 
  path.push("L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0))

path.push("M0,", -r3, "A", r3, ",", r3, " 0 0,0 0,", r3, "A", r3, ",", r3, " 0 0,0 0,", -r3, "Z");
  return path.join("");
}

d3.timer(function() {
  var angle = (Date.now() - start) * speed,
      transform = function(d) { return "rotate(" + angle  * d.direction + ")"; };
  frame.selectAll("path").attr("transform", transform);
  frame.attr("transform", transform); 
});

</script>