canvas
View Compiled
html, body {
  
  background: #000;
  color: #fff;
  
  overflow: hidden;
  
  width: 100%;
  height: 100%;
  
}
View Compiled
var $window = $(window),
    $document = $(document),
    $canvas = $('canvas'),
    mouseX = 0,
    mouseY = 0,
    canvas = $canvas.get(0),
    context = canvas.getContext('2d');
    gradient = context.createRadialGradient(0,0,0,0,0,100),
    sun = context.createRadialGradient(0,0,0,0,0,100);

    gradient.addColorStop(0,"rgba(255,255,255,0)");
    gradient.addColorStop(1,"rgba(255,255,255,1)");

    sun.addColorStop(0,"rgba(255,255,255,1)");
    sun.addColorStop(1,"rgba(255,255,255,0)");

$window.on('resize', function() {
  
  $canvas
    .attr('width', $window.width())
    .attr('height', $window.height());
  
}).trigger('resize');

$document.on('mousemove', function(e){
  mouseX = e.clientX;
  mouseY = e.clientY;
});

var flares = [];
for (var i = 0; i < 10; i++) {
  flares.push({
    x: 0,
    y: 0,
    alpha: 0.5,
    scale: Math.random(),
    p: (Math.random() - 0.5) * 3
  });
}

function loop() {
  
  context.clearRect(0,0,canvas.width,canvas.height);
  
  var centerX = canvas.width * 0.5,
      centerY = canvas.height * 0.5;
  
  var dx = mouseX - centerX;
  var dy = mouseY - centerY;
  
  var a = Math.atan2(dy, dx);
  
  var d = Math.sqrt(dx * dx + dy * dy);
  
  var sx = centerX + (Math.cos(a) * -canvas.width);
  var sy = centerY + (Math.sin(a) * -canvas.width);
  
  var ex = centerX + (Math.cos(a) * canvas.width);
  var ey = centerY + (Math.sin(a) * canvas.width);

  // FOR DEBUG PURPOSES
  /*context.strokeStyle = '#0f0';
  context.beginPath();
  context.moveTo(sx, sy);
  context.lineTo(ex, ey);
  context.stroke();

  context.strokeStyle = '#f00';
  context.beginPath();
  context.moveTo(centerX, centerY);
  context.lineTo(mouseX, mouseY);
  context.stroke();*/
  
  for (var i = 0; i < flares.length; i++) {
    
    var flare = flares[i];
    
    flare.x = centerX + (Math.cos(a) * flare.p * d);
    flare.y = centerY + (Math.sin(a) * flare.p * d);
    
    context.save();
    
    context.translate(flare.x,flare.y);
    context.scale(flare.scale,flare.scale);
    
    var dh = Math.max(canvas.width,canvas.height);
    
    context.globalAlpha = flare.alpha * (d / dh);
    context.globalCompositeOperation = 'lighter';
    
    context.fillStyle = gradient;
    context.beginPath();
    context.arc(0,0,100,0,Math.PI * 2);
    context.fill();
    
    context.restore();
    
    context.save();
    context.translate(mouseX,mouseY);
    context.fillStyle = sun;
    
    context.shadowColor = '#fff';
    context.shadowBlur = 8;
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    
    context.beginPath();
    for (var j = 0; j < 66; j++) {
      var jp = (j / 64) * Math.PI * 2;
      if (j == 0) { 
        context.moveTo(Math.cos(jp) * 32, Math.sin(jp) * 32);
      } else if (j%2 == 0) {
        context.lineTo(Math.cos(jp) * 8, Math.sin(jp) * 8);
      } else {
        context.lineTo(Math.cos(jp) * 32, Math.sin(jp) * 32);
      }
    }
    context.fill();
    context.restore();
    
  }
  
  requestAnimationFrame(loop);
  
}

loop(0);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js