JS Fade Spiral SRC

  <canvas id="canvas"></canvas>

<script>
 var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    HEIGHT = window.innerHeight,
    WIDTH = window.innerWidth,
    TO_RADIANS = Math.PI / 360;

var raf = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

function clear(style) {
  ctx.save();
  ctx.fillStyle = style || 'rgba(0,0,0,0.01)';
  ctx.fillRect(0, 0, WIDTH, HEIGHT);
  ctx.restore();
}

function square(x, y, w, h) {
  ctx.beginPath();
  ctx.rect(WIDTH/2 + x, HEIGHT/2 + y, w, h);
  ctx.closePath();
  ctx.fill();
}

function circle(x, y, w, h) {
  ctx.beginPath();
  ctx.arc(WIDTH/2 + x, HEIGHT/2+ y, w, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}

canvas.width = WIDTH;
canvas.height = HEIGHT;

var offsetX = 0,
    offsetY = 0;

function draw() {
  clear();

  offsetX+= 2;
  offsetY++;
  var x = Math.sin(WIDTH + offsetX * TO_RADIANS) * WIDTH/4;
  var y = Math.sin(HEIGHT + offsetY * TO_RADIANS) * HEIGHT/4;

  ctx.fillStyle = 'cyan';
  circle(x, y, 2, 10);
  offsetX += 2;


  raf(draw, 16);
}

clear('black');
draw();
</script>