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);
This Pen doesn't use any external CSS resources.