A CodePen by Erik Kastner.

index.html

<canvas id="canvas" width="500" height="500"></canvas>

script.js

var canvas = $("#canvas");
var width = canvas.width();
var height = canvas.height();
var ctx = canvas.get(0).getContext("2d");
var lastTs = 0;
var phaseAngle = 0;
var circleRad = 35;
var spacing = 30;


function field () {
  for (var y=0; y<=height; y+=spacing) {
    for (var x=0; x<=width; x+=spacing) {
      circle(x, y);
      dot(x, y, phaseAngle);
      phaseAngle += 0.0005;
    }
  }
}

// draw a dot on the bigger circle
function dot (x, y, phase) {
  ctx.beginPath();
  var hue = x * 0.4 + y * 0.4 % 360;
  ctx.fillStyle = "hsl(" + hue + ", 50%, 50%)";
  phase = phase + (x * 0.01) + (y * 0.006);
  ctx.arc(Math.cos(phase) * circleRad + x, Math.sin(phase) * circleRad + y, 5, 0, Math.PI*2, false);
  ctx.closePath();
  ctx.fill();
}

// draw a bigger empty circle
function circle (x, y) {
  ctx.beginPath();
  ctx.strokeStyle = "rgba(50, 50, 50, 0.05)";
  ctx.arc(x, y, circleRad, 0, Math.PI*2, false);
  ctx.closePath();
  ctx.stroke();
}

function draw (ts) {
  // control speed here... higher is slower
  if (ts - lastTs >= 50) {
    lastTs = ts;
    ctx.clearRect(0, 0, width, height);
    field();
  }
  requestAnimationFrame(draw);
}

draw(0);