console
var canvas,ctx,ys,yc,isstart;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width=canvas.height=400;
aaa();
function aaa(){
var a,b,c,d,e,tim,max,x,y,p,bai,tx,ty,
py,px,ps,r,ms,mc,x1,y1,qx,qy,p1,z;
ctx.fillStyle="rgb(211,211,211)";
ctx.fillRect(0,0,canvas.width,canvas.height);
tim=new Date().getTime()/50;
py=0.35;
px=py*Math.sin(Math.PI/3);
a=1.0+Math.sin(tim/17)*0.4;
bai=0.8+Math.sin(tim/29)*0.3;
ys=Math.sin(a);
yc=Math.cos(a);
ps=Math.sin(tim/3)*1.5;
p=[];
e=Math.sin(tim/37)*0.75;
r=tim/43;
for(d=0;d<3;d++){
ms=Math.sin(r);
mc=Math.cos(r);
for(a=0;a<6;a++){
for(b=0;b<6;b++){
c=0;
if(b%2==1)c=0.5;
x=b*px+e;
y=(a+c-2.25)*py;
x*=2;
y*=2;
x1=mc*x-ms*y;
y1=ms*x+mc*y;
p.push([x1,y1]);
}
}
r+=Math.PI*2/3;
}
tx=canvas.width/2;
ty=canvas.height/2;
qx=Math.cos(tim/7)*2;
qy=Math.sin(tim/11)*2;
p.push([qx,qy,0,0,1]);
p1=[];
for(a=0;a<p.length;a++){
for(b=0;b<p1.length;b++){
if(p[a][1]<p1[b][1]){
for(c=p1.length-1;c>=b;c--){
p1[c+1]=p1[c];
}//c
p1[b]=p[a];
break;
}//b
}
if(b==p1.length)p1.push(p[a]);
}
for(a=0;a<p1.length;a++){
b=p1[a];
x=b[0];
y=b[1];
z=y*ys;
y=y*yc;
r=Math.atan2(qy-y,qx-x)-Math.PI/8;
z=Math.pow(1.2,z);
x*=z;
y*=z;
x=x*170*bai+tx;
y=y*170*bai+ty;
if(b[4]){
ctx.fillStyle="rgb(0,0,0)";
ctx.font=(60*bai*z)+"px HGP創英角ﾎﾟｯﾌﾟ体";
b="N";
c=ctx.measureText(b).width/2;
ctx.fillText(b,x-c,y+15*bai);
}else{
hito(x,y,z*bai*0.9,r,ps);
}
}
requestAnimationFrame(aaa);
}
function hito(tx,ty,s,r,tm){
var a,b,c,p,x,y,x1,y1,maki,col1,col2,m,
ude,asi,mmc,mms,mc,ms,x2,y2;
ctx.lineWidth=s;
col1="rgb(244,244,244)";
col2="rgb(0,0,0)";
ctx.fillStyle=col1;
x1=Math.cos(r);
y1=Math.sin(r);
m=[x1*9,-12,y1*9,x1*30,-6,y1*30,1,col2];
ude=[];
asi=[];
mmc=Math.cos(0.5);
mms=Math.sin(0.5);
a=r-Math.PI/2;
for(b=0;b<2;b++){
x1=Math.cos(a);
y1=Math.sin(a);
mc=Math.cos(tm+a);
ms=Math.sin(tm+a);
x2=mc*4;
y2=ms*4;
asi[b]=[x1*6,20,y1*6,x1*6+x2,38,y1*6+y2,3,col1];
mc=Math.cos(a-tm);
ms=Math.sin(a-tm);
x2=mc*10;
y2=ms*10;
ude[b]=[x1*8,0,y1*8,x1*6+x2,8,y1*8+y2,3,col1];
a+=Math.PI;
}
if(asi[0][2]<0){
nmaru(asi[0]);
nmaru(ude[0]);
}else{
nmaru(asi[1]);
nmaru(ude[1]);
}
if(m[2]<0)nmaru(m);
nmaru([0,-14,0,0,14,0,5,col1]);
if(asi[0][2]>=0){
nmaru(asi[0]);
nmaru(ude[0]);
}else{
nmaru(asi[1]);
nmaru(ude[1]);
}
x=tx;
y=ty-20*s*ys;
tamago(x,y,s,0.7);
a=r-0.5;
for(b=0;b<2;b++){
x1=Math.cos(a)*9*s;
y1=Math.sin(a);
a+=1;
if(y1<0)continue;
c=1;
if(y1<0.2)c=y1/0.2;
y1*=9*s*yc;
ctx.fillStyle="rgba(0,0,0,"+c+")";
ctx.beginPath();
ctx.arc(tx+x1,y+y1,1.5*s,0,Math.PI*2,0);
ctx.fill();
}
if(m[2]>=0)nmaru(m);
function nmaru(p){
var a,b,r,px,py,sx,sy,sz,ex,ey,ez,w;
sx=p[0];sy=p[1];sz=p[2];ex=p[3];ey=p[4];ez=p[5];w=p[6];
ctx.fillStyle=p[7];
sx=tx+sx*s;
sy=ty+sy*s*ys+sz*yc*s;
ex=tx+ex*s;
ey=ty+ey*s*ys+ez*yc*s;
w*=s;
px=ex-sx;
py=ey-sy;
r=Math.atan2(py,px);
px=Math.cos(r)*w;
py=Math.sin(r)*w;
ctx.beginPath();
ctx.lineTo(sx+py,sy-px);
ctx.lineTo(ex+py,ey-px);
ctx.arc(ex,ey,w,r-Math.PI/2,r+Math.PI/2,0);
ctx.lineTo(ex-py,ey+px);
ctx.lineTo(sx-py,sy+px);
ctx.arc(sx,sy,w,r+Math.PI/2,r-Math.PI/2,0);
ctx.fill();
ctx.stroke();
}
}
function tamago(x,y,s,w){
var a,b,x1,y1;
ctx.lineWidth=s;
b=0;
ctx.beginPath();
for(a=0;a<40;a++){
x1=Math.cos(b)*15*s*w;
y1=Math.sin(b)*15*s;
ctx.lineTo(x+x1,y+y1);
b+=Math.PI*2/40;
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
<canvas></canvas>
* {
margin: 0;
padding: 0;
border: 0;
background: #000000
}
canvas {
position: relative; top:50%;
left:50%;
margin-left:-50vmin;
width:100vmin;
height:100vmin;
overflow:hidden;
display: block;
}