Ezlqg

Ezlqg.markdown

Ezlqg

A Pen by Christopher Hoage on CodePen.

License.

index.html

<canvas id="canvas" width="500" height="500"></canvas>
<img src="http://i.imgur.com/t41JRrr.gif" alt="" />

script.js

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');


 var centerX = canvas.width / 2;
 var centerY = canvas.height / 2;
 var radius = 170;
 var innerRadius = 70;

var steps = 24;
var step = 24;

var PI2 = 2 * Math.PI;

var draw = function () {
  context.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < steps; i++) {
      var radianStep = PI2 * i / steps;
      var x = (centerX + radius * Math.cos(radianStep));
      var y = (centerY + radius * Math.sin(radianStep));
      var aX = (x + innerRadius * Math.cos(PI2 * step / steps));
      var aY = (y + innerRadius * Math.sin(PI2 * step / steps));
      context.beginPath();
      context.arc(aX, aY, 12, 0, PI2, false);
      var hslFill = Math.floor(radianStep * 180 / Math.PI) + 90;
      context.fillStyle = 'hsl(' + hslFill + ', 100%, 50%)';
      context.fill();
      context.closePath();
  }  
  step = step ? --step : steps;
  //console.log('drawn', step);
  //requestAnimationFrame(draw, canvas);
}

setInterval(draw, 33);
//requestAnimationFrame(draw, canvas);

style.css

body {
  background-color: #000;
}