Edit in JSFiddle

(function(global) {
  (function() {
    if (global.requestAnimationFrame) {
      return;
    }
    if (global.webkitRequestAnimationFrame) {
      global.requestAnimationFrame = global['webkitRequestAnimationFrame'];
      global.cancelAnimationFrame = global['webkitCancelAnimationFrame'] || global['webkitCancelRequestAnimationFrame'];
    }
    var lastTime = 0;
    global.requestAnimationFrame = function(callback) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = global.setTimeout(function() {
        callback(currTime + timeToCall);
      }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
    global.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
  })();
  if (typeof define === 'function') {
    define(function() {
      return global.requestAnimationFrame;
    });
  }
})(window);

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");

var PI = Math.PI;
var HPI = PI / 2;
var PI2 = PI * 2;
var RAD = PI / 180;

window.onresize = function() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
};

var Point = function(x, y) {
  this.x = x || 0;
  this.y = y || 0;
  this.angle = 0;
  this.radius = 0;
  this.radiusAngle = 0;
  this.radiusSpeed = 0;
};

var Circle = function(count, normalLength, radiusIn, radiusOut, color, fill, glow) {
  count = count % 1 == 0 ? count : (count + 1);
  this.count = count;
  this.normalLength = normalLength;
  this.radiusIn = radiusIn;
  this.radiusOut = radiusOut;
  this.color = color;
  this.fill = fill;
  this.glow = glow;

  this.angleSpeed = (Math.random() - .5) * RAD * .1;
  this.points = [];
  this.init();

};

Circle.prototype = {

  init: function() {

    var step = PI2 / this.count;
    var angle = Math.random() * PI2;

    this.points = [];

    for (var i = 0; i < this.count; i++) {
      angle += step;

      var p = new Point(0, 0);

      p.angle = angle;

      p.radius = 0;
      p.radiusAngle = Math.random() * PI2;
      p.radiusSpeed = RAD + Math.random() * 2 * RAD;

      p.normal = this.normalLength;

      this.points.push(p);

    }
  },

  update: function(radiusIn, radiusOut) {
    var scope = this;
    this.points.forEach(function(p) {

      p.angle += scope.angleSpeed;

      p.radius = scope.radiusIn + (.5 + (.5 * Math.cos(p.radiusAngle))) * scope.radiusOut;
      p.radiusAngle += p.radiusSpeed;

      var x = p.x = Math.cos(p.angle) * p.radius;
      var y = p.y = Math.sin(p.angle) * p.radius;

      p.lx = x + Math.cos(p.angle + HPI) * p.normal;
      p.ly = y + Math.sin(p.angle + HPI) * p.normal;

      p.rx = x + Math.cos(p.angle - HPI) * p.normal;
      p.ry = y + Math.sin(p.angle - HPI) * p.normal;

    });

  },
  render: function(ctx) {
    if (this.glow != null) {

      //ctx.shadowColor = this.glow; //'#ffaa88';
      //ctx.shadowBlur = 20; //this.blur;
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = 0;

    }

    ctx.strokeStyle = this.color;
    ctx.beginPath();
    this.points.forEach(function(p, i, a) {

      var n = a[(i + 1) % a.length];
      ctx.lineTo(p.x, p.y);
      ctx.bezierCurveTo(p.lx, p.ly, n.rx, n.ry, n.x, n.y);

    });

    if (this.fill != null) {

      ctx.lineWidth = 3;
      ctx.fillStyle = this.fill;
      ctx.fill();
    }

    ctx.stroke();
    ctx.lineWidth = 1;
  }
};

function init(count, pointCount, normal, radiusIn, radiusOut, colors, fills, glow, blur) {
  for (var i = 0; i < count; i++) {
    var c = new Circle(pointCount, normal, radiusIn, radiusOut, colors[i % colors.length], fills != null ? fills[i % fills.length] : null, glow, blur);
    circles.push(c);
  }
}

function update() {
  requestAnimationFrame(update);

  //ctx.fillStyle = "black";
  //ctx.fillRect(0, 0, w, h);
  ctx.clearRect(0, 0, w, h);
  ctx.save();
  ctx.translate(w / 2, h / 2);

    // Create a shape, of some sort
    ctx.beginPath();
    ctx.moveTo(-crop, -crop);
    ctx.lineTo(crop, -crop);
    ctx.lineTo(0, 0);
    ctx.arc(0, 0, 50, 1.75 * PI, 0.25 * PI, true);
    ctx.lineTo(crop, crop);
    ctx.lineTo(-crop, crop);
    ctx.closePath();
    // Clip to the current path
    ctx.clip();
    
  circles.forEach(function(c) {
    c.update();
    c.render(ctx);
  });


  ctx.restore();

}

var debug = true;
var crop = 200;
var pointCount = 100;
var radius = 30;
var radiusAdd = 90;
var normal = 5;
var circles = [];
var strokeColors = ["rgba(255,255,128,0)"];
var fillColors = ["rgba(0,128,255,0.8)", "rgba(0,200,255,0.8)", "rgba(0,255,255,0.8)"];
var shadowColor = '#00ffff';
var shadowBlur = 60;
init(3, pointCount, normal, radius, radiusAdd, strokeColors, fillColors, shadowColor, shadowBlur);

var pointCount = 100;
var normal = 3;
var radius = 10;
var radiusAdd = 70;
strokeColors = ["rgba(255,255,0,0)"];
var fillColors = ["rgba(255,255,255,0.8)"];
var shadowColor = '#ffffff';
init(2, pointCount, normal, radius, radiusAdd, strokeColors, fillColors, shadowColor, shadowBlur);
update();

head, body{
    width:5%;
    height:50%;
    overflow: hidden;
    top:0;
    left:0;
    margin:0;
    padding:0;
    background: #05071E;
}