<canvas id="bc"></canvas>
<canvas id="fc"></canvas>

 
<script>
var w = bc.width = fc.width = window.innerWidth,
h = bc.height = fc.height = window.innerHeight,
bctx = bc.getContext('2d'),
fctx = fc.getContext('2d'),
size = [20, 60], //[min, max]
shineDir = [.01, .02],
angSpeed = [.01, .04],
stars = [],
frame = (Math.random() * 360) | 0,
pentaRadiant = Math.PI * 2 / 5;
 
function rand(ar) {
return Math.random() * (ar[1] - ar[0]) + ar[0];
}
 
function Star() {
this.size = rand(size);
this.x = Math.random() * w;
this.y = -this.size * 2;
this.vy = this.size / 10;
this.vx = Math.random() * 6 - 3;
this.ay = this.size / 5000;
this.shine = 0;
this.shineDir = rand(shineDir);
this.color = 'hsla(hue, 100%, brightness%, .8)'.replace('hue', frame % 360);
this.rot = Math.random() * 2 * Math.PI;
this.omega = rand(angSpeed);
if (Math.random() < .5) this.omega *= -1;
}
Star.prototype.use = function() {
this.x += this.vx;
this.y += this.vy += this.ay;
var newShine = this.shine + this.shineDir;
if (newShine < 0 || newShine > 1) this.shineDir *= -1
else this.shine = newShine;
this.rot += this.omega;
bctx.translate(this.x, this.y);
fctx.translate(this.x, this.y);
bctx.rotate(this.rot);
fctx.rotate(this.rot);
bctx.fillStyle = fctx.fillStyle = this.color.replace('brightness', (.25 + this.shine / 2) * 100);
fctx.beginPath();
fctx.moveTo(this.size, 0);
for (var i = 0; i < 5; ++i) {
var rad = pentaRadiant * i,
halfRad = rad + pentaRadiant / 2;
fctx.lineTo(Math.cos(rad) * this.size, Math.sin(rad) * this.size);
bctx.fillRect(Math.cos(rad) * this.size, Math.sin(rad) * this.size, 2, 2);
fctx.lineTo(Math.cos(halfRad) * this.size / 2, Math.sin(halfRad) * this.size / 2);
}
fctx.closePath();
fctx.fill();
fctx.rotate(-this.rot);
bctx.rotate(-this.rot);
fctx.translate(-this.x, -this.y);
bctx.translate(-this.x, -this.y);
}
 
function anim() {
window.requestAnimationFrame(anim);
++frame;
bctx.fillStyle = 'rgba(0, 0, 0, .1)';
bctx.fillRect(0, 0, w, h);
fctx.clearRect(0, 0, w, h);
if (Math.random() < .1) stars.push(new Star);
for (var s = 0; s < stars.length; ++s) {
stars[s].use();
if (stars[s].x + stars[s].size < 0) {
stars.splice(s, 1);
--s;
}
}
}
anim();
</script>