<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<canvas></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width=canvas.height=400;
ctx.fillRect(0,0,400,400);
rus();
function rus(){
var a,b,c,d,e,f,s,r,r2,max,x,y,px,py,tim,tm,tx,ty,lit,bai,wr;
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle="rgb(0,0,0)";
ctx.fillRect(0,0,400,400);
ctx.globalCompositeOperation = "lighter";
tim=new Date().getTime()/200;
lit=0.4+Math.sin(tim/11)*0.3;
bai=4+Math.sin(tim/13);
wr=15/bai;
r2=tim/17;
for(f=0;f<40;f++){
a=f;
if(a>30)a=60-a;
s=(a/30)+0.1;
if(f>10 && f<29){
a=Math.abs(19-f)/9;
s*=(a*0.7+0.3);
}
max=(40*s)|0;
r2+=s/70;
tx=200+Math.cos(r2*3)*50;
ty=200+Math.sin(r2*5)*50;
tim+=0.2;
x=y=r=0;
d=[];
for(a=0;a<max;a++){
b=(max-a)/max;
px=Math.cos(r);
py=Math.sin(r);
r+=Math.sin(a/max*Math.PI*bai*s-tim)/wr;
d[a]=[px*b*s,py*b*s,x,y,b*s];
x+=px*b*11*s;
y+=py*b*11*s;
}
for(c=0;c<4;c++){
e=(4-c)*4;
ctx.fillStyle="hsla(11,80%,"+(f/2+15*c+10)+"%,"+lit+")";
ctx.beginPath();
for(a=0;a<d.length;a++)ctx[(a?"line":"move")+"To"](tx+d[a][2]+d[a][1]*e,ty+d[a][3]-d[a][0]*e);
for(a=d.length-2;a>=0;a--)ctx.lineTo(tx+d[a][2]-d[a][1]*e,ty+d[a][3]+d[a][0]*e);
for(a=0;a<d.length;a++)ctx.lineTo(tx-d[a][2]+d[a][1]*e,ty+d[a][3]+d[a][0]*e);
for(a=d.length-2;a>=0;a--)ctx.lineTo(tx-d[a][2]-d[a][1]*e,ty+d[a][3]-d[a][0]*e);
ctx.fill();
}
}
for(a=0;a<20;a++){
tx=200+Math.cos(r2*3)*50;
ty=200+Math.sin(r2*5)*50;
ctx.fillStyle="hsla(11,80%,"+(30+a*3)+"%,"+lit+")";
ctx.beginPath();
ctx.arc(tx,ty,21-a,0,Math.PI*2,false);
ctx.fill();
r2+=0.01;
}
ctx.fillStyle="rgba(255,255,255,0.02)";
for(a=0;a<40;a++){
ctx.beginPath();
ctx.arc(tx,ty,10+a*2,0,Math.PI*2,false);
ctx.fill();
}
requestAnimationFrame(rus);
}
</script>
* {
margin: 0;
padding: 0;
border: 0;
}
canvas {
width: 100%;
height: 100%;
}
