$(function() {

  var canvas = document.getElementById("canvas"),

      context = canvas.getContext("2d"),

      width = canvas.width,

      height = canvas.height,

      circles,

      inner,

      fps = 60,

      count = 20,

      initial_radius=50,

      drift = 2,

      offset = 0;

  function draw(inner_radius) {

  // create inner circle and draw it:

  inner = {

    x: width / 2,

    y: height / 2,

    radius: inner_radius

  };

  //drawCircle(inner);

  // get outer circles and draw them:

  circles = getOuterCircles(inner, count);

  for(var i = 0; i < circles.length; i += 1) {

    drawCircle(circles[i]);

  }

    offset += 0.01;

  function getOuterCircles(inner, count) {

    var circles = [],

        angle = Math.PI * 2 / count, // angle between circles

        outerRadius = getOuterRadius(count, inner.radius),

        r = inner.radius + outerRadius,

        currentAngle;

    for(var i = 0; i < count; i += 1) {

      currentAngle = i * angle + offset;

      circles.push({

        x: inner.x + Math.cos(currentAngle) * r,

        y: inner.y + Math.sin(currentAngle) * r,

        radius: outerRadius

      });

    }

    return circles; 

  }

  function getOuterRadius(count, innerRadius) {

    var s = Math.sin(Math.PI / count);

    return (s * innerRadius) / (1 - s);

  }

  function drawCircle(c) {

    context.beginPath();

    context.arc(c.x, c.y, c.radius, 0, Math.PI * 2, false);

    context.stroke();

  }

}

​

​

draw();

​

​

function update() {

        context.clearRect(0, 0, width, height);

        drift = Math.sin(offset) * 40;

        draw(initial_radius + drift);

}

​

setInterval(function() {

        update();

    }, 1000/fps);

​

​

});