direct-img/vibegif.direct-img.link
1
0
Fork 0
mirror of https://github.com/direct-img/vibegif.direct-img.link.git synced 2026-10-29 11:44:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add 150 UI and page state stickers in three pending sections

Browse Source 
404s, loaders, success, errors, empty states, confirmation, under
construction, offline and more: 50 monochrome (ui), 50 colored (uicolor)
and 50 with an anime girl (uianime), on /test until approved.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
multipleof4
2026-10-24 03:10:04 +00:00
co-authored by Claude Opus 5.5
parent c59222f593
commit c00ba79178
450 changed files with 5481 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gen/uianime/loading/fishing.js
+56
View File
@@ -0,0 +1,56 @@
// patient green-haired girl in a straw hat fishing from the shore, her bobber bobbing on the pond with spreading ripples while she waits for a bite
const{sin,cos,PI,max,min,exp}=Math,T=2*PI
export const frames=16,delay=90
const SKIN='#ffe3d1',HAIR='#69db7c',HD='#2f9e44',HL='#d3f9d8',EYE='#a9744f',ED='#6f4518',HAT='#ffe066',HTD='#e8b93c',RIB='#fa5252',TOP='#ff8fab',TD='#f06595',WAT='#a5d8ff',WD='#74c0fc',ROD='#a9744f',BL='#ffa8a8',Z=.8
const eye=(c,x,y,d)=>{
c.fillStyle='#fff';c.beginPath();c.ellipse(x,y,14,17,0,0,T);c.fill()
c.save();c.beginPath();c.ellipse(x,y,14,17,0,0,T);c.clip();c.beginPath();c.ellipse(x+4,y+4,11.5,15,0,0,T);c.fillStyle=EYE;c.fill();c.lineWidth=2.5;c.stroke()
c.fillStyle=ED;c.beginPath();c.ellipse(x+4,y-6,13,10,0,0,T);c.fill()
c.fillStyle='#111';c.beginPath();c.ellipse(x+5,y+6,5.5,7.5,0,0,T);c.fill()
c.fillStyle='#fff';c.beginPath();c.arc(x,y-1,4.5,0,T);c.fill();c.beginPath();c.arc(x+9,y+10,2,0,T);c.fill();c.restore()
c.lineWidth=7;c.beginPath();c.moveTo(x-16,y-6);c.quadraticCurveTo(x,y-20,x+16,y-6);c.moveTo(x+d*15,y-7);c.lineTo(x+d*21,y-12);c.stroke()
}
export default(c,t,i)=>{
const nb=i==9||i==11,by=210+4*sin(2*T*t)+(nb?10:0),bx=196,tx=234,ty=34,bk=i==4
c.lineWidth=6;c.fillStyle=WAT;c.beginPath();c.ellipse(178,218,72,30,0,0,T);c.fill();c.stroke()
c.save();c.clip();c.fillStyle='#4dabf7';const fa=T*t,fx=184+34*cos(fa),fy=224+8*sin(fa),fd=-sin(fa)<0?-1:1;c.beginPath();c.ellipse(fx,fy,14,6,0,0,T);c.moveTo(fx-fd*12,fy);c.lineTo(fx-fd*22,fy-6);c.lineTo(fx-fd*22,fy+6);c.fill();c.restore()
c.strokeStyle=WD;c.lineWidth=4;c.beginPath();c.moveTo(126,230);c.lineTo(146,230);c.moveTo(214,238);c.lineTo(232,238);c.stroke()
c.strokeStyle='#fff';for(const o of[0,.5]){const p=(t*2+o)%1;c.lineWidth=4*(1-p)+.5;c.beginPath();c.ellipse(bx,214,14+26*p,4+9*p,0,0,T);c.stroke()}
c.strokeStyle='#111'
for(const[w,s]of[[5,'#111'],[2,'#fff']])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(tx,ty),c.quadraticCurveTo(tx+2,ty+100,bx,by-18),c.stroke()
c.strokeStyle='#111';c.lineWidth=4;c.beginPath();c.moveTo(bx,by-18);c.lineTo(bx,by-9);c.stroke()
c.save();c.beginPath();c.arc(bx,by,13,0,T);c.clip();c.fillStyle='#fff';c.fill();c.fillStyle=RIB;c.fillRect(bx-14,by-14,28,14);c.restore()
c.lineWidth=5;c.beginPath();c.arc(bx,by,13,0,T);c.stroke();c.beginPath();c.moveTo(bx-13,by);c.lineTo(bx+13,by);c.stroke();c.strokeStyle='#fff';c.lineWidth=3.5;c.beginPath();c.arc(bx,by,7,PI*1.15,PI*1.45);c.stroke();c.strokeStyle='#111'
c.save();c.beginPath();c.rect(bx-20,by+3,40,20);c.clip();c.fillStyle=WAT;c.beginPath();c.ellipse(bx,by+12,17,8,0,0,T);c.fill();c.restore()
if(nb){c.fillStyle=WAT;c.lineWidth=3.5;for(const d of[-1,1]){c.beginPath();c.ellipse(bx+d*22,196,4,6,d*.5,0,T);c.fill();c.stroke()}}
c.save();c.translate(86,262);c.scale(Z,Z);c.translate(-128,-262)
c.lineWidth=7;c.fillStyle=HD;c.beginPath();c.moveTo(128,36);c.bezierCurveTo(196,36,206,96,198,150);c.lineTo(58,150);c.bezierCurveTo(50,96,60,36,128,36);c.fill();c.stroke()
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(62,198,54,262);c.lineTo(202,262);c.quadraticCurveTo(194,198,156,190);c.closePath();c.fill();c.stroke()
c.fillStyle='#fff';c.beginPath();c.moveTo(104,190);c.quadraticCurveTo(110,212,128,206);c.quadraticCurveTo(146,212,152,190);c.closePath();c.fill();c.lineWidth=6;c.stroke()
c.fillStyle=SKIN;c.beginPath();c.moveTo(116,168);c.lineTo(116,194);c.quadraticCurveTo(128,204,140,194);c.lineTo(140,168);c.fill();c.beginPath();c.moveTo(116,168);c.lineTo(116,192);c.moveTo(140,168);c.lineTo(140,192);c.stroke()
c.fillStyle=HAIR;c.lineWidth=7;for(let k=4;k>=0;k--)c.beginPath(),c.ellipse(64+k*2,156+k*16,12-k*.5,10,k%2?.5:-.5,0,T),c.fill(),c.stroke()
c.fillStyle=RIB;c.lineWidth=5;c.beginPath();c.ellipse(72,236,9,6,0,0,T);c.fill();c.stroke()
c.lineWidth=7;c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
if(bk){c.lineWidth=6;for(const x of[103,153])c.beginPath(),c.moveTo(x-14,144),c.quadraticCurveTo(x,151,x+14,144),c.stroke()}
else{eye(c,103,140,-1);eye(c,153,140,1)}
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*42,162,12,6,0,0,T),c.fill()
c.lineWidth=3;for(const d of[-1,1])for(const k of[-5,0,5])c.beginPath(),c.moveTo(128+d*42+k-2,165),c.lineTo(128+d*42+k+2,159),c.stroke()
c.lineWidth=4;c.beginPath();c.arc(130,164,7,.15*PI,.85*PI);c.stroke()
c.lineWidth=7;c.fillStyle=HAIR;c.beginPath();c.moveTo(70,146)
c.bezierCurveTo(54,74,88,36,128,36);c.bezierCurveTo(168,36,202,74,186,146)
c.quadraticCurveTo(186,116,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110)
c.quadraticCurveTo(132,96,124,90);c.quadraticCurveTo(118,102,110,108);c.quadraticCurveTo(106,96,96,94);c.quadraticCurveTo(90,104,86,112)
c.quadraticCurveTo(80,104,78,102);c.quadraticCurveTo(70,120,70,146);c.closePath();c.fill();c.stroke()
c.save();c.translate(128,58);c.rotate(-.12)
c.fillStyle=HAT;c.beginPath();c.ellipse(0,8,90,19,0,0,T);c.fill();c.stroke()
c.beginPath();c.moveTo(-52,10);c.bezierCurveTo(-52,-44,52,-44,52,10);c.quadraticCurveTo(0,20,-52,10);c.fill();c.stroke()
c.fillStyle=RIB;c.beginPath();c.moveTo(-52,-2);c.quadraticCurveTo(0,8,52,-2);c.lineTo(52,10);c.quadraticCurveTo(0,20,-52,10);c.closePath();c.fill();c.stroke()
c.strokeStyle=HTD;c.lineWidth=4;c.beginPath();c.ellipse(0,8,76,13,0,.1*PI,.9*PI);c.stroke()
c.strokeStyle='#fff';c.lineWidth=6;c.beginPath();c.arc(0,4,36,PI*1.2,PI*1.42);c.stroke();c.strokeStyle='#111'
c.restore()
c.restore()
for(const[w,s]of[[13,'#111'],[6,ROD]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(122,236),c.lineTo(tx,ty),c.stroke()
c.strokeStyle='#111';c.fillStyle='#ced4da';c.lineWidth=4.5;c.beginPath();c.arc(140,210,9,0,T);c.fill();c.stroke()
for(const[l,s]of[[28,'#111'],[17,TOP]])c.lineWidth=l,c.strokeStyle=s,c.beginPath(),c.moveTo(96,262),c.lineTo(124,228),c.moveTo(170,262),c.lineTo(148,204),c.stroke()
c.strokeStyle='#111';c.lineWidth=5;c.fillStyle=SKIN;for(const[x,y]of[[126,226],[148,202]])c.beginPath(),c.ellipse(x,y,11,10,-.6,0,T),c.fill(),c.stroke()
}
gen/uianime/loading/pray.js
+37
View File
@@ -0,0 +1,37 @@
// purple haired shrine maiden squeezing her eyes shut and praying hard while a ring of loading dots spins around her and sparkles twinkle
const{sin,cos,PI,min}=Math,T=2*PI
export const frames=12,delay=80
const SKIN='#ffe3d1',HAIR='#9775fa',HD='#6741d9',HL='#e5dbff',RED='#fa5252',BL='#ff8fab',SW='#a5d8ff',DOT=['#fd7e14','#fcc419','#ffe066','#fff3bf']
const ds=(c,a,b,s,f)=>{for(const[l,k]of[[a,'#111'],[b,s]])c.lineWidth=l,c.strokeStyle=k,c.beginPath(),f(),c.stroke();c.strokeStyle='#111'}
const spark=(c,x,y,r)=>{c.beginPath();c.moveTo(x,y-r);for(const[a,b]of[[1,0],[0,1],[-1,0],[0,-1]])c.quadraticCurveTo(x+(a+b)*r*.15,y+(b-a)*r*.15,x+a*r,y+b*r);c.fill();c.stroke()}
export default(c,t,i)=>{
const n=12
for(let k=0;k<n;k++){const g=(i-k+n)%n,a=-PI/2+k*T/n;c.fillStyle=DOT[min(g,3)],c.lineWidth=4,c.beginPath(),c.arc(128+104*cos(a),122+104*sin(a),g<3?12-g*1.5:7,0,T),c.fill(),c.stroke()}
const sp=a=>{c.lineWidth=3.5;for(const[x,y,o,f]of a){c.fillStyle=f;const s=sin(T*((t+o)%1));if(s>0)spark(c,x,y,19*s)}}
sp([[28,30,0,'#fff'],[228,32,.5,'#ffe066']])
c.lineWidth=6;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,96,206,150);c.lineTo(212,250);c.lineTo(44,250);c.lineTo(50,150);c.bezierCurveTo(44,96,58,34,128,34);c.fill();c.stroke()
c.fillStyle='#fff';c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(62,198,54,250);c.lineTo(202,250);c.quadraticCurveTo(194,198,156,190);c.closePath();c.fill();c.stroke()
ds(c,16,8,RED,()=>{c.moveTo(102,192);c.lineTo(128,236);c.lineTo(154,192)})
c.lineWidth=5;c.beginPath();c.moveTo(94,194);c.lineTo(132,250);c.moveTo(162,194);c.lineTo(128,240);c.stroke()
c.fillStyle=SKIN;c.beginPath();c.moveTo(116,168);c.lineTo(116,192);c.quadraticCurveTo(128,204,140,192);c.lineTo(140,168);c.fill();c.beginPath();c.moveTo(116,168);c.lineTo(116,190);c.moveTo(140,168);c.lineTo(140,190);c.stroke()
c.lineWidth=6;c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
c.lineWidth=5.5;c.beginPath();c.moveTo(90,130);c.lineTo(113,140);c.lineTo(90,150);c.moveTo(166,130);c.lineTo(143,140);c.lineTo(166,150);c.stroke()
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*42,160,14,7,0,0,T),c.fill()
c.lineWidth=2.5;for(const d of[-1,1])for(const k of[-6,-1,4])c.beginPath(),c.moveTo(128+d*42+k-2,164),c.lineTo(128+d*42+k+2,156),c.stroke()
c.lineWidth=3.5;c.beginPath();c.moveTo(120,170);for(let k=1;k<=5;k++)c.lineTo(120+k*3.2,k%2?173:169);c.stroke()
c.lineWidth=6;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,206);c.lineTo(68,150)
c.bezierCurveTo(52,74,88,36,128,36);c.bezierCurveTo(168,36,204,74,188,150);c.lineTo(192,206);c.quadraticCurveTo(182,200,176,206)
c.quadraticCurveTo(180,124,176,104);c.quadraticCurveTo(168,104,162,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
c.quadraticCurveTo(130,96,122,90);c.quadraticCurveTo(116,102,108,108);c.quadraticCurveTo(104,96,94,94);c.quadraticCurveTo(88,104,82,108)
c.quadraticCurveTo(76,124,80,206);c.quadraticCurveTo(72,200,64,206);c.closePath();c.fill();c.stroke()
c.strokeStyle=HL;c.lineWidth=5;for(const[a,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke()
c.strokeStyle='#111';c.fillStyle=RED;c.lineWidth=5
for(const d of[-1,1])c.beginPath(),c.moveTo(168,62),c.quadraticCurveTo(168+d*10,38-d*6,168+d*28,48+d*4),c.quadraticCurveTo(168+d*24,70,168,62),c.fill(),c.stroke()
c.beginPath();c.arc(168,62,6,0,T);c.fill();c.stroke()
c.fillStyle=SW;c.lineWidth=4;const sy=104+3*sin(T*t);c.beginPath();c.moveTo(62,sy-12);c.quadraticCurveTo(70,sy,62,sy+6);c.quadraticCurveTo(54,sy,62,sy-12);c.fill();c.stroke()
for(const d of[-1,1])ds(c,34,23,'#fff',()=>{c.moveTo(128+d*82,256);c.lineTo(128+d*22,238)})
c.lineWidth=5;c.fillStyle=SKIN
for(const d of[-1,1]){c.beginPath();c.moveTo(128,166);c.bezierCurveTo(128+d*22,176,128+d*22,208,128+d*18,236);c.lineTo(128,236);c.closePath();c.fill();c.stroke()}
c.lineWidth=3;for(const d of[-1,1])for(const y of[188,200])c.beginPath(),c.moveTo(128+d*19,y),c.quadraticCurveTo(128+d*14,y-1,128+d*11,y-5),c.stroke()
c.lineWidth=4;c.beginPath();c.ellipse(133,220,5,12,.3,0,T);c.fill();c.stroke()
}
gen/uianime/loading/push.js
+47
View File
@@ -0,0 +1,47 @@
// blue-haired girl in a hard hat and overalls straining with gritted teeth to shove a long heavy progress bar along the ground, its striped fill crawling, sweat flying
const{sin,cos,PI,min,max,round}=Math,T=2*PI
export const frames=12,delay=90
const SKIN='#ffe3d1',HAIR='#5c7cfa',HD='#3b5bdb',HL='#dbe4ff',HAT='#ffd43b',HTD='#f59f00',OV='#ff922b',OD='#e8590c',SHOE='#845ef7',BLK='#fff',FILL='#69db7c',FD='#2f9e44',BL='#ffa8a8',SW='#a5d8ff'
const dbl=(c,w,col,pts)=>{for(const[lw,s]of[[w,'#111'],[w-9,col]]){c.lineWidth=lw;c.strokeStyle=s;c.beginPath();c.moveTo(...pts[0]);for(const p of pts.slice(1))c.lineTo(...p);c.stroke()}c.strokeStyle='#111'}
export default(c,t,i)=>{
const j=i%2
for(const[w,st]of[[7,'#111'],[2.5,'#fff']])c.lineWidth=w,c.strokeStyle=st,c.beginPath(),c.moveTo(8,242),c.lineTo(248,242),c.stroke()
c.strokeStyle='#111'
c.lineWidth=6;c.fillStyle='#ced4da';c.beginPath();c.roundRect(92,186,154,52,26);c.fill();c.stroke()
c.fillStyle='#fff';c.beginPath();c.roundRect(92,178,154,52,26);c.fill();c.stroke()
c.save();c.beginPath();c.roundRect(104,190,130,28,14);c.clip();c.fillStyle='#e9ecef';c.fillRect(0,0,256,256);c.fillStyle=FILL;c.fillRect(100,186,82,36)
c.fillStyle=FD;const so=18*((t*2)%1);for(let k=-1;k<6;k++)c.beginPath(),c.moveTo(86+k*18+so,220),c.lineTo(96+k*18+so,220),c.lineTo(112+k*18+so,188),c.lineTo(102+k*18+so,188),c.closePath(),c.fill()
c.fillStyle='#e9ecef';c.fillRect(182,186,60,36);c.restore()
c.lineWidth=4.5;c.beginPath();c.moveTo(182,191);c.lineTo(182,217);c.stroke();c.beginPath();c.roundRect(104,190,130,28,14);c.stroke()
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(118,196);c.lineTo(150,196);c.stroke()
for(const[l,s]of[[7,'#111'],[2.5,'#fff']]){c.lineWidth=l;c.strokeStyle=s;c.beginPath();for(const k of[0,1,2])c.moveTo(214+k*12,170-k*3),c.lineTo(220+k*12,154-k*3);c.stroke()}
c.strokeStyle='#111'
const sh=[80,164],hip=[48,198]
dbl(c,20,SKIN,[hip,[34,216],[24,232]]);c.fillStyle=SHOE;c.lineWidth=5;c.beginPath();c.ellipse(22,236,12,7,-.2,0,T);c.fill();c.stroke()
dbl(c,19,'#fff',[[sh[0]-2,sh[1]+4],[86,190],[96,200]]);c.lineWidth=5;c.fillStyle=SKIN;c.beginPath();c.ellipse(98,199,7,10,0,0,T);c.fill();c.stroke()
c.save();c.translate(...hip);c.rotate(.75);c.lineWidth=6;c.fillStyle=OV;c.beginPath();c.roundRect(-18,-50,36,58,12);c.fill();c.stroke()
c.fillStyle='#fff';c.beginPath();c.moveTo(-14,-48);c.lineTo(14,-48);c.lineTo(9,-34);c.lineTo(-9,-34);c.closePath();c.fill();c.stroke()
c.fillStyle=OD;c.lineWidth=4;c.beginPath();c.roundRect(-8,-26,16,12,3);c.fill();c.stroke();c.restore()
dbl(c,22,OV,[hip,[76,212],[70,232]]);c.fillStyle=SHOE;c.lineWidth=5;c.beginPath();c.ellipse(78,236,13,7,0,0,T);c.fill();c.stroke()
c.save();c.translate(94,104);c.rotate(.12);c.scale(.9,.9)
c.lineWidth=7;c.fillStyle=HAIR;c.beginPath();c.moveTo(-40,-30);c.bezierCurveTo(-64,-40,-82,-20,-86,6+3*j);c.quadraticCurveTo(-72,0,-66,6);c.quadraticCurveTo(-76,20,-72,34+3*j);c.quadraticCurveTo(-60,16,-44,6);c.closePath();c.fill();c.stroke()
c.fillStyle=HD;c.beginPath();c.moveTo(10,-62);c.bezierCurveTo(-40,-66,-62,-40,-58,0);c.quadraticCurveTo(-54,40,-30,52);c.lineTo(20,40);c.closePath();c.fill();c.stroke()
c.fillStyle=SKIN;c.beginPath();c.moveTo(-42,-6);c.bezierCurveTo(-42,40,-4,60,22,60);c.bezierCurveTo(44,58,58,30,58,-6);c.bezierCurveTo(58,-60,-42,-60,-42,-6);c.fill();c.stroke()
c.lineWidth=6;c.beginPath();c.moveTo(-6,0);c.lineTo(12,10);c.lineTo(-6,20);c.moveTo(50,2);c.lineTo(34,11);c.lineTo(50,20);c.stroke()
c.fillStyle=BL;c.beginPath();c.ellipse(-18,32,11,5.5,0,0,T);c.fill()
c.lineWidth=2.5;for(const k of[-5,0,5])c.beginPath(),c.moveTo(-18+k-2,35),c.lineTo(-18+k+2,29),c.stroke()
c.fillStyle='#fff';c.lineWidth=4;c.beginPath();c.roundRect(10,30,34,16,6);c.fill();c.stroke()
c.lineWidth=3;c.beginPath();c.moveTo(11,38);c.lineTo(43,38);for(const x of[19,27,35])c.moveTo(x,31),c.lineTo(x,45);c.stroke()
c.lineWidth=7;c.fillStyle=HAIR;c.beginPath();c.moveTo(-46,12)
c.bezierCurveTo(-56,-40,-26,-62,10,-62);c.bezierCurveTo(46,-62,68,-40,62,-8)
c.lineTo(54,-12);c.lineTo(50,-4);c.lineTo(40,-16);c.lineTo(32,-6);c.lineTo(22,-18);c.lineTo(14,-8);c.lineTo(4,-20);c.lineTo(-6,-8)
c.lineTo(-16,-20);c.lineTo(-24,-6);c.lineTo(-32,-14);c.lineTo(-38,4);c.closePath();c.fill();c.stroke()
c.fillStyle=HAT;c.beginPath();c.moveTo(-54,-22);c.bezierCurveTo(-56,-86,70,-90,66,-22);c.closePath();c.fill();c.stroke()
c.fillStyle=HTD;c.beginPath();c.roundRect(-60,-30,138,13,6);c.fill();c.stroke()
c.beginPath();c.moveTo(0,-74);c.quadraticCurveTo(6,-50,4,-30);c.lineTo(18,-30);c.quadraticCurveTo(20,-50,14,-76);c.fill();c.stroke()
c.strokeStyle='#fff';c.lineWidth=6;c.beginPath();c.arc(4,-30,40,PI*1.18,PI*1.36);c.stroke();c.strokeStyle='#111'
c.restore()
dbl(c,20,'#fff',[[sh[0]+2,sh[1]+4],[90,206],[96,218]]);c.lineWidth=5;c.fillStyle=SKIN;c.beginPath();c.ellipse(98,218,7,10,0,0,T);c.fill();c.stroke()
for(const o of[0,.5]){const p=(t*2+o)%1,x=30-18*p,y=62-24*p+40*p*p,sc=1-p*.4;c.fillStyle=SW;c.lineWidth=4;c.save();c.translate(x,y);c.rotate(-1.1+p);c.scale(sc,sc);c.beginPath();c.moveTo(0,-11);c.quadraticCurveTo(9,2,0,7);c.quadraticCurveTo(-9,2,0,-11);c.fill();c.stroke();c.restore()}
for(const o of[0,.5]){const p=(t*2+o)%1,x=18+20*(1-p),r=3+7*p;c.fillStyle='#fff';c.lineWidth=4.5;c.beginPath();c.arc(x,226-6*p,r,0,T);c.fill();c.stroke()}
}
gen/uianime/loading/run.js
+57
View File
@@ -0,0 +1,57 @@
// chibi girl with a red ponytail and sweatband sprinting in place on a striped progress bar that rolls under her feet like a treadmill
const{sin,cos,PI,max,min,sqrt,round,abs}=Math,T=2*PI
export const frames=12,delay=60
const SKIN='#ffe3d1',HAIR='#ff6b6b',HD='#e03131',HL='#ffc9c9',EYE='#20c997',ED='#087f5b',TEE='#fff',SHO='#4dabf7',SHD='#1c7ed6',SHOE='#f783ac',BAR='#e7f5ff',ST='#69db7c',SD='#40c057',BL='#ffa8a8',SW='#a5d8ff',Z=.8
const knee=(hx,hy,fx,fy,l)=>{let vx=fx-hx,vy=fy-hy,d=sqrt(vx*vx+vy*vy);if(d>2*l-.5){const k=(2*l-.5)/d;vx*=k;vy*=k;d=2*l-.5}const h=sqrt(l*l-d*d/4);return[hx+vx/2+vy/d*h,hy+vy/2-vx/d*h,hx+vx,hy+vy]}
const dbl=(c,w,col,pts)=>{for(const[lw,s]of[[w,'#111'],[w-9,col]]){c.lineWidth=lw;c.strokeStyle=s;c.beginPath();c.moveTo(...pts[0]);for(const p of pts.slice(1))c.lineTo(...p);c.stroke()}c.strokeStyle='#111'}
export default(c,t)=>{
const a=t*T,b=round(-6*abs(sin(a))),fl=k=>5*sin(2*a+k)
c.lineWidth=6;c.fillStyle=BAR;c.beginPath();c.roundRect(12,200,232,44,22);c.fill();c.stroke()
c.save();c.beginPath();c.roundRect(22,209,212,26,13);c.clip();c.fillStyle=ST;c.fillRect(0,0,256,256)
c.fillStyle=SD;const o=-(t*2%1)*28;for(let x=o;x<260;x+=28)c.beginPath(),c.moveTo(x,236),c.lineTo(x+14,236),c.lineTo(x+28,208),c.lineTo(x+14,208),c.closePath(),c.fill()
c.restore();c.lineWidth=4;c.beginPath();c.roundRect(22,209,212,26,13);c.stroke()
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(34,215);c.lineTo(70,215);c.stroke();c.strokeStyle='#111'
for(const[y,o,l]of[[70,0,40],[112,.5,56],[150,.25,34]]){const p=(t*2+o)%1,x=46-50*p,w=l*min(1,(1-p)*2.5);if(w>4)dbl(c,13,'#fff',[[x,y],[x-w,y]])}
c.save();c.translate(128,200);c.scale(Z,Z);c.translate(-118,-238)
const hip=[118,192+b],sh=[122,150+b]
const leg=(ph,front)=>{const s=sin(a+ph),cc=cos(a+ph),[kx,ky,fx,fy]=knee(hip[0],hip[1],hip[0]+34*s,236-26*max(0,cc),28)
dbl(c,22,SKIN,[hip,[kx,ky],[fx,fy-4]]);dbl(c,21,'#fff',[[fx+(kx-fx)*.2,fy+(ky-fy)*.2],[fx,fy-5]])
c.fillStyle=front?SHOE:'#e64980';c.lineWidth=5;c.beginPath();c.ellipse(fx+6,fy-3,14,8,s*.25,0,T);c.fill();c.stroke()}
const arm=ph=>{const al=-1*sin(a+ph),ex=sh[0]+22*sin(al),ey=sh[1]+22*cos(al),hx=ex+20*sin(al+1.8),hy=ey+20*cos(al+1.8)
dbl(c,22,SKIN,[[sh[0],sh[1]+6],[ex,ey],[hx,hy]]);dbl(c,24,TEE,[sh,[sh[0]+8*sin(al),sh[1]+8*cos(al)+4]])
c.lineWidth=5;c.fillStyle=SKIN;c.beginPath();c.arc(hx,hy,9,0,T);c.fill();c.stroke()}
leg(PI,0);arm(PI)
c.save();c.translate(132,80+b);c.scale(1.02,1.02)
c.lineWidth=6;c.fillStyle=HAIR;c.beginPath();c.moveTo(-26,-50);c.bezierCurveTo(-70,-70,-96,-40,-112,-16+fl(0));c.quadraticCurveTo(-96,-24,-88,-20);c.quadraticCurveTo(-100,-4,-106,14+fl(1));c.quadraticCurveTo(-76,0,-52,-16);c.closePath();c.fill();c.stroke()
c.strokeStyle=HL;c.lineWidth=4;c.beginPath();c.moveTo(-44,-50);c.quadraticCurveTo(-70,-54,-90,-34+fl(0)*.6);c.stroke();c.strokeStyle='#111'
c.fillStyle=HD;c.lineWidth=6;c.beginPath();c.moveTo(10,-62);c.bezierCurveTo(-40,-66,-62,-40,-58,0);c.quadraticCurveTo(-54,40,-30,52);c.lineTo(20,40);c.closePath();c.fill();c.stroke()
c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(-30,-48,9,0,T);c.fill();c.stroke()
c.restore()
c.lineWidth=6;c.fillStyle=SHO;c.beginPath();c.moveTo(98,174+b);c.lineTo(146,174+b);c.lineTo(150,200+b);c.lineTo(122,204+b);c.lineTo(94,200+b);c.closePath();c.fill();c.stroke()
c.strokeStyle='#fff';c.lineWidth=3.5;c.beginPath();c.moveTo(99,190+b);c.lineTo(147,190+b);c.stroke();c.strokeStyle='#111'
c.fillStyle=TEE;c.beginPath();c.moveTo(102,140+b);c.quadraticCurveTo(92,160,96,180+b);c.lineTo(148,180+b);c.quadraticCurveTo(152,158,144,140+b);c.closePath();c.fill();c.stroke()
c.fillStyle=SHD;c.lineWidth=4;c.beginPath();c.moveTo(116,152+b);c.lineTo(122,146+b);c.lineTo(128,152+b);c.lineTo(134,146+b);c.stroke()
leg(0,1)
c.save();c.translate(132,80+b);c.scale(1.02,1.02)
c.lineWidth=6;c.fillStyle=SKIN;c.beginPath();c.moveTo(-6,46);c.lineTo(-6,62);c.lineTo(10,62);c.lineTo(10,46);c.fill()
c.beginPath();c.moveTo(-42,-6);c.bezierCurveTo(-42,40,-4,60,22,60);c.bezierCurveTo(44,58,58,30,58,-6);c.bezierCurveTo(58,-60,-42,-60,-42,-6);c.fill();c.stroke()
for(const[x,rx]of[[4,12],[42,9]]){
c.fillStyle='#fff';c.beginPath();c.ellipse(x,10,rx,15,0,0,T);c.fill()
c.save();c.beginPath();c.ellipse(x,10,rx,15,0,0,T);c.clip();c.beginPath();c.ellipse(x+rx*.3,12,rx*.8,13,0,0,T);c.fillStyle=EYE;c.fill();c.lineWidth=2.5;c.stroke();c.fillStyle=ED;c.beginPath();c.ellipse(x+2,4,rx,8,0,0,T);c.fill()
c.fillStyle='#111';c.beginPath();c.ellipse(x+rx*.35,13,rx*.38,6,0,0,T);c.fill();c.fillStyle='#fff';c.beginPath();c.arc(x-1,6,3.5,0,T);c.fill();c.restore()
c.lineWidth=5.5;c.beginPath();c.moveTo(x-rx-2,-2);c.quadraticCurveTo(x,-10,x+rx+2,-2);c.stroke()
}
c.fillStyle=BL;c.beginPath();c.ellipse(-16,32,10,5,0,0,T);c.fill()
c.fillStyle='#c92a2a';c.lineWidth=3.5;c.beginPath();c.moveTo(22,38);c.quadraticCurveTo(30,36,36,40);c.quadraticCurveTo(32,52,24,48);c.closePath();c.fill();c.stroke()
c.lineWidth=6;c.fillStyle=HAIR;c.beginPath();c.moveTo(-46,14)
c.bezierCurveTo(-56,-40,-26,-66,10,-66);c.bezierCurveTo(46,-66,68,-40,62,-4)
c.lineTo(54,-10);c.lineTo(52,-2);c.lineTo(42,-14);c.lineTo(36,-4);c.lineTo(26,-18);c.lineTo(18,-6);c.lineTo(8,-20);c.lineTo(-2,-8)
c.lineTo(-12,-20);c.lineTo(-22,-6);c.lineTo(-30,-14);c.lineTo(-36,4);c.closePath();c.fill();c.stroke()
c.strokeStyle=HL;c.lineWidth=5;for(const[s,e]of[[1.2,1.32],[1.4,1.48],[1.58,1.7]])c.beginPath(),c.arc(10,-12,46,PI*s,PI*e),c.stroke()
c.strokeStyle='#111';c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.moveTo(-50,-30);c.quadraticCurveTo(10,-56,66,-26);c.lineTo(64,-14);c.quadraticCurveTo(10,-44,-50,-18);c.closePath();c.fill();c.stroke()
c.fillStyle=HAIR;c.beginPath();c.roundRect(20,-42,12,11,3);c.fill();c.stroke()
const p=(t*2)%1;c.fillStyle=SW;c.lineWidth=3.5;c.save();c.translate(-54-30*p,-36-16*p);c.rotate(-.9);c.scale(1-p*.5,1-p*.5);c.beginPath();c.moveTo(0,-10);c.quadraticCurveTo(8,2,0,6);c.quadraticCurveTo(-8,2,0,-10);c.fill();c.stroke();c.restore()
c.restore()
arm(0)
c.restore()
}
gen/uianime/loading/sleepy.js
+32
View File
@@ -0,0 +1,32 @@
// sleepy lavender bedhead girl in pajamas dozing off while she waits, head nodding, a nose bubble swelling and shrinking, a loading spinner turning above her head
const{sin,cos,PI}=Math,T=2*PI
export const frames=16,delay=90
const SKIN='#ffe3d1',HAIR='#b197fc',HD='#7950f2',HL='#e5dbff',PJ='#96f2d7',PD='#20c997',MASK='#f783ac',BL='#ffa8a8',BUB='#d0ebff',SP=['#7950f2','#845ef7','#9775fa','#b197fc','#d0bfff','#e5dbff','#f3f0ff','#fff'],Z=.8
export default(c,t,i)=>{
const nod=.07+.05*Math.round(2*sin(T*t))/2,r=5+12*(1-cos(T*t))/2
for(let k=0;k<8;k++){const a=(i-k)*T/8;c.fillStyle=SP[k];c.lineWidth=4.5;c.beginPath();c.arc(128+24*sin(a),34-24*cos(a),8.5-k*.6,0,T);c.fill();c.stroke()}
c.save();c.translate(128,252);c.scale(Z,Z);c.translate(-128,-252)
const head=f=>{c.save();c.translate(128,186);c.rotate(nod);c.translate(0,8*nod);c.translate(-128,-186);f();c.restore()}
head(()=>{c.lineWidth=7;c.fillStyle=HD;c.beginPath();c.moveTo(128,40);c.bezierCurveTo(200,40,212,100,204,160);c.quadraticCurveTo(212,182,196,190);c.lineTo(60,190);c.quadraticCurveTo(44,182,52,160);c.bezierCurveTo(44,100,56,40,128,40);c.fill();c.stroke()})
c.lineWidth=7;c.fillStyle=PJ;c.beginPath();c.moveTo(100,194);c.quadraticCurveTo(60,202,52,252);c.lineTo(204,252);c.quadraticCurveTo(196,202,156,194);c.closePath();c.fill();c.stroke()
c.fillStyle=SKIN;c.beginPath();c.moveTo(116,170);c.lineTo(116,198);c.lineTo(128,212);c.lineTo(140,198);c.lineTo(140,170);c.fill();c.lineWidth=6;c.beginPath();c.moveTo(116,170);c.lineTo(116,196);c.moveTo(140,170);c.lineTo(140,196);c.stroke()
c.fillStyle='#fff';c.lineWidth=6;for(const d of[-1,1])c.beginPath(),c.moveTo(128,214),c.lineTo(128+d*30,194),c.lineTo(128+d*36,214),c.closePath(),c.fill(),c.stroke()
c.strokeStyle=PD;c.lineWidth=4;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*8,216),c.lineTo(128+d*28,197),c.stroke();c.strokeStyle='#111'
c.fillStyle='#ffd43b';c.lineWidth=5;for(const y of[228,246])c.beginPath(),c.arc(128,y,5,0,T),c.fill(),c.stroke()
head(()=>{
c.lineWidth=7;c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
c.lineWidth=6;for(const x of[103,153]){c.beginPath();c.arc(x,138,13,PI*.15,PI*.85);c.stroke();c.beginPath();c.moveTo(x+(x<128?-12:12),142);c.lineTo(x+(x<128?-18:18),139);c.stroke()}
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*42,162,13,6.5,0,0,T),c.fill()
c.lineWidth=4;c.fillStyle='#c92a2a';c.beginPath();c.ellipse(132,174,5,4.5,0,0,T);c.fill();c.stroke()
c.fillStyle=BUB;c.lineWidth=4;c.beginPath();c.arc(124-r*.85,157+r*.45,r,0,T);c.fill();c.stroke()
c.strokeStyle='#fff';c.lineWidth=3.5;c.beginPath();c.arc(124-r*.85,157+r*.45,r*.6,PI*1.15,PI*1.5);c.stroke();c.strokeStyle='#111'
c.lineWidth=7;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,160)
c.bezierCurveTo(46,76,88,38,128,38);c.bezierCurveTo(168,38,210,76,192,160)
c.lineTo(182,150);c.quadraticCurveTo(186,124,178,106);c.lineTo(168,116);c.lineTo(162,96);c.lineTo(150,112);c.lineTo(140,90);c.lineTo(130,110)
c.lineTo(118,92);c.lineTo(108,112);c.lineTo(96,96);c.lineTo(88,114);c.lineTo(80,106);c.quadraticCurveTo(70,130,74,150);c.closePath();c.fill();c.stroke()
c.beginPath();c.moveTo(122,40);c.bezierCurveTo(112,12,82,14,74,34);c.quadraticCurveTo(100,22,134,40);c.fill();c.stroke()
c.strokeStyle=HL;c.lineWidth=6;for(const[a,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,106,56,PI*a,PI*e),c.stroke()
c.strokeStyle='#111';c.fillStyle='#ffd43b';c.lineWidth=5;c.save();c.translate(176,84);c.rotate(.3);c.beginPath();for(let k=0;k<10;k++){const rr=k%2?6:14,b=k*PI/5-PI/2;c.lineTo(cos(b)*rr,sin(b)*rr)}c.closePath();c.fill();c.stroke();c.restore()
})
c.restore()
}
gen/uianime/loading/tea.js
+41
View File
@@ -0,0 +1,41 @@
// calm sky-blue haired girl in a cardigan sipping from a steaming teacup with her eyes closed while loading dots bounce in a little thought cloud
const{sin,cos,PI,max,min}=Math,T=2*PI
export const frames=16,delay=90
const SKIN='#ffe3d1',HAIR='#74c0fc',HD='#339af0',HL='#e7f5ff',CAR='#ffec99',CD='#fcc419',CUP='#fcc2d7',CPD='#f06595',TEA='#c77c3a',BL='#ffa8a8',RB='#b197fc',DOT=['#ff8787','#ffd43b','#69db7c'],Z=.88
const ease=x=>x<=0?0:x>=1?1:x*x*(3-2*x)
export default(c,t)=>{
const u=ease((t-.1)/.12)-ease((t-.46)/.12),cx=124-6*u,cy=218-26*u,ca=-.4*u
c.fillStyle='#fff';c.lineWidth=5;c.beginPath();for(const[x,y,r]of[[206,40,22],[228,46,16],[184,48,16],[208,58,16]])c.moveTo(x+r,y),c.arc(x,y,r,0,T);c.stroke();c.fill()
c.beginPath();c.arc(170,82,6,0,T);c.stroke();c.fill();c.beginPath();c.arc(160,96,4,0,T);c.stroke();c.fill()
for(let k=0;k<3;k++){const h=max(0,sin(T*(t*2-k*.15)));c.fillStyle=DOT[k];c.lineWidth=4;c.beginPath();c.arc(190+k*16,50-9*h,6,0,T);c.fill();c.stroke()}
c.save();c.translate(112,258);c.scale(Z,Z);c.translate(-128,-258)
c.lineWidth=7;c.fillStyle=HD;c.beginPath();c.moveTo(128,36);c.bezierCurveTo(200,36,214,110,210,258);c.lineTo(46,258);c.bezierCurveTo(42,110,56,36,128,36);c.fill();c.stroke()
c.fillStyle=CAR;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(60,198,52,258);c.lineTo(204,258);c.quadraticCurveTo(196,198,156,190);c.closePath();c.fill();c.stroke()
c.fillStyle='#fff';c.beginPath();c.moveTo(108,190);c.lineTo(128,240);c.lineTo(148,190);c.closePath();c.fill();c.lineWidth=6;c.stroke()
c.fillStyle=SKIN;c.beginPath();c.moveTo(116,168);c.lineTo(116,194);c.lineTo(128,206);c.lineTo(140,194);c.lineTo(140,168);c.fill();c.beginPath();c.moveTo(116,168);c.lineTo(116,192);c.moveTo(140,168);c.lineTo(140,192);c.stroke()
c.fillStyle=RB;c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.moveTo(128,212),c.lineTo(128+d*16,203),c.lineTo(128+d*14,222),c.closePath(),c.fill(),c.stroke()
c.lineWidth=7;c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
c.lineWidth=7;for(const x of[103,153])c.beginPath(),c.arc(x,146,13,PI*1.15,PI*1.85),c.stroke()
c.lineWidth=5;for(const[x,d]of[[103,-1],[153,1]])c.beginPath(),c.moveTo(x+d*12,140),c.lineTo(x+d*18,136),c.stroke()
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*42,162,14,7,0,0,T),c.fill()
c.lineWidth=3;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*42+k-2,166),c.lineTo(128+d*42+k+2,158),c.stroke()
c.lineWidth=4.5;c.beginPath();c.moveTo(118,168);c.quadraticCurveTo(123,174,128,169);c.quadraticCurveTo(133,174,138,168);c.stroke()
c.lineWidth=7;c.fillStyle=HAIR;c.beginPath();c.moveTo(60,200);c.bezierCurveTo(44,76,86,36,128,36);c.bezierCurveTo(170,36,212,76,196,200)
c.lineTo(182,200);c.quadraticCurveTo(186,140,178,106);c.quadraticCurveTo(168,106,162,114);c.quadraticCurveTo(156,98,146,92);c.quadraticCurveTo(140,104,132,110)
c.quadraticCurveTo(126,96,116,92);c.quadraticCurveTo(110,104,102,110);c.quadraticCurveTo(96,98,88,98);c.quadraticCurveTo(84,106,80,106)
c.quadraticCurveTo(70,140,74,200);c.closePath();c.fill();c.stroke()
c.strokeStyle=HL;c.lineWidth=6;for(const[a,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke()
c.strokeStyle='#111';c.fillStyle=RB;c.lineWidth=6;c.beginPath();c.moveTo(80,64);c.quadraticCurveTo(128,36,176,64);c.lineTo(174,76);c.quadraticCurveTo(128,50,82,76);c.closePath();c.fill();c.stroke()
c.restore()
for(const o of[0,.5]){const p=(t*2+o)%1,x=cx+14+8*sin(T*p+o*9)+30*p,y=cy-26-60*p;if(p>.05&&p<.95)for(const[w,s]of[[11,'#111'],[5,'#fff']]){c.lineWidth=w*(1-p*.4);c.strokeStyle=s;c.beginPath();c.moveTo(x,y+14);c.bezierCurveTo(x-10,y+6,x+10,y-2,x,y-12);c.stroke()}}
c.strokeStyle='#111'
c.save();c.translate(cx,cy);c.rotate(ca)
c.lineWidth=5;c.fillStyle=CUP;c.beginPath();c.arc(30,0,10,-PI/2,PI/2);c.stroke()
c.lineWidth=6;c.beginPath();c.moveTo(-28,-16);c.lineTo(28,-16);c.quadraticCurveTo(28,22,0,22);c.quadraticCurveTo(-28,22,-28,-16);c.fill();c.stroke()
c.fillStyle=TEA;c.lineWidth=4;c.beginPath();c.ellipse(0,-16,28,6,0,0,T);c.fill();c.stroke()
c.fillStyle=CPD;c.lineWidth=3.5;c.beginPath();c.moveTo(0,10);c.bezierCurveTo(-10,2,-6,-6,0,-1);c.bezierCurveTo(6,-6,10,2,0,10);c.fill();c.stroke()
c.restore()
c.fillStyle=SKIN;c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.ellipse(cx+d*26,cy+10+d*6*u,11,13,0,0,T),c.fill(),c.stroke()
for(const d of[-1,1])for(const[l,s]of[[26,'#111'],[16,CAR]])c.lineWidth=l,c.strokeStyle=s,c.beginPath(),c.moveTo(cx+d*46,262),c.lineTo(cx+d*28,cy+22+d*6*u),c.stroke()
c.strokeStyle='#111'
}
gen/uianime/loading/wait.js
+61
View File
@@ -0,0 +1,61 @@
// impatient office girl with a brown bun tapping her foot and glaring at her ticking wristwatch, then letting out a long sigh
const{sin,PI,max,min}=Math,T=2*PI
export const frames=16,delay=90
const SKIN='#ffe3d1',HAIR='#a9744f',HD='#7f5539',HL='#e6c9a8',EYE='#e8590c',ED='#a33c08',BZ='#748ffc',BD='#4c6ef5',SK='#364fc7',SHOE='#495057',BAND='#ff8787',BL='#ffa8a8',Z=.66
const ease=x=>x<=0?0:x>=1?1:x*x*(3-2*x)
const eye=(c,x,y,d)=>{
c.fillStyle='#fff';c.beginPath();c.ellipse(x,y,14,17,0,0,T);c.fill()
c.save();c.beginPath();c.ellipse(x,y,14,17,0,0,T);c.clip();c.beginPath();c.ellipse(x+5,y+5,11.5,15,0,0,T);c.fillStyle=EYE;c.fill();c.lineWidth=3;c.stroke()
c.fillStyle='#111';c.beginPath();c.ellipse(x+6,y+7,5.5,7.5,0,0,T);c.fill()
c.fillStyle='#fff';c.beginPath();c.arc(x+2,y+3,4,0,T);c.fill()
c.fillStyle=SKIN;c.fillRect(x-16,y-20,32,19);c.restore()
c.lineWidth=7;c.beginPath();c.moveTo(x-17,y-1);c.lineTo(x+16,y-1);c.lineTo(x+d*16+d*4,y-6);c.stroke()
}
export default(c,t,i)=>{
const sg=ease((t-.56)/.08)-ease((t-.9)/.08),tap=i<8?i%2:0,dr=3*sg
for(const[w,s]of[[15,'#111'],[8,SKIN]])for(const x of[118,138])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(x,206),c.lineTo(x,236),c.stroke()
c.strokeStyle='#111';c.lineWidth=5;c.fillStyle=SHOE;c.beginPath();c.ellipse(114,240,12,6.5,0,0,T);c.fill();c.stroke()
c.save();c.translate(132,244);c.rotate(-.6*tap);c.beginPath();c.ellipse(10,-4,12,6.5,0,0,T);c.fill();c.stroke();c.restore()
if(tap)for(const[w,s]of[[7,'#111'],[2.5,'#fff']]){c.lineWidth=w;c.strokeStyle=s;c.beginPath();c.moveTo(160,226);c.lineTo(170,220);c.moveTo(164,238);c.lineTo(176,238);c.stroke()}
c.strokeStyle='#111'
c.save();c.translate(0,dr)
c.lineWidth=6;c.fillStyle=SK;c.beginPath();c.moveTo(102,190);c.lineTo(154,190);c.lineTo(162,214);c.quadraticCurveTo(128,220,94,214);c.closePath();c.fill();c.stroke()
for(const[w,s]of[[22,'#111'],[13,BZ]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(102,148),c.lineTo(80,174),c.lineTo(98,192),c.stroke()
c.strokeStyle='#111';c.lineWidth=6;c.fillStyle=BZ;c.beginPath();c.moveTo(104,136);c.quadraticCurveTo(92,140,94,160);c.lineTo(96,198);c.lineTo(160,198);c.lineTo(162,160);c.quadraticCurveTo(164,140,152,136);c.closePath();c.fill();c.stroke()
c.fillStyle='#fff';c.beginPath();c.moveTo(112,136);c.lineTo(128,166);c.lineTo(144,136);c.closePath();c.fill();c.lineWidth=5;c.stroke()
c.fillStyle=BD;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*16,136),c.lineTo(128+d*8,158),c.lineTo(128+d*2,170),c.lineTo(128+d*24,150),c.closePath(),c.fill(),c.stroke()
c.fillStyle='#ffd43b';c.lineWidth=4;c.beginPath();c.arc(128,182,4,0,T);c.fill();c.stroke()
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(98,192,9,8,0,0,T);c.fill();c.stroke()
c.restore()
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.moveTo(121,126);c.lineTo(121,138);c.lineTo(128,146);c.lineTo(135,138);c.lineTo(135,126);c.fill();c.beginPath();c.moveTo(121,126);c.lineTo(121,137);c.moveTo(135,126);c.lineTo(135,137);c.stroke()
c.save();c.translate(128,32+dr*1.5);c.rotate(-.06*sg);c.scale(Z,Z);c.translate(-128,-36)
c.lineWidth=7;c.fillStyle=HD;c.beginPath();c.moveTo(128,36);c.bezierCurveTo(196,36,206,96,198,150);c.lineTo(58,150);c.bezierCurveTo(50,96,60,36,128,36);c.fill();c.stroke()
c.fillStyle=HAIR;c.beginPath();c.arc(128,26,20,0,T);c.fill();c.stroke()
c.strokeStyle=HL;c.lineWidth=6;c.beginPath();c.arc(128,26,12,PI*1.15,PI*1.5);c.stroke();c.strokeStyle='#111'
c.fillStyle=BAND;c.beginPath();c.roundRect(104,32,48,12,6);c.fill();c.stroke()
c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
if(sg>.5){c.lineWidth=7;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,140),c.quadraticCurveTo(x,150,x+15,140),c.stroke()}
else{eye(c,103,140,-1);eye(c,153,140,1)}
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,164,12,6,0,0,T),c.fill()
c.lineWidth=5;if(sg>.5){c.fillStyle='#c92a2a';c.beginPath();c.ellipse(128,172,7,6,0,0,T);c.fill();c.stroke()}else{c.beginPath();c.moveTo(118,172);c.quadraticCurveTo(128,166,138,172);c.stroke()}
c.lineWidth=7;c.fillStyle=HAIR;c.beginPath();c.moveTo(68,150)
c.bezierCurveTo(52,74,88,36,128,36);c.bezierCurveTo(168,36,204,74,188,150)
c.quadraticCurveTo(184,118,176,100);c.quadraticCurveTo(166,108,160,116);c.quadraticCurveTo(154,94,140,86);c.quadraticCurveTo(136,102,126,110)
c.quadraticCurveTo(116,92,100,88);c.quadraticCurveTo(96,104,88,112);c.quadraticCurveTo(82,104,80,102)
c.quadraticCurveTo(70,122,68,150);c.closePath();c.fill();c.stroke()
c.strokeStyle=HL;c.lineWidth=6;for(const[a,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke()
c.strokeStyle='#111';c.lineWidth=6;if(sg<.5)c.beginPath(),c.moveTo(88,112),c.lineTo(114,120),c.moveTo(142,120),c.lineTo(168,112),c.stroke()
if(sg<.5){c.strokeStyle='#ff6b6b';c.lineWidth=5;c.save();c.translate(178,72);for(const r of[0,1,2,3]){c.rotate(PI/2);c.beginPath();c.moveTo(4,4);c.quadraticCurveTo(5,12,14,12);c.stroke()}c.restore();c.strokeStyle='#111'}
c.restore()
if(sg>.05){const p=min(1,(t-.56)/.3),x=94-46*p,y=150-40*p,r=7+11*p;c.fillStyle='#fff';c.lineWidth=5;c.beginPath();for(const[dx,dy,k]of[[-r*.7,0,.8],[0,-r*.5,1],[r*.7,0,.8]])c.moveTo(x+dx+k*r,y+dy),c.arc(x+dx,y+dy,k*r,0,T);c.stroke();c.fill()
c.lineWidth=4;c.beginPath();c.moveTo(x+r*1.4,y+r*.6);c.quadraticCurveTo(x+r*1.9,y+r*.9,108,152);c.stroke()}
const wx=182,wy=150
for(const[w,s]of[[22,'#111'],[13,BZ]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(154,150+dr),c.lineTo(190,180+dr),c.lineTo(wx,wy+14),c.stroke()
c.strokeStyle='#111';c.lineWidth=5;c.fillStyle=SKIN;c.beginPath();c.ellipse(wx-1,wy-20,10,11,0,0,T);c.fill();c.stroke()
c.fillStyle=SKIN;c.beginPath();c.rect(wx-8,wy-12,16,22);c.fill();c.beginPath();c.moveTo(wx-8,wy-12);c.lineTo(wx-8,wy+10);c.moveTo(wx+8,wy-12);c.lineTo(wx+8,wy+10);c.stroke()
c.fillStyle=BAND;c.beginPath();c.roundRect(wx-10,wy-14,20,28,4);c.fill();c.stroke()
c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(wx,wy,15,0,T);c.fill();c.stroke()
c.lineWidth=3;c.beginPath();c.moveTo(wx,wy);c.lineTo(wx-6,wy-4);c.stroke()
const h=i*T/16;c.strokeStyle='#f03e3e';c.lineWidth=3;c.beginPath();c.moveTo(wx,wy);c.lineTo(wx+11*sin(h),wy-11*Math.cos(h));c.stroke();c.strokeStyle='#111'
c.fillStyle='#111';c.beginPath();c.arc(wx,wy,2.5,0,T);c.fill()
}