<canvas id = 'canv'></canvas>
<!--
Thanks to @pixelass && @enxaneta for the cross browser glyph trick...
Thanks to @DonKarlssonSan for the resize tip for mobile perf..
!-->
body{
  width:100%; 
  margin:0;
  overflow:hidden;
  background:hsla(263, 95%, 5%, 1);
}
View Compiled
var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var arr = [];
for (n = 1000; n--;){ 
  rnd = 100000 * Math.random(), 
    arr[n] = {
      dira: rnd,
      dirb: rnd,
      p: 0,
      x: w / 2,
      y: h / 2,
      alph: .1
  }
};

$.fillStyle = 'hsla(263, 95%, 5%, 1)';
//this: Monaco, Menlo, Consolas, 'Courier New', monospace - is a cross-platform glyph hack
$.font = "bold 35em Monaco, Menlo, Consolas, 'Courier New', monospace";
$.fillText('☮', (c.width - $.measureText('☮').width) * 0.5, c.height * 0.75);
var id = $.getImageData(0, 0, w, h).data;
$.fillRect(0, 0, w, h);

function draw() {
  window.requestAnimationFrame(draw);
  $.fillStyle = 'hsla(263, 95%, 5%, 1)';
  $.globalCompositeOperation = 'source-over';
  $.fillStyle = 'hsla(263, 95%, 5%, .05)';
  $.fillRect(0, 0, w, h);
  for (o = arr.length; o--;){
    var p = arr[o]; 
    dx = p.x; 
    dy = p.y; 
    dist = Math.sqrt(dx * dx + dy * dy); 
    p.dira += 0.5 < Math.random() ? -1 : 1; 
    p.dirb -= 0.05 * (p.dirb - p.dira);
    var vel = 15.0 * p.dirb;
    p.x += Math.sin(vel / 180 * Math.PI); 
    p.y += Math.cos(vel / 180 * Math.PI); 
    var img = id[4.0 * (~~p.x + ~~p.y * w) - 1.0]; 
    p.p != img && (p.alph= 0.01); 
    p.alph += 0.5 > p.alph ? 0.02 : 0;
    p.x > w + 30 && (p.x = -30); 
    p.x < -30 && (p.x = w + 30); 
    p.y > h + 30 && (p.y = -30);
    p.y < -30 && (p.y = h + 30); 
    $.fillStyle = img ?  'hsla(263, 95%,5%,'+p.alph+')' : 'hsla('+o+', 80%, 60%,'+p.alph+')' ; 
    p.p = img;
    $.font = "bold 1.3em Monaco, Menlo, Consolas, 'Courier New', monospace";
    $.fillText('★',p.x,p.y);
    /*Or particles
    $.beginPath();
    $.arc(p.x,p.y, 7,0,Math.PI*2);
    $.fill();*/
  }
};
draw();

window.addEventListener('resize',function(){
//if statement- keeping the resize from constantly firing, improving mobile perf.
  if(w!==window.innerWidth){
     c.width = window.innerWidth;
     c.height = window.innerHeight;
  }
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.