new function(){function d(){this.x=m;this.y=n}function l(b,c){a.beginPath();a.arc(b,c,4,0,2*Math.PI,!1);a.fill()}function p(d){a.save();a.translate(m,n);a.rotate(Math.PI/180-(d?-c:c));a.translate(-m,-n);e.x+=h;e.y-=k;l(e.x,e.y);f.x-=k;f.y+=h;l(f.x,f.y);b.x+=k;b.y-=h;l(b.x,b.y);g.x-=h;g.y+=k;l(g.x,g.y);a.restore()}var q=document;q.body.style.background="#000";var b=q.querySelector("canvas"),a=b.getContext("2d"),r=b.width=420,t=b.height=420,m=r/2,n=t/2,w=0,c=0,k,h,u,e=new d,f=new d,b=new d,g=new d;
new function v(){window.requestAnimationFrame(v);a.globalCompositeOperation="source-over";a.fillStyle="hsla(0,0%,0%,.1)";a.fillRect(0,0,r,t);a.globalCompositeOperation="lighter";u="hsla("+w++%360+", 100%, 50%, 0.8)";a.fillStyle=u;k=1.5*Math.cos(c);h=1.5*Math.sin(c);p(!0);p(!1);c+=.03}};
new function () {
var D = document, B = D.body;
B.style.background = '#000'
var c = D.querySelector('canvas'), $ = c.getContext('2d'), s = 420, w = c.width = s,
h = c.height = s, w2 = w / 2, h2 = h / 2, hu = 0, spd = 0.03, ang = 0, rd = 4,
ARC = 1, COS, SIN, clr, a = new O(), b = new O(), c = new O(), d = new O()
function O() {
this.x = w2
this.y = h2
}
function drawArc(x, y) {
$.beginPath()
$.arc(x, y, rd, 0, 2 * Math.PI, false)
$.fill()
}
function loop(x) {
$.save()
$.translate(w2, h2)
$.rotate(Math.PI / 180 - (x ? -ang : ang))
$.translate(-w2, -h2)
a.x = a.x + SIN
a.y = a.y - COS
drawArc(a.x, a.y)
b.x = b.x - COS
b.y = b.y + SIN
drawArc(b.x, b.y)
c.x = c.x + COS
c.y = c.y - SIN
drawArc(c.x, c.y)
d.x = d.x - SIN
d.y = d.y + COS
drawArc(d.x, d.y)
$.restore()
}
new function draw() {
window.requestAnimationFrame(draw)
$.globalCompositeOperation = 'source-over'
$.fillStyle = 'hsla(0,0%,0%,.1)'
$.fillRect(0, 0, w, h)
$.globalCompositeOperation = 'lighter'
clr = 'hsla(' + hu++ % 360 + ', 100%, 50%, 0.8)'
$.fillStyle = clr
COS = Math.cos(ang) * (ARC * 1.5)
SIN = Math.sin(ang) * (ARC * 1.5)
loop(true)
loop(false)
ang += spd
}
}
