var c = document.querySelector('.c') /* the canvas element */, 

    ctx = c.getContext('2d') /* canvas context */, 

    w /* canvas height */, h /* canvas height */, 

    t = 0, 

    max = Math.max, 

    pow = Math.pow, sqrt = Math.sqrt, 

    PI = Math.PI, 

    sin = Math.sin, cos = Math.cos /* just me being lazy */;

/* FUNCTIONS */

var trimUnit = function(input_str, unit) {

  return parseInt(input_str.split(unit)[0], 10);

};

var spiral = function() {

  var n = 8 /* shades */, 

      m = 4 /* shade repetitions */, 

      p = 32 /* dots on each branch */, 

      r = 1 /* dot radius */, 

      a, b, 

      beta, gamma, 

      x0, y0, x1, y1, 

      hue, grad, 

      t_step = 1/60;

  ctx.clearRect(0, 0, w, h);

  for(var i = 0; i < n*m; i++) {

    beta = i*2*PI/(n*m);

    x0 = 0;

    /* Begin the path up here */

    ctx.beginPath();

    hue = i*360/n;      

    /* only need to set the fillstyle once up here now */

    ctx.fillStyle = 'hsl(' + hue + ', 100%, 65%)';

    for(var j = 0; j < p; j++) {      

      gamma = j*2*PI/p;

      r = max(1, pow((j*(p - j)), .4) - 5);

      x0 += 3.4*r;

      y0 = x0*sin(gamma + 2*t)/5;

* { overflow: hidden; margin: 0; width: 100%; height: 100%; }

.c { background: black; }

<canvas class='c'>psychedelic rainbow spiral</canvas>