mirror of
https://github.com/direct-img/vibegif.direct-img.link.git
synced 2026-10-29 11:44:51 +00:00
Move the 50 new anime UI stickers into the uianime section on the main page, 750 total
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,65 @@
|
||||
// navy haired security guard girl in a peaked cap squinting at an ID badge she holds up, shaking her head, then a red X stamps down onto the badge
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#3b5bdb',HD='#2a3a96',HL='#bac8ff',EYE='#fcc419',ED='#e67700',SHT='#a5d8ff',CAP='#343a40',CL='#868e96',GD='#ffd43b',BL='#ffa8a8',HDR='#4dabf7',PH='#d0ebff',SIL='#adb5bd',RD='#fa5252',Z=.7
|
||||
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 eye=(c,x,y,d,g,h)=>{
|
||||
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+g,y+2,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+g,y-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+g,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+g-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+g+5,y+8,2,0,T);c.fill()
|
||||
c.fillStyle=SKIN;c.fillRect(x-20,y-24,40,7+h);c.restore()
|
||||
c.lineWidth=7;c.beginPath();c.moveTo(x-16,y-6+h*.7);c.quadraticCurveTo(x,y-20+h,x+16,y-6+h*.7);c.moveTo(x+d*15,y-7+h*.7);c.lineTo(x+d*21,y-12+h*.7);c.stroke()
|
||||
}
|
||||
const G={0:c=>{c.moveTo(7,0);c.ellipse(0,0,7,10,0,0,T)},1:c=>{c.moveTo(-4,-6);c.lineTo(1,-10);c.lineTo(1,10)},4:c=>{c.moveTo(4,10);c.lineTo(4,-10);c.lineTo(-7,4);c.lineTo(7,4)}}
|
||||
export default(c,t,i)=>{
|
||||
const sh=i>5&&i<10,st=i>9&&i<14,ins=!sh&&!st,r=sh?(i%2?-.1:.1):0,cx=64,cy=120+(i==10?6:i==11?2:0)+3*sin(T*t*2),ca=-.06+.04*sin(T*t)
|
||||
const H=f=>{c.save();c.translate(176,150);c.scale(Z,Z);c.translate(-128,-186);f();c.restore()}
|
||||
const R=f=>{c.save();c.translate(128+(ins?-6:0),186);c.rotate(r);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8
|
||||
R(()=>{c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,214,100,206,166);c.quadraticCurveTo(204,198,178,200);c.lineTo(78,200);c.quadraticCurveTo(52,198,50,166);c.bezierCurveTo(42,100,58,34,128,34);c.fill();c.stroke()})
|
||||
c.fillStyle=SHT;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,380);c.lineTo(216,380);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=HD;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*46,198),c.lineTo(128+d*74,206),c.lineTo(128+d*80,222),c.lineTo(128+d*50,214),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle=HD;c.beginPath();c.moveTo(121,204);c.lineTo(135,204);c.lineTo(140,262);c.lineTo(128,276);c.lineTo(116,262);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SHT;for(const d of[-1,1])c.beginPath(),c.moveTo(128,208),c.lineTo(128+d*28,186),c.lineTo(128+d*36,222),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=GD;c.lineWidth=6;c.beginPath();c.moveTo(176,236);c.lineTo(190,242);c.quadraticCurveTo(190,262,176,270);c.quadraticCurveTo(162,262,162,242);c.closePath();c.fill();c.stroke()
|
||||
R(()=>{
|
||||
c.lineWidth=8;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(sh){c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,128),c.lineTo(128+d*18,140),c.lineTo(128+d*38,152),c.stroke()}
|
||||
else eye(c,103,140,-1,ins?-5:0,ins?12:3),eye(c,153,140,1,ins?-5:0,ins?12:3)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.beginPath();if(ins)c.moveTo(116,172),c.quadraticCurveTo(124,166,130,171),c.quadraticCurveTo(136,175,140,170);else c.arc(128,182,12,1.2*PI,1.8*PI);c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,160)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,190,160)
|
||||
c.quadraticCurveTo(186,124,180,104);c.lineTo(170,114);c.lineTo(162,100);c.lineTo(150,112);c.lineTo(140,98);c.lineTo(128,112)
|
||||
c.lineTo(116,98);c.lineTo(106,112);c.lineTo(94,100);c.lineTo(86,114);c.lineTo(76,104);c.quadraticCurveTo(70,124,66,160);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.12,1.2],[1.8,1.88]])c.beginPath(),c.arc(128,110,62,PI*s,PI*e),c.stroke();c.strokeStyle='#111'
|
||||
if(!ins){c.lineWidth=6;c.beginPath();c.moveTo(86,108);c.lineTo(114,118);c.moveTo(170,108);c.lineTo(142,118);c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=CAP;c.beginPath();c.moveTo(70,94);c.lineTo(46,52);c.quadraticCurveTo(128,-4,210,52);c.lineTo(186,94);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=CL;c.lineWidth=6;c.beginPath();c.moveTo(70,46);c.quadraticCurveTo(100,26,124,22);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle='#111';c.beginPath();c.moveTo(60,98);c.quadraticCurveTo(128,74,196,98);c.quadraticCurveTo(202,112,190,112);c.quadraticCurveTo(128,92,66,112);c.quadraticCurveTo(54,112,60,98);c.fill();c.stroke()
|
||||
c.strokeStyle='#495057';c.lineWidth=5;c.beginPath();c.moveTo(84,100);c.quadraticCurveTo(128,88,172,100);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=GD;c.lineWidth=6;c.beginPath();c.moveTo(128,34);c.lineTo(146,42);c.quadraticCurveTo(146,64,128,74);c.quadraticCurveTo(110,64,110,42);c.closePath();c.fill();c.stroke()
|
||||
})
|
||||
})
|
||||
c.save();c.translate(cx,cy);c.rotate(ca)
|
||||
c.lineWidth=6;c.fillStyle='#fff';c.beginPath();c.roundRect(-46,-62,92,124,12);c.fill()
|
||||
c.save();c.clip();c.fillStyle=HDR;c.fillRect(-50,-66,100,32);c.restore()
|
||||
c.beginPath();c.roundRect(-46,-62,92,124,12);c.stroke();c.lineWidth=5;c.beginPath();c.moveTo(-46,-34);c.lineTo(46,-34);c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=4;c.beginPath();c.roundRect(-13,-54,26,9,4.5);c.fill();c.stroke()
|
||||
c.fillStyle=PH;c.lineWidth=5;c.beginPath();c.roundRect(-26,-24,52,48,8);c.fill()
|
||||
c.save();c.clip();c.fillStyle=SIL;c.lineWidth=4;c.beginPath();c.ellipse(0,30,22,18,0,0,T);c.fill();c.stroke();c.beginPath();c.arc(0,-2,11,0,T);c.fill();c.stroke();c.restore()
|
||||
c.beginPath();c.roundRect(-26,-24,52,48,8);c.stroke()
|
||||
for(const[k,n]of[[-1,4],[0,0],[1,1]]){c.save();c.translate(k*20,44);c.scale(.8,.8);c.beginPath();G[n](c);c.restore();c.lineWidth=5.5;c.strokeStyle=HD;c.stroke()}
|
||||
c.strokeStyle='#111'
|
||||
if(st||i>13){const s=i==10?1.35:i==14?.55:i==15?.2:1;c.save();c.scale(s,s);ds(c,18,10,RD,()=>{c.moveTo(-26,-24);c.lineTo(26,22);c.moveTo(26,-24);c.lineTo(-26,22)});c.restore()}
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(36,6,7,10,-.3,0,T);c.fill();c.stroke()
|
||||
c.restore()
|
||||
const hx=cx+44,hy=cy+12
|
||||
ds(c,20,11,SHT,()=>{c.moveTo(140,198);c.quadraticCurveTo(112,240,hx+2,hy+10)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy,12,13,0,0,T);c.fill();c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
// honey blonde chibi girl in a round "418" teapot costume with a lid hat, hand on hip as the handle, tipping over to pour tea from her spout arm into a cup while singing
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=100
|
||||
const SKIN='#ffe3d1',HAIR='#f6c35b',HD='#d4902b',HL='#fff4d1',EYE='#20c997',ED='#087f5b',POT='#e7f5ff',PD='#74c0fc',PN='#1c7ed6',BL='#ffa8a8',TEA='#c77c3a',TL='#e8a76a',CUP='#fcc2d7',CPD='#f06595',SHO='#f783ac',NT='#b197fc',Z=.56
|
||||
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 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+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
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()
|
||||
}
|
||||
const G={1:c=>{c.moveTo(-4,-6);c.lineTo(1,-10);c.lineTo(1,10)},4:c=>{c.moveTo(4,10);c.lineTo(4,-10);c.lineTo(-7,4);c.lineTo(7,4)},8:c=>{c.moveTo(5,-5);c.arc(0,-5,5,0,T);c.moveTo(7,5);c.arc(0,5,7,0,T)}}
|
||||
const PX=96,PY=248,TX=184,TY=118
|
||||
export default(c,t,i)=>{
|
||||
const a=.3*(ease((t-.08)/.24)-ease((t-.68)/.22)),tip=a>.2,bk=i==1
|
||||
const ex=PX+(TX-PX)*cos(a)-(TY-PY)*sin(a),ey=PY+(TX-PX)*sin(a)+(TY-PY)*cos(a)
|
||||
const hd=ease((t-.24)/.1),tl=ease((t-.66)/.1),sp=(u)=>{const q=1-u;return[q*q*ex+2*q*u*(ex+18)+u*u*218,q*q*ey+2*q*u*(ey+6)+u*u*206]}
|
||||
c.fillStyle='rgba(134,142,150,.3)';c.beginPath();c.ellipse(98,248,46,6,0,0,T);c.fill()
|
||||
c.fillStyle=CUP;c.lineWidth=5;c.beginPath();c.ellipse(218,240,30,7,0,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.arc(240,220,9,-PI/2,PI/2);c.stroke()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(194,206);c.lineTo(242,206);c.quadraticCurveTo(242,236,218,236);c.quadraticCurveTo(194,236,194,206);c.fill();c.stroke()
|
||||
c.fillStyle=TEA;c.lineWidth=4;c.beginPath();c.ellipse(218,206,24,5,0,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=CPD;c.lineWidth=3;c.beginPath();c.moveTo(218,228);c.bezierCurveTo(209,221,212,213,218,218);c.bezierCurveTo(224,213,227,221,218,228);c.fill();c.stroke()
|
||||
if(hd>tl){ds(c,12,6,TEA,()=>{for(let k=0;k<=10;k++){const[x,y]=sp(tl+(hd-tl)*k/10);k?c.lineTo(x,y):c.moveTo(x,y)}})
|
||||
if(hd>.98)for(const[d,o]of[[-1,0],[1,.5]]){const p=(t*4+o)%1;c.fillStyle=TL;c.lineWidth=3;c.beginPath();c.arc(218+d*(6+12*p),204-14*sin(PI*p),4*(1-p*.5),0,T);c.fill();c.stroke()}}
|
||||
const sv=min(1,(t+.22)%1/.1,(.44-(t+.22)%1)/.1);if(sv>0)for(const o of[0,.5]){const p=((t+.22)*5+o)%1;c.globalAlpha=sv;for(const[w,s]of[[9,'#111'],[4,'#fff']]){c.lineWidth=w;c.strokeStyle=s;c.beginPath();c.moveTo(212+o*16,196-22*p);c.bezierCurveTo(204+o*16,190-22*p,220+o*16,182-22*p,212+o*16,174-22*p);c.stroke()}}
|
||||
c.globalAlpha=1;c.strokeStyle='#111'
|
||||
for(const[k,o]of[[0,0],[1,.5]]){const p=(t+o)%1,x=204+k*22+8*sin(T*p*2),y=74-54*p;if(p<.85){c.globalAlpha=min(1,(1-p)*4,p*6);c.fillStyle=NT;c.lineWidth=4;c.beginPath();c.ellipse(x,y,7,5.5,-.4,0,T);c.fill();c.stroke();c.beginPath();c.moveTo(x+6,y-2);c.lineTo(x+6,y-24);c.lineTo(x+14,y-18);c.stroke();c.globalAlpha=1}}
|
||||
c.save();c.translate(PX,PY);c.rotate(a);c.translate(-PX,-PY)
|
||||
c.fillStyle=SHO;c.lineWidth=5;for(const x of[78,110])c.beginPath(),c.ellipse(x,242,13,7,0,0,T),c.fill(),c.stroke()
|
||||
ds(c,24,14,POT,()=>{c.moveTo(56,152);c.bezierCurveTo(10,140,6,212,44,206)})
|
||||
c.lineWidth=6;c.fillStyle=POT;c.beginPath();c.moveTo(136,164);c.quadraticCurveTo(162,170,178,112);c.lineTo(194,122);c.quadraticCurveTo(176,214,132,214);c.closePath();c.fill();c.stroke()
|
||||
c.save();c.translate(186,116);c.rotate(.55);c.fillStyle=PD;c.lineWidth=5;c.beginPath();c.ellipse(0,0,11,6,0,0,T);c.fill();c.stroke();c.restore()
|
||||
c.fillStyle=POT;c.lineWidth=6;c.beginPath();c.roundRect(62,224,64,14,6);c.fill();c.stroke()
|
||||
c.beginPath();c.ellipse(94,184,56,48,0,0,T);c.fill()
|
||||
c.save();c.clip();c.fillStyle=PD;c.fillRect(30,214,130,30);c.strokeStyle=PD;c.lineWidth=5;c.beginPath();c.moveTo(38,160);c.quadraticCurveTo(94,148,150,160);c.stroke()
|
||||
c.fillStyle='#a5d8ff';for(const[x,y]of[[56,186],[132,186],[74,212],[114,212]])c.beginPath(),c.arc(x,y,4,0,T),c.fill();c.restore()
|
||||
c.strokeStyle='#111';c.lineWidth=6;c.beginPath();c.moveTo(38,214);c.quadraticCurveTo(94,222,150,214);c.stroke();c.beginPath();c.ellipse(94,184,56,48,0,0,T);c.stroke()
|
||||
for(const[k,n]of[[-1,4],[0,1],[1,8]]){c.save();c.translate(94+k*20,188);c.scale(.95,.95);c.beginPath();G[n](c);c.restore();c.lineWidth=10;c.stroke();c.lineWidth=5;c.strokeStyle=PN;c.stroke();c.strokeStyle='#111'}
|
||||
c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(94,184,44,1.15*PI,1.35*PI);c.stroke();c.strokeStyle='#111'
|
||||
c.save();c.translate(92,130);c.scale(Z,Z);c.translate(-128,-186)
|
||||
c.lineWidth=10;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,218,100,212,170);c.quadraticCurveTo(222,196,206,212);c.quadraticCurveTo(196,200,186,214);c.quadraticCurveTo(176,200,160,206)
|
||||
c.lineTo(96,206);c.quadraticCurveTo(80,200,70,214);c.quadraticCurveTo(60,200,50,212);c.quadraticCurveTo(34,196,44,170);c.bezierCurveTo(38,100,56,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,198);c.lineTo(142,198);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,198);c.moveTo(142,168);c.lineTo(142,198);c.stroke()
|
||||
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(tip){c.lineWidth=10;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(bk){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-14,142),c.quadraticCurveTo(x,150,x+14,142),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,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=7;c.fillStyle='#c92a2a';c.beginPath();c.ellipse(128,172,9,tip?10:7,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=10;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,166)
|
||||
c.bezierCurveTo(48,74,88,36,128,36);c.bezierCurveTo(168,36,208,74,192,166)
|
||||
c.quadraticCurveTo(186,124,180,104);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,76,104);c.quadraticCurveTo(68,128,64,166);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=9;for(const[s,e]of[[1.2,1.3],[1.7,1.8]])c.beginPath(),c.arc(128,110,60,PI*s,PI*e),c.stroke();c.strokeStyle='#111'
|
||||
c.lineWidth=10;c.fillStyle=POT;c.beginPath();c.moveTo(50,74);c.quadraticCurveTo(54,10,128,8);c.quadraticCurveTo(202,10,206,74);c.closePath();c.fill();c.stroke()
|
||||
c.save();c.clip();c.strokeStyle=PD;c.lineWidth=12;c.beginPath();c.moveTo(50,52);c.quadraticCurveTo(128,30,206,52);c.stroke();c.restore()
|
||||
c.strokeStyle='#111';c.fillStyle=PD;c.beginPath();c.roundRect(36,66,184,22,11);c.fill();c.stroke()
|
||||
c.fillStyle=POT;c.beginPath();c.roundRect(118,-8,20,18,4);c.fill();c.stroke();c.beginPath();c.ellipse(128,-14,20,14,0,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=8;c.beginPath();c.arc(128,70,56,1.2*PI,1.4*PI);c.stroke();c.strokeStyle='#111'
|
||||
c.restore()
|
||||
c.fillStyle=POT;c.lineWidth=6;c.beginPath();c.ellipse(92,140,34,9,0,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(44,204,11,11,0,0,T);c.fill();c.stroke()
|
||||
c.restore()
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
// flustered red haired girl with a side ponytail holding her palm out as a flurry of little envelopes fly in and bounce off it, sweating under a red "429" badge
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=15,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#fa5252',HD='#c92a2a',HL='#ffc9c9',EYE='#4dabf7',ED='#1864ab',TOP='#96f2d7',TD='#20c997',BL='#ff8787',RD='#fa5252',SW='#a5d8ff',CLIP='#ffd43b',EN=['#ffe066','#a5d8ff','#fcc2d7','#b2f2bb','#d0bfff'],Z=.62
|
||||
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 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-3,y+2,11,14,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x-3,y-8,13,9,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x-3,y+2,11,14,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x-3,y+4,3.5,4.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-7,y-4,4,0,T);c.fill();c.beginPath();c.arc(x+2,y+9,2,0,T);c.fill()
|
||||
c.lineWidth=7;c.beginPath();c.moveTo(x-16,y-7);c.quadraticCurveTo(x,y-22,x+16,y-7);c.moveTo(x+d*15,y-8);c.lineTo(x+d*21,y-13);c.stroke()
|
||||
}
|
||||
const G={4:c=>{c.moveTo(4,10);c.lineTo(4,-10);c.lineTo(-7,4);c.lineTo(7,4)},2:c=>{c.moveTo(-6,-4);c.bezierCurveTo(-6,-13,7,-13,6,-3);c.lineTo(-6,10);c.lineTo(7,10)},9:c=>{c.moveTo(6,-4);c.arc(0,-4,6,0,T);c.moveTo(6,-4);c.quadraticCurveTo(6,8,-4,10)}}
|
||||
const env=(c,x,y,a,f,s)=>{c.save();c.translate(x,y);c.rotate(a);c.scale(s,s);c.fillStyle=f;c.lineWidth=4.5;c.beginPath();c.roundRect(-17,-12,34,24,4);c.fill();c.stroke()
|
||||
c.lineWidth=3.5;c.beginPath();c.moveTo(-15,-9);c.lineTo(0,3);c.lineTo(15,-9);c.stroke();c.fillStyle=RD;c.beginPath();c.arc(0,3,3.5,0,T);c.fill();c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const E=[0,1,2,3,4].map(k=>{const p=(t+k*.4)%1,[x0,y0]=[[-20,0],[-24,70],[-24,136],[-24,196],[-14,256]][k],hy=92+k*17,hx=36-(k%2)*4;if(p<.4){const q=p/.4;return{x:x0+(hx-x0)*q,y:y0+(hy-y0)*q,a:.15*sin(T*q*2+k),k,q:-1}}
|
||||
const q=(p-.4)/.6;return{x:hx-100*q,y:hy-50*q+240*q*q,a:-7*q*(k%2?1:-1),k,q}})
|
||||
const hit=E.some(e=>e.q>=0&&e.q<.1),jx=hit?5:0,hx=70+jx,hy=126
|
||||
const H=f=>{c.save();c.translate(174,180);c.scale(Z,Z);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.save();c.translate(184,54);c.rotate(.1*sin(T*t*3))
|
||||
c.fillStyle=HAIR;c.beginPath();c.moveTo(-6,-6);c.bezierCurveTo(52,-18,74,52,56,132);c.quadraticCurveTo(50,154,28,162);c.quadraticCurveTo(44,110,26,70);c.quadraticCurveTo(14,34,-10,18);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=6;c.beginPath();c.moveTo(20,12);c.bezierCurveTo(40,34,50,80,44,124);c.stroke();c.strokeStyle=HL;c.lineWidth=7;c.beginPath();c.moveTo(34,14);c.quadraticCurveTo(50,30,56,56);c.stroke();c.strokeStyle='#111';c.lineWidth=9
|
||||
c.fillStyle=CLIP;c.beginPath();c.ellipse(2,4,14,18,.6,0,T);c.fill();c.stroke();c.restore()
|
||||
c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,204,164);c.lineTo(52,164);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,380);c.lineTo(216,380);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.moveTo(128,206),c.lineTo(128+d*30,186),c.lineTo(128+d*38,214),c.closePath(),c.fill(),c.stroke()
|
||||
c.strokeStyle=TD;c.lineWidth=6;c.beginPath();c.moveTo(128,212);c.lineTo(128,380);c.stroke();c.strokeStyle='#111'
|
||||
c.lineWidth=9;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(hit){c.lineWidth=9;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,126),c.lineTo(128+d*18,140),c.lineTo(128+d*38,154),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,162,16,9,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-7,0,7])c.beginPath(),c.moveTo(128+d*44+k-2,167),c.lineTo(128+d*44+k+2,157),c.stroke()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(116,170);for(let k=1;k<=4;k++)c.quadraticCurveTo(113+k*6,k%2?164:176,116+k*6,170);c.stroke()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,160)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,190,160)
|
||||
c.quadraticCurveTo(188,120,180,102);c.quadraticCurveTo(172,104,166,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(78,104,76,104);c.quadraticCurveTo(68,124,66,160);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
c.fillStyle=SW;c.lineWidth=7;for(const[x,y,s]of[[38,96,1],[28,128,.7]])c.beginPath(),c.moveTo(x,y-20*s),c.quadraticCurveTo(x+13*s,y,x,y+8*s),c.quadraticCurveTo(x-13*s,y,x,y-20*s),c.fill(),c.stroke()
|
||||
})
|
||||
const bs=1+(hit?.08:0)
|
||||
c.save();c.translate(200,30);c.scale(bs,bs);c.fillStyle=RD;c.lineWidth=6;c.beginPath();c.roundRect(-42,-22,84,44,14);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(-8,22);c.lineTo(0,34);c.lineTo(8,22);c.fill();c.stroke();c.fillRect(-10,16,20,7)
|
||||
for(const[k,n]of[[-1,4],[0,2],[1,9]]){c.save();c.translate(k*22,0);c.scale(.95,.95);c.beginPath();G[n](c);c.restore();c.lineWidth=11;c.strokeStyle='#111';c.stroke();c.lineWidth=5.5;c.strokeStyle='#fff';c.stroke()}
|
||||
c.restore();c.strokeStyle='#111'
|
||||
ds(c,22,13,TOP,()=>{c.moveTo(146,214);c.quadraticCurveTo(100,224,hx+4,hy+28)})
|
||||
c.save();c.translate(hx,hy);c.rotate(-.12);c.scale(.92,.92)
|
||||
c.lineWidth=5;c.fillStyle=SKIN
|
||||
for(const[x,y,h]of[[-15,-22,15],[-5,-27,17],[5,-27,17],[15,-22,15]])c.beginPath(),c.roundRect(x-5,y-h,10,h+14,5),c.fill(),c.stroke()
|
||||
c.beginPath();c.ellipse(22,8,6,12,-.7,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.roundRect(-20,-14,40,36,13);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.roundRect(-18,22,36,13,5);c.fill();c.stroke()
|
||||
c.restore()
|
||||
for(const e of E)if(e.q>=0&&e.q<.14)for(const a of[-.9,-.3,.3,.9])ds(c,7,3,'#fff',()=>{const x=hx-20,y=e.y;c.moveTo(x+cos(PI+a)*12,y+sin(PI+a)*12);c.lineTo(x+cos(PI+a)*24,y+sin(PI+a)*24)})
|
||||
for(const e of E)if(e.x>-40&&e.y<290)env(c,e.x,e.y,e.a,EN[e.k],1.1)
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
// brown haired shopkeeper girl with a bun and a blue apron flipping a hanging door sign from OPEN to CLOSED 503, then giving an apologetic little bow with a sorry hand
|
||||
const{sin,cos,PI,max,min,abs,exp}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#a9714b',HD='#6f4428',HL='#ecd2bd',EYE='#51cf66',ED='#2b8a3e',SHT='#fff4e6',APR='#74c0fc',AD='#1c7ed6',BL='#ffa8a8',WOOD='#f3c98b',WD='#c98a45',OP='#d3f9d8',OPD='#2b8a3e',CL='#ffe3e3',CLD='#e03131',SW='#a5d8ff',PIN='#ff8787'
|
||||
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 ease=x=>x<=0?0:x>=1?1:x*x*(3-2*x),L=(a,b,u)=>a+(b-a)*u
|
||||
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+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
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()
|
||||
}
|
||||
const G={O:c=>{c.moveTo(6,0);c.ellipse(0,0,6,10,0,0,T)},P:c=>{c.moveTo(-6,10);c.lineTo(-6,-10);c.lineTo(0,-10);c.arc(0,-4,6,-PI/2,PI/2);c.lineTo(-6,2)},
|
||||
E:c=>{c.moveTo(6,-10);c.lineTo(-6,-10);c.lineTo(-6,10);c.lineTo(6,10);c.moveTo(-6,0);c.lineTo(4,0)},N:c=>{c.moveTo(-6,10);c.lineTo(-6,-10);c.lineTo(6,10);c.lineTo(6,-10)},
|
||||
C:c=>{c.moveTo(3.8,-8.1);c.ellipse(0,0,6.5,10,0,-.3*PI,.3*PI,true)},L:c=>{c.moveTo(-6,-10);c.lineTo(-6,10);c.lineTo(6,10)},
|
||||
S:c=>{c.moveTo(6,-7);c.bezierCurveTo(4,-12,-6,-11,-6,-5);c.bezierCurveTo(-6,1,6,-1,6,5);c.bezierCurveTo(6,11,-4,12,-6,7)},D:c=>{c.moveTo(-6,-10);c.lineTo(-6,10);c.lineTo(-1,10);c.quadraticCurveTo(6,10,6,0);c.quadraticCurveTo(6,-10,-1,-10);c.closePath()},
|
||||
5:c=>{c.moveTo(6,-10);c.lineTo(-5,-10);c.lineTo(-6,-1);c.quadraticCurveTo(8,-5,7,4);c.quadraticCurveTo(6,12,-6,9)},0:c=>{c.moveTo(6,0);c.ellipse(0,0,6,10,0,0,T)},3:c=>{c.moveTo(-6,-8);c.quadraticCurveTo(0,-13,5,-8);c.quadraticCurveTo(7,-2,-1,-1);c.quadraticCurveTo(8,0,6,6);c.quadraticCurveTo(2,12,-6,8)}}
|
||||
const word=(c,w,x,y,s,g,col,lw)=>{c.beginPath();[...w].forEach((ch,k)=>{c.save();c.translate(x+(k-(w.length-1)/2)*g,y);c.scale(s,s);G[ch](c);c.restore()});c.lineWidth=lw;c.strokeStyle=col;c.stroke();c.strokeStyle='#111'}
|
||||
const NX=66,NY=34
|
||||
export default(c,t,i)=>{
|
||||
const f1=ease((t-.06)/.2),f2=ease((t-.8)/.2),th=PI*(f1+f2),cs=cos(th),bw=t>.34&&t<.74,bo=ease((t-.3)/.08)-ease((t-.68)/.08)
|
||||
const sw=t<.26?0:t<.8?.14*exp(-4*(t-.26))*sin(T*(t-.26)*3.2)*(1-ease((t-.7)/.1)):0
|
||||
const hs=t<.3?1-ease((t-.22)/.08):t<.72?0:ease((t-.72)/.08),hx=L(L(160,134,bo),112+18*abs(cs),hs),hy=L(L(150,150+3*sin(T*t*4),bo),146,hs)
|
||||
c.save();c.translate(NX,NY);c.rotate(sw)
|
||||
c.lineWidth=4;ds(c,6,2.5,'#fff',()=>{c.moveTo(-44,56);c.lineTo(0,0);c.lineTo(44,56)})
|
||||
c.save();c.translate(0,92);c.scale(max(.04,abs(cs)),1)
|
||||
c.fillStyle=WOOD;c.lineWidth=6;c.beginPath();c.roundRect(-58,-38,116,76,12);c.fill();c.stroke()
|
||||
c.fillStyle=cs>0?OP:CL;c.lineWidth=4.5;c.beginPath();c.roundRect(-48,-28,96,56,7);c.fill();c.stroke()
|
||||
if(cs>0)word(c,'OPEN',0,0,1,22,OPD,6)
|
||||
else word(c,'CLOSED',0,-6,.75,15,CLD,4.5),word(c,'503',0,17,.5,11,'#495057',3.5)
|
||||
c.restore()
|
||||
c.fillStyle='#adb5bd';c.lineWidth=4;c.beginPath();c.arc(0,0,6,0,T);c.fill();c.stroke()
|
||||
c.restore()
|
||||
const H=f=>{c.save();c.translate(182,186+2*sin(T*t*2));c.scale(.64,.64);c.translate(-128,-186);f();c.restore()}
|
||||
const R=f=>{c.save();c.translate(128,186+18*bo);c.rotate(-.14*bo);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9
|
||||
R(()=>{c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,204,160);c.quadraticCurveTo(200,180,184,180);c.lineTo(72,180);c.quadraticCurveTo(56,180,52,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()})
|
||||
c.fillStyle=SHT;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,380);c.lineTo(216,380);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle=SHT;for(const d of[-1,1])c.beginPath(),c.moveTo(128,204),c.lineTo(128+d*28,186),c.lineTo(128+d*34,212),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=APR;c.beginPath();c.moveTo(84,246);c.lineTo(172,246);c.lineTo(182,380);c.lineTo(74,380);c.closePath();c.fill();c.stroke()
|
||||
for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*44,250),c.lineTo(128+d*60,198),c.lineTo(128+d*48,196),c.lineTo(128+d*32,250),c.fill(),c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=7;c.beginPath();c.roundRect(104,272,48,40,8);c.fill();c.stroke()
|
||||
c.fillStyle=PIN;c.lineWidth=5;c.beginPath();c.moveTo(128,302);c.bezierCurveTo(112,290,118,278,128,286);c.bezierCurveTo(138,278,144,290,128,302);c.fill();c.stroke()
|
||||
R(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.arc(128,28,30,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.arc(128,28,18,PI*1.1,PI*1.9);c.stroke();c.strokeStyle=HL;c.lineWidth=7;c.beginPath();c.arc(128,28,22,PI*1.2,PI*1.45);c.stroke()
|
||||
c.strokeStyle='#111';c.lineWidth=9;ds(c,12,6,PIN,()=>{c.moveTo(92,10);c.lineTo(170,36)});c.fillStyle=PIN;c.beginPath();c.arc(170,36,9,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=9;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(bw){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,136,14,PI*.15,PI*.85),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,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.beginPath();if(bw)c.moveTo(118,172),c.quadraticCurveTo(123,166,128,171),c.quadraticCurveTo(133,166,138,172);else c.arc(128,164,9,.15*PI,.85*PI);c.stroke()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,156)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,190,156)
|
||||
c.quadraticCurveTo(186,120,180,104);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(78,104,76,104);c.quadraticCurveTo(68,124,66,156);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
if(bw){c.lineWidth=6;c.beginPath();c.moveTo(86,108);c.lineTo(112,116);c.moveTo(170,108);c.lineTo(144,116);c.stroke()
|
||||
c.fillStyle=SW;c.lineWidth=7;c.beginPath();c.moveTo(200,96);c.quadraticCurveTo(213,116,200,124);c.quadraticCurveTo(187,116,200,96);c.fill();c.stroke()}
|
||||
})
|
||||
})
|
||||
ds(c,20,11,SHT,()=>{c.moveTo(148,212);c.quadraticCurveTo(L(118,120,bo),L(220,226,bo),hx+4,hy+12)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5
|
||||
if(bo>.5){c.save();c.translate(hx,hy);c.rotate(-.25+.18*sin(T*t*4));c.beginPath();c.ellipse(8,4,5,9,-.4,0,T);c.fill();c.stroke();c.beginPath();c.roundRect(-9,-24,18,38,9);c.fill();c.stroke();c.lineWidth=3;c.beginPath();c.moveTo(-2,-16);c.lineTo(-2,2);c.stroke();c.restore()}
|
||||
else c.beginPath(),c.ellipse(hx,hy,12,12,0,0,T),c.fill(),c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// caramel ponytail girl in a mint hoodie tiptoeing away from her desk with sneaky paws, glancing back nervously at her laptop that reads "AFK" while an idle clock ticks over it
|
||||
const{sin,cos,PI,abs}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#d4a373',HD='#9c6644',HL='#faedcd',EYE='#4dabf7',ED='#1864ab',HO='#96f2d7',HOD='#20c997',SHT='#748ffc',SHO='#ff922b',BL='#ffa8a8',DK='#e8b07a',DKD='#c47f45',LP='#ced4da',LPD='#868e96',SCR='#364fc7',AF='#ffd43b',CK='#fff3bf',CKD='#f59f00',SW='#a5d8ff',SCR2='#5c7cfa'
|
||||
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 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-6,y+1,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-6,y-9,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x-7,y+2,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-10,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x-1,y+8,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 st=T*t*2,bob=-4*abs(sin(st)),X=176,Y=140+bob,lean=.08
|
||||
c.lineWidth=6;c.fillStyle=DK;c.beginPath();c.roundRect(-20,162,136,16,5);c.fill();c.stroke()
|
||||
c.fillStyle=DKD;for(const x of[8,90])c.beginPath(),c.rect(x,178,14,90),c.fill(),c.stroke()
|
||||
c.fillStyle=LP;c.lineWidth=6;c.beginPath();c.roundRect(14,92,82,62,8);c.fill();c.stroke()
|
||||
c.fillStyle=SCR;c.lineWidth=4;c.beginPath();c.roundRect(22,100,66,46,4);c.fill();c.stroke()
|
||||
c.fillStyle=LPD;c.lineWidth=5;c.beginPath();c.moveTo(10,154);c.lineTo(100,154);c.lineTo(108,163);c.lineTo(2,163);c.closePath();c.fill();c.stroke()
|
||||
c.beginPath()
|
||||
c.moveTo(29,132);c.lineTo(37,112);c.lineTo(45,132);c.moveTo(32,125);c.lineTo(42,125)
|
||||
c.moveTo(52,132);c.lineTo(52,112);c.lineTo(62,112);c.moveTo(52,122);c.lineTo(60,122)
|
||||
c.moveTo(70,112);c.lineTo(70,132);c.moveTo(81,112);c.lineTo(70,124);c.moveTo(74,120);c.lineTo(81,132)
|
||||
for(const[w,s]of[[8,'#111'],[4,AF]])c.lineWidth=w,c.strokeStyle=s,c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
c.fillStyle='rgba(255,255,255,.25)';c.beginPath();c.moveTo(26,104);c.lineTo(42,104);c.lineTo(26,120);c.closePath();c.fill()
|
||||
const fy=44+3*sin(T*t)
|
||||
c.fillStyle=CK;c.lineWidth=6;c.beginPath();c.arc(54,fy,24,0,T);c.fill();c.stroke()
|
||||
c.fillStyle='#111';for(let k=0;k<4;k++)c.beginPath(),c.arc(54+17*cos(k*PI/2),fy+17*sin(k*PI/2),2.5,0,T),c.fill()
|
||||
c.lineWidth=5;c.beginPath();c.moveTo(54,fy);c.lineTo(54-8,fy-6);c.stroke()
|
||||
c.strokeStyle=CKD;c.lineWidth=4;c.beginPath();c.moveTo(54,fy);c.lineTo(54+15*cos(T*t-PI/2),fy+15*sin(T*t-PI/2));c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=CKD;c.lineWidth=3;c.beginPath();c.arc(54,fy,3.5,0,T);c.fill();c.stroke()
|
||||
for(const[k,x,y,s]of[[0,88,30,1],[1,100,16,.75]]){const a=.5+.5*sin(T*t*2-k);c.save();c.globalAlpha=.4+.6*a;c.translate(x,y);c.scale(s,s);ds(c,9,4,SCR2,()=>{c.moveTo(-6,-6);c.lineTo(6,-6);c.lineTo(-6,6);c.lineTo(6,6)});c.restore()}
|
||||
for(const k of[0,1]){const p=(t*2+k*.5)%1,sw=p<.5,q=sw?p*2:(p-.5)*2,e=q*q*(3-2*q),l=sw?sin(PI*e):0,hx=X-6+k*10
|
||||
const fx=sw?hx-12+28*e:hx+16-28*q,fy=236-18*l,kx=(hx+fx)/2+8+8*l,ky=(Y+50+fy)/2-6*l
|
||||
ds(c,17,10,SKIN,()=>{c.moveTo(hx,Y+48);c.lineTo(kx,ky);c.lineTo(fx,fy-6)})
|
||||
ds(c,17,10,'#fff',()=>{c.moveTo(kx+(fx-kx)*.45,ky+(fy-6-ky)*.45);c.lineTo(fx,fy-6)})
|
||||
c.save();c.translate(fx,fy);c.rotate(.6+.3*l);c.fillStyle=SHO;c.lineWidth=5;c.beginPath();c.ellipse(5,0,11,6.5,0,0,T);c.fill();c.stroke();c.restore()}
|
||||
c.save();c.translate(X,Y+50);c.rotate(lean);c.translate(-X,-Y-50)
|
||||
ds(c,18,10,HO,()=>{c.moveTo(X-16,Y+8);c.quadraticCurveTo(X-28,Y+24,X-36,Y+34)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(X-38,Y+38,8,8,0,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=SHT;c.lineWidth=6;c.beginPath();c.roundRect(X-21,Y+36,42,18,6);c.fill();c.stroke()
|
||||
c.fillStyle=HO;c.lineWidth=6;c.beginPath();c.moveTo(X-16,Y-2);c.lineTo(X+16,Y-2);c.quadraticCurveTo(X+26,Y,X+26,Y+14);c.lineTo(X+24,Y+44);c.lineTo(X-24,Y+44);c.lineTo(X-26,Y+14);c.quadraticCurveTo(X-26,Y,X-16,Y-2);c.fill();c.stroke()
|
||||
c.fillStyle=HOD;c.lineWidth=5;c.beginPath();c.moveTo(X-12,Y+40);c.lineTo(X-8,Y+28);c.lineTo(X+8,Y+28);c.lineTo(X+12,Y+40);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(X-6,Y+2);c.lineTo(X-8,Y+18);c.moveTo(X+6,Y+2);c.lineTo(X+8,Y+18);c.stroke()
|
||||
c.restore()
|
||||
const H=f=>{c.save();c.translate(X+2,Y+2);c.rotate(-.1);c.scale(.56,.56);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.save();c.translate(186,62);c.rotate(.1*sin(st));c.beginPath();c.moveTo(-4,-8);c.bezierCurveTo(44,-30,72,26,60,100);c.quadraticCurveTo(56,120,40,114);c.bezierCurveTo(52,64,36,20,-4,16);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(16,4);c.bezierCurveTo(40,0,56,46,50,96);c.stroke();c.strokeStyle='#111';c.restore()
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,210,96,202,150);c.lineTo(54,150);c.bezierCurveTo(46,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=HOD;c.beginPath();c.moveTo(70,196);c.quadraticCurveTo(128,170,186,196);c.lineTo(180,222);c.quadraticCurveTo(128,204,76,222);c.closePath();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()
|
||||
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,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(112,170);c.quadraticCurveTo(116,164,120,170);c.quadraticCurveTo(124,176,128,170);c.quadraticCurveTo(132,164,136,170);c.quadraticCurveTo(140,176,144,170);c.stroke()
|
||||
c.lineWidth=9;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(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,124,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;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=SHO;c.lineWidth=7;c.beginPath();c.ellipse(186,62,11,15,.4,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=SW;c.lineWidth=6;c.beginPath();c.moveTo(60,96);c.quadraticCurveTo(74,116,60,124);c.quadraticCurveTo(46,116,60,96);c.fill();c.stroke()
|
||||
})
|
||||
ds(c,18,10,HO,()=>{c.moveTo(X+18,Y+8);c.quadraticCurveTo(X+30,Y+26,X+16,Y+8)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(X+14,Y+4,8,9,0,0,T);c.fill();c.stroke()
|
||||
ds(c,9,4.5,SKIN,()=>{c.moveTo(X+11,Y);c.lineTo(X+9,Y-12)})
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
// steel blue haired girl in a sweater vest shoves a yellow file folder into a little safe, swings the heavy door shut, spins the dial and a green check pops with sparkles before the door swings open again
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#94a9c0',HD='#5a7088',HL='#eef3f8',EYE='#4dabf7',ED='#1864ab',VS='#5c7cfa',VSD='#3b5bdb',TIE='#ff8787',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',SF='#38d9a9',SFD='#0ca678',IN='#343a40',DL='#e9ecef',FD='#ffd43b',FDD='#f59f00',OK='#51cf66',SP='#ffe066',CL='#ffa8a8'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return x*x*(3-2*x)}
|
||||
const eye=(c,x,y,d,gx,gy)=>{
|
||||
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+gx,y+gy,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+gx,y+gy-10,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+7,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()
|
||||
}
|
||||
const star=(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()}
|
||||
const folder=(c,x,y,s)=>{c.save();c.translate(x,y);c.scale(s,s);c.fillStyle=FDD;c.lineWidth=5;c.beginPath();c.moveTo(-24,-16);c.lineTo(-24,-22);c.lineTo(-8,-22);c.lineTo(-4,-16);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.rect(-18,-20,34,20);c.fill();c.stroke()
|
||||
c.fillStyle=FD;c.beginPath();c.roundRect(-24,-16,48,34,3);c.fill();c.stroke();c.restore()}
|
||||
const kf=(K,t)=>{for(let k=1;k<K.length;k++)if(t<=K[k][0]){const[a,...p]=K[k-1],[b,...q]=K[k],u=ez(t,a,b);return p.map((v,j)=>v+(q[j]-v)*u)}}
|
||||
const SX=132,SY=94,SW=96,SH=118,HX=SX+SW,HK=[[0,100,270],[.12,102,168],[.3,152,141],[.42,108,196],[.5,166,160],[.72,166,160],[.84,110,210],[1,100,270]]
|
||||
export default(c,t,i)=>{
|
||||
const op=1-ez(t,.32,.46)+ez(t,.9,1),a=1.85*op,cw=cos(a)
|
||||
const dl=4*PI*ez(t,.5,.72),ok=t>=.72&&t<.92,q=min(1,max(0,(t-.72)/.1)),pb=ok?(1+2.7*(q-1)**3+1.7*(q-1)**2)*(1-ez(t,.86,.92)):0
|
||||
const push=t<.32,turn=t>=.48&&t<.74,cn=t>=.46&&t<.52
|
||||
const H=f=>{c.save();c.translate(64,206);c.rotate(push?.05:0);c.scale(.74,.74);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,208,170);c.lineTo(212,290);c.lineTo(44,290);c.lineTo(48,170);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=VS;c.beginPath();c.moveTo(66,214);c.lineTo(110,200);c.lineTo(128,250);c.lineTo(146,200);c.lineTo(190,214);c.quadraticCurveTo(206,260,210,330);c.lineTo(46,330);c.quadraticCurveTo(50,260,66,214);c.fill();c.stroke()
|
||||
c.strokeStyle=VSD;c.lineWidth=4;for(let k=0;k<4;k++)c.beginPath(),c.moveTo(70+k*8,250+k*20),c.lineTo(186-k*8,250+k*20),c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle='#fff';c.lineWidth=6;for(const d of[-1,1])c.beginPath(),c.moveTo(128,204),c.lineTo(128+d*26,188),c.lineTo(128+d*30,210),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=TIE;c.beginPath();c.moveTo(122,204);c.lineTo(134,204);c.lineTo(138,240);c.lineTo(128,250);c.lineTo(118,240);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(push){c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,128),c.lineTo(128+d*18,140),c.lineTo(128+d*38,152),c.stroke()}
|
||||
else if(ok){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else eye(c,103,140,-1,5,turn?2:0),eye(c,153,140,1,5,turn?2:0)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(push){c.beginPath();c.moveTo(114,164);c.lineTo(142,164);c.quadraticCurveTo(142,178,128,178);c.quadraticCurveTo(114,178,114,164);c.fill();c.stroke();c.fillStyle='#fff';c.beginPath();c.rect(115,164,26,5);c.fill();c.stroke()}
|
||||
else if(ok){c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,188,128,188);c.quadraticCurveTo(114,188,112,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,190,9,7,0,0,T);c.fill();c.restore()}
|
||||
else if(turn){c.beginPath();c.moveTo(118,168);c.quadraticCurveTo(128,174,138,168);c.stroke();c.fillStyle=TG;c.lineWidth=4;c.beginPath();c.ellipse(136,174,5,6,-.3,0,T);c.fill();c.stroke()}
|
||||
else{c.beginPath();c.moveTo(118,168);c.quadraticCurveTo(128,176,138,168);c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=HAIR;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*58,96),c.quadraticCurveTo(128+d*66,150,128+d*62,208),c.lineTo(128+d*44,208),c.quadraticCurveTo(128+d*48,150,128+d*44,104),c.closePath(),c.fill(),c.stroke()
|
||||
c.beginPath();c.moveTo(66,132)
|
||||
c.bezierCurveTo(52,74,88,36,128,36);c.bezierCurveTo(168,36,204,74,190,132);c.lineTo(178,112)
|
||||
for(let k=0;k<7;k++)c.lineTo(170-k*14,k%2?104:116),c.lineTo(163-k*14,k%2?114:104)
|
||||
c.lineTo(78,112);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=CL;c.lineWidth=6;for(const x of[158,172])c.beginPath(),c.roundRect(x,74,8,26,4),c.fill(),c.stroke()
|
||||
})
|
||||
c.fillStyle=SF;c.lineWidth=7;c.beginPath();c.roundRect(SX-6,SY-6,SW+12,SH+12,12);c.fill();c.stroke()
|
||||
c.fillStyle=SFD;c.lineWidth=5;for(const x of[SX+8,HX-24])c.beginPath(),c.roundRect(x,SY+SH+4,16,10,3),c.fill(),c.stroke()
|
||||
c.fillStyle=IN;c.lineWidth=5;c.beginPath();c.rect(SX+4,SY+4,SW-8,SH-8);c.fill();c.stroke()
|
||||
c.strokeStyle='#868e96';c.lineWidth=5;c.beginPath();c.moveTo(SX+6,SY+64);c.lineTo(HX-6,SY+64);c.stroke();c.strokeStyle='#111'
|
||||
for(const[k,cc]of[[0,'#74c0fc'],[1,'#ff8787'],[2,'#b197fc']]){c.fillStyle=cc;c.lineWidth=4;c.beginPath();c.roundRect(SX+18+k*20,SY+72,16,38,3);c.fill();c.stroke()}
|
||||
const[hx,hy]=kf(HK,t)
|
||||
if(t<.3)folder(c,hx+26,hy-4,1-.2*min(1,max(0,(hx-102)/50)));else if(op>.05)folder(c,178,141,.8)
|
||||
const fw=SW*cw,sk=1+.14*sin(a)
|
||||
c.save();c.translate(HX,SY+SH/2)
|
||||
c.fillStyle=cw>0?SF:SFD;c.lineWidth=6;c.beginPath();c.moveTo(0,-SH/2);c.lineTo(-fw,-SH/2*sk);c.lineTo(-fw,SH/2*sk);c.lineTo(0,SH/2);c.closePath();c.fill();c.stroke()
|
||||
if(cw>.2){c.translate(-fw/2,0);c.scale(cw,1)
|
||||
c.strokeStyle=SFD;c.lineWidth=4;c.beginPath();c.roundRect(-SW/2+10,-SH/2+10,SW-20,SH-20,8);c.stroke();c.strokeStyle='#111'
|
||||
c.save();c.rotate(dl);c.fillStyle=DL;c.lineWidth=6;c.beginPath();c.arc(0,0,20,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();for(let k=0;k<12;k++)c.moveTo(cos(k*PI/6)*14,sin(k*PI/6)*14),c.lineTo(cos(k*PI/6)*18,sin(k*PI/6)*18);c.stroke()
|
||||
c.fillStyle='#ff6b6b';c.lineWidth=3.5;c.beginPath();c.moveTo(-4,-4);c.lineTo(0,-16);c.lineTo(4,-4);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#868e96';c.beginPath();c.arc(0,0,5,0,T);c.fill();c.stroke();c.restore()
|
||||
ds(c,11,5,DL,()=>{c.moveTo(-32,-14);c.lineTo(-32,14)})}
|
||||
else if(cw<-.1){c.strokeStyle='#087f5b';c.lineWidth=4;c.beginPath();for(const y of[-36,0,36])c.moveTo(-fw*.3,y*sk*.9),c.lineTo(-fw*.75,y*sk*.95);c.stroke();c.strokeStyle='#111'}
|
||||
c.restore()
|
||||
c.fillStyle='#868e96';c.lineWidth=4;for(const y of[SY+18,SY+SH-18])c.beginPath(),c.roundRect(HX-4,y-9,8,18,3),c.fill(),c.stroke()
|
||||
if(cn)for(const[x,y,dx,dy]of[[SX-14,SY+30,-12,-6],[SX-14,SY+80,-12,6],[HX+12,SY-8,8,-10]])ds(c,7,3,'#fff',()=>{c.moveTo(x,y);c.lineTo(x+dx,y+dy)})
|
||||
ds(c,22,13,'#fff',()=>{c.moveTo(96,262);c.quadraticCurveTo(hx-10,max(hy+30,236),hx,hy+8)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.save();c.translate(hx,hy);if(turn)c.rotate(sin(dl)*.4);c.beginPath();c.ellipse(0,0,12,12,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();c.moveTo(-4,-4);c.lineTo(4,-6);c.moveTo(-4,3);c.lineTo(5,1);c.stroke();c.restore()
|
||||
if(turn)for(const k of[0,1])ds(c,7,3,'#fff',()=>{c.arc(HX-SW/2,SY+SH/2,30+k*8,dl-1-k*.3,dl-.2-k*.3)})
|
||||
if(pb>.02){c.save();c.translate(HX-SW/2,SY-14);c.scale(pb,pb);c.fillStyle=OK;c.lineWidth=6;c.beginPath();c.arc(0,0,24,0,T);c.fill();c.stroke()
|
||||
ds(c,13,6,'#fff',()=>{c.moveTo(-11,0);c.lineTo(-3,8);c.lineTo(12,-8)});c.restore()
|
||||
c.fillStyle=SP;c.lineWidth=3.5;for(const[x,y,o]of[[140,62,0],[214,52,.05],[110,96,.1]]){const r=12*sin(PI*min(1,max(0,(t-.74-o)/.16)));if(r>1)star(c,x,y,r)}}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
// lime bob girl with an ahoge slumps lower and dozes off with a snot bubble as the battery above her drains green to yellow to red, then a plug zaps in, the battery refills and she pops back up wide awake
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=18,delay=95
|
||||
const SKIN='#ffe3d1',HAIR='#a9e34b',HD='#74b816',HL='#f4fce3',EYE='#3bc9db',ED='#0c8599',TEE='#a5d8ff',TD='#4dabf7',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',BUB='rgba(165,216,255,.75)',ZP='#ffd43b',PL='#ced4da',LV=['#ff6b6b','#ffd43b','#69db7c']
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return x*x*(3-2*x)}
|
||||
const eye=(c,x,y,d,lid)=>{
|
||||
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,y+2,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,y-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
c.restore();const ly=y-17+34*lid
|
||||
if(lid)c.save(),c.beginPath(),c.rect(x-20,y-24,40,ly-y+24),c.clip(),c.fillStyle=SKIN,c.beginPath(),c.ellipse(x,y,16,19,0,0,T),c.fill(),c.restore()
|
||||
c.lineWidth=6;c.beginPath();if(lid)c.moveTo(x-16,ly),c.quadraticCurveTo(x,ly-5,x+16,ly),c.moveTo(x+d*15,ly),c.lineTo(x+d*20,ly+3)
|
||||
else 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()
|
||||
}
|
||||
const bolt=(c,x,y,s)=>{c.beginPath();c.moveTo(x+3*s,y-12*s);c.lineTo(x-7*s,y+2*s);c.lineTo(x,y+2*s);c.lineTo(x-3*s,y+12*s);c.lineTo(x+7*s,y-2*s);c.lineTo(x,y-2*s);c.closePath();c.fill();c.stroke()}
|
||||
export default(c,t,i)=>{
|
||||
const dr=ez(t,0,.6),ch=ez(t,.7,.86),L=t<.7?1-.88*dr:.12+.88*ch,z=t<.7?dr:0,pk=t>=.7&&t<.82
|
||||
const px=t<.62?290:t<.7?290-84*ez(t,.62,.7):t<.9?206:206+84*ez(t,.9,1)
|
||||
const sl=t<.7?24*z:-12*sin(PI*min(1,(t-.7)/.14)),tl=.12*z
|
||||
c.fillStyle='#fff';c.lineWidth=7;c.beginPath();c.roundRect(58,16,124,58,14);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.roundRect(182,32,12,26,5);c.fill();c.stroke()
|
||||
const col=t>=.7?LV[2]:LV[L>.6?2:L>.3?1:0],w=(124-20)*L
|
||||
if(!(L<.2&&t<.7&&(i>>1)%2))c.fillStyle=col,c.lineWidth=4,c.beginPath(),c.roundRect(68,26,w,38,7),c.fill(),c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(74,34);c.lineTo(90,34);c.stroke();c.strokeStyle='#111'
|
||||
if(t>=.7&&t<.9){c.fillStyle='#fff';c.lineWidth=4;bolt(c,120,45,1.5)}
|
||||
if(px<280){ds(c,14,7,PL,()=>{c.moveTo(px+28,45);c.quadraticCurveTo(px+50,45,px+56,80);c.lineTo(px+60,120)})
|
||||
c.fillStyle='#868e96';for(const y of[38,52])c.lineWidth=4,c.beginPath(),c.rect(px-12,y-3,14,6),c.fill(),c.stroke()
|
||||
c.fillStyle=PL;c.lineWidth=6;c.beginPath();c.roundRect(px,28,32,34,8);c.fill();c.stroke()}
|
||||
if(t>=.68&&t<.84){c.fillStyle=ZP;c.lineWidth=3.5;for(const[x,y,s]of[[204,12,1],[220,80,.9],[172,92,.8]])bolt(c,x+(i%2)*3,y,s)}
|
||||
c.save();c.translate(128,204+sl);c.rotate(tl);c.scale(.7,.7);c.translate(-128,-186)
|
||||
const ah=t<.7?z*1.6:0
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,214,100,206,160);c.quadraticCurveTo(212,186,222,196);c.quadraticCurveTo(196,206,180,196);c.lineTo(76,196);c.quadraticCurveTo(60,206,34,196);c.quadraticCurveTo(44,186,50,160);c.bezierCurveTo(42,100,56,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TEE;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.moveTo(128,206),c.lineTo(128+d*30,188),c.lineTo(128+d*34,212),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=TD;c.lineWidth=5;for(const y of[226,252])c.beginPath(),c.arc(128,y,5,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.quadraticCurveTo(128,204,142,192);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,190);c.moveTo(142,168);c.lineTo(142,190);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(z>.9){c.lineWidth=7;for(const x of[103,153])c.beginPath(),c.arc(x,142,13,.15*PI,.85*PI),c.stroke()}
|
||||
else{const lid=z<.25?0:z<.55?.4:.7;eye(c,103,140,-1,lid);eye(c,153,140,1,lid)}
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(pk){c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,188,128,188);c.quadraticCurveTo(114,188,112,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,190,9,7,0,0,T);c.fill();c.restore()}
|
||||
else if(z>.9){c.beginPath();c.ellipse(128,172,6,5,0,0,T);c.fill();c.stroke()}
|
||||
else if(z>.4){c.beginPath();c.moveTo(118,170);c.lineTo(138,170);c.stroke()}
|
||||
else{c.beginPath();c.moveTo(116,166);c.quadraticCurveTo(128,176,140,166);c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(62,176)
|
||||
c.bezierCurveTo(44,74,88,36,128,36);c.bezierCurveTo(168,36,212,74,194,176);c.quadraticCurveTo(186,182,180,174)
|
||||
c.quadraticCurveTo(184,128,178,104);c.quadraticCurveTo(170,106,164,112);c.quadraticCurveTo(160,98,152,92);c.quadraticCurveTo(146,104,138,108)
|
||||
c.quadraticCurveTo(132,96,126,90);c.quadraticCurveTo(120,104,112,108);c.quadraticCurveTo(104,96,96,94);c.quadraticCurveTo(92,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(72,128,76,174);c.quadraticCurveTo(70,182,62,176);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.save();c.translate(130,40);c.rotate(ah);c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(-8,2);c.bezierCurveTo(-14,-30,20,-50,30,-40);c.bezierCurveTo(10,-36,4,-16,10,2);c.fill();c.stroke();c.restore()
|
||||
c.fillStyle=LV[0];c.lineWidth=6;c.beginPath();c.moveTo(168,70);c.lineTo(190,62);c.lineTo(186,84);c.closePath();c.fill();c.stroke()
|
||||
if(z>.9){const r=6+8*sin(PI*min(1,(t-.5)/.2));c.fillStyle=BUB;c.lineWidth=4;c.beginPath();c.arc(142+r*.6,168,r,0,T);c.fill();c.stroke();c.strokeStyle='#fff';c.lineWidth=3;c.beginPath();c.arc(142+r*.6,168,r*.6,PI*1.1,PI*1.4);c.stroke();c.strokeStyle='#111'}
|
||||
c.restore()
|
||||
if(pk)for(const d of[-1,1])ds(c,8,4,ZP,()=>{for(const k of[-1,0,1]){const a=-PI/2+d*.9+k*.32;c.moveTo(128+cos(a)*74,140+sin(a)*74);c.lineTo(128+cos(a)*92,140+sin(a)*92)}})
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// messy lilac haired scientist girl in a lab coat with goggles on her head holding up a bubbling "β" flask with a gleeful grin, bubbles rise out of it and pop into little puffs
|
||||
const{sin,cos,PI}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#d0a8f5',HD='#9c6ade',HL='#f3e8ff',EYE='#ff922b',ED='#d9480f',CT='#fff',CTD='#dee2e6',SH='#63e6be',SHD='#20c997',BL='#ffa8a8',LQ='#69db7c',BB='#d3f9d8',GL='#e7f5ff',GF='#fab005',GS='#495057',LB='#fff',BT='#9c6ade'
|
||||
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 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+1,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-9,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+5,y+2,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+9,y+8,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()
|
||||
}
|
||||
const fl=c=>{c.beginPath();c.moveTo(188,98);c.lineTo(188,128);c.lineTo(160,196);c.quadraticCurveTo(156,212,172,212);c.lineTo(222,212);c.quadraticCurveTo(238,212,234,196);c.lineTo(206,128);c.lineTo(206,98);c.closePath()}
|
||||
export default(c,t,i)=>{
|
||||
const bob=2*sin(T*t*2),wv=sin(T*t*3)*3,bk=i==11
|
||||
const H=f=>{c.save();c.translate(100,160+bob*.5);c.rotate(-.04);c.scale(.68,.68);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,212,96,204,150);c.lineTo(216,168);c.lineTo(194,172);c.lineTo(198,188);c.lineTo(58,188);c.lineTo(62,172);c.lineTo(40,168);c.lineTo(52,150);c.bezierCurveTo(44,96,56,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=CT;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,400);c.lineTo(216,400);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SH;c.beginPath();c.moveTo(108,190);c.lineTo(128,260);c.lineTo(148,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SHD;c.lineWidth=6;c.beginPath();c.moveTo(128,206);c.lineTo(120,214);c.lineTo(128,250);c.lineTo(136,214);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=CT;c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*22,188),c.lineTo(128+d*6,290),c.lineTo(128+d*30,240),c.lineTo(128+d*42,250),c.lineTo(128+d*40,196),c.closePath(),c.fill(),c.stroke()
|
||||
c.strokeStyle=CTD;c.lineWidth=5;c.beginPath();c.moveTo(78,300);c.lineTo(74,230);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=SKIN;c.lineWidth=9;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
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=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,150,x+15,142),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,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle='#c92a2a';c.beginPath();c.moveTo(110,164);c.quadraticCurveTo(130,170,150,160);c.quadraticCurveTo(148,184,130,184);c.quadraticCurveTo(112,184,110,164);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(112,166);c.quadraticCurveTo(130,171,148,162);c.lineTo(147,169);c.quadraticCurveTo(130,177,113,172);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(62,150)
|
||||
c.lineTo(48,138);c.lineTo(62,128);c.bezierCurveTo(46,70,88,36,128,36);c.bezierCurveTo(168,36,210,70,194,128);c.lineTo(210,136);c.lineTo(190,148)
|
||||
c.quadraticCurveTo(186,118,178,100);c.lineTo(172,116);c.lineTo(160,94);c.lineTo(150,112);c.lineTo(140,88);c.lineTo(130,110)
|
||||
c.lineTo(118,86);c.lineTo(110,112);c.lineTo(96,92);c.lineTo(90,114);c.lineTo(80,100)
|
||||
c.quadraticCurveTo(68,120,62,150);c.closePath();c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(118,40);c.quadraticCurveTo(100,4,132,8);c.quadraticCurveTo(116,18,132,38);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(134,38);c.quadraticCurveTo(150,10,170,20);c.quadraticCurveTo(150,24,146,40);c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;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()
|
||||
ds(c,16,9,GS,()=>{c.moveTo(68,82);c.quadraticCurveTo(128,54,188,82)})
|
||||
for(const x of[102,154]){c.fillStyle=GF;c.lineWidth=7;c.beginPath();c.arc(x,68,21,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=GL;c.lineWidth=4;c.beginPath();c.arc(x,68,13,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.arc(x,68,8,PI*1.1,PI*1.5);c.stroke();c.strokeStyle='#111'}
|
||||
c.lineWidth=7;c.beginPath();c.moveTo(123,68);c.lineTo(133,68);c.stroke()
|
||||
})
|
||||
c.save();fl(c);c.clip()
|
||||
c.fillStyle='#fff';c.fillRect(150,90,100,130)
|
||||
c.fillStyle=LQ;c.beginPath();c.moveTo(150,158+wv);c.bezierCurveTo(180,150-wv,200,166+wv,250,156-wv);c.lineTo(250,220);c.lineTo(150,220);c.closePath();c.fill()
|
||||
c.lineWidth=5;c.beginPath();c.moveTo(150,158+wv);c.bezierCurveTo(180,150-wv,200,166+wv,250,156-wv);c.stroke()
|
||||
c.fillStyle=BB;c.lineWidth=3;for(let k=0;k<4;k++){const p=(t*2+k/4)%1,x=180+k*12+4*sin(T*p*2+k),y=206-50*p;c.beginPath();c.arc(x,y,3+3*p,0,T);c.fill();c.stroke()}
|
||||
c.fillStyle='rgba(255,255,255,.55)';c.beginPath();c.roundRect(166,170,8,30,4);c.fill();c.beginPath();c.roundRect(191,102,6,22,3);c.fill()
|
||||
c.restore()
|
||||
c.lineWidth=7;fl(c);c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.roundRect(182,90,30,10,5);c.fill();c.stroke()
|
||||
c.fillStyle=LB;c.lineWidth=5;c.beginPath();c.arc(197,186,17,0,T);c.fill();c.stroke()
|
||||
for(const[w,s]of[[9,'#111'],[4,BT]]){c.lineWidth=w;c.strokeStyle=s;c.beginPath();c.moveTo(192,200);c.lineTo(192,180);c.bezierCurveTo(192,170,205,170,204,178);c.bezierCurveTo(204,184,198,185,195,185);c.bezierCurveTo(207,185,208,197,198,197);c.bezierCurveTo(195,197,193,195,192,193);c.stroke()}
|
||||
c.strokeStyle='#111'
|
||||
for(let k=0;k<3;k++){const p=(t+k/3)%1,x=197+10*sin(T*p+k*2),y=84-50*p,r=4+6*p
|
||||
if(p<.82){c.fillStyle=BB;c.lineWidth=4;c.beginPath();c.arc(x,y,r,0,T);c.fill();c.stroke();c.fillStyle='#fff';c.beginPath();c.arc(x-r*.35,y-r*.35,r*.3,0,T);c.fill()}
|
||||
else{const q=(p-.82)/.18;c.save();c.globalAlpha=1-q*q;c.fillStyle='#e9ecef';c.lineWidth=4;c.beginPath();for(const[dx,dy,s]of[[-8,2,8],[0,-5,10],[8,2,8]])c.moveTo(x+dx+s*(.6+q*.6),y+dy),c.arc(x+dx,y+dy,s*(.6+q*.6),0,T);c.stroke();c.fill()
|
||||
c.lineWidth=4;c.beginPath();for(let a=0;a<6;a++){const b=a*PI/3;c.moveTo(x+cos(b)*(12+10*q),y+sin(b)*(12+10*q));c.lineTo(x+cos(b)*(17+12*q),y+sin(b)*(17+12*q))}c.stroke();c.restore()}}
|
||||
ds(c,22,13,CT,()=>{c.moveTo(144,192);c.quadraticCurveTo(170,154,186,136)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(192,128,12,11,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3.5;c.beginPath();for(const y of[124,131])c.moveTo(199,y),c.lineTo(205,y);c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
// long deep purple haired girl rocking happily while hugging an open book to her chest, its long red ribbon bookmark flutters up beside her and a little star twinkles at the tip
|
||||
const{sin,cos,PI,max,hypot}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#845ef7',HD='#5f3dc4',HL='#e5dbff',EYE='#fab005',ED='#e67700',TOP='#fff3bf',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',RB='#ff6b6b',RD='#c92a2a',CV='#63e6be',PG='#fffdf5',LN='#ced4da',ST='#ffd43b'
|
||||
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 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+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const star=(c,x,y,r,a)=>{c.save();c.translate(x,y);c.rotate(a);c.beginPath();for(let k=0;k<10;k++){const q=k%2?r*.45:r,b=k*PI/5-PI/2;c.lineTo(cos(b)*q,sin(b)*q)}c.closePath();c.fill();c.stroke();c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const rk=.05*sin(T*t),hap=t>=.375&&t<.625,N=24
|
||||
const pts=[...Array(N+1)].map((_,k)=>{const s=k/N,u=1-s,bx=u*u*128+2*u*s*220+s*s*224,by=u*u*190+2*u*s*204+s*s*84,tx=2*u*(220-128)+2*s*(224-220),ty=2*u*(204-190)+2*s*(84-204),l=hypot(tx,ty),w=13*s*sin(T*(s*1.3-t*2))
|
||||
return[bx-ty/l*w,by+tx/l*w,-ty/l,tx/l,15*cos(s*(T+.9*sin(T*t)))]})
|
||||
c.save();c.translate(128,330);c.rotate(rk);c.translate(-128,-330)
|
||||
const H=f=>{c.save();c.translate(128,154);c.rotate(hap?-.05:0);c.scale(.7,.7);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(204,34,220,110,222,200);c.lineTo(226,330);c.lineTo(30,330);c.lineTo(34,200);c.bezierCurveTo(36,110,52,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.moveTo(128,206),c.quadraticCurveTo(128+d*16,188,128+d*30,190),c.quadraticCurveTo(128+d*30,210,128,216),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,208,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(hap){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(i==13){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,149,x+15,142),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,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO;c.beginPath()
|
||||
if(hap)c.moveTo(114,164),c.quadraticCurveTo(128,168,142,164),c.quadraticCurveTo(140,184,128,184),c.quadraticCurveTo(116,184,114,164),c.fill(),c.stroke(),c.save(),c.clip(),c.fillStyle=TG,c.beginPath(),c.ellipse(128,186,8,6,0,0,T),c.fill(),c.restore()
|
||||
else c.moveTo(118,168),c.quadraticCurveTo(123,174,128,169),c.quadraticCurveTo(133,174,138,168),c.stroke()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(56,290)
|
||||
c.bezierCurveTo(40,74,88,36,128,36);c.bezierCurveTo(168,36,216,74,200,290);c.lineTo(180,290)
|
||||
c.quadraticCurveTo(186,200,180,160);c.lineTo(178,104);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110)
|
||||
c.quadraticCurveTo(132,96,124,88);c.quadraticCurveTo(118,102,110,108);c.quadraticCurveTo(104,96,94,94);c.quadraticCurveTo(90,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.lineTo(76,160);c.quadraticCurveTo(70,200,76,290);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*60,180),c.quadraticCurveTo(128+d*62,230,128+d*58,280),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=RB;c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(170,58),c.quadraticCurveTo(170+d*26,36,170+d*32,58),c.quadraticCurveTo(170+d*24,72,170,58),c.fill(),c.stroke()
|
||||
c.beginPath();c.arc(170,58,8,0,T);c.fill();c.stroke()
|
||||
})
|
||||
c.fillStyle=CV;c.lineWidth=6;c.beginPath();c.moveTo(128,196);c.quadraticCurveTo(94,180,52,188);c.lineTo(50,262);c.lineTo(206,262);c.lineTo(204,188);c.quadraticCurveTo(162,180,128,196);c.fill();c.stroke()
|
||||
for(const d of[-1,1]){c.fillStyle=PG;c.lineWidth=5;c.beginPath();c.moveTo(128,198);c.quadraticCurveTo(128+d*30,184,128+d*68,190);c.lineTo(128+d*68,262);c.lineTo(128,262);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=LN;c.lineWidth=4;c.beginPath();for(let k=0;k<4;k++){const y=208+k*12;c.moveTo(128+d*12,y+2);c.quadraticCurveTo(128+d*32,y-4,128+d*(k==3?40:56),y)}c.stroke();c.strokeStyle='#111'}
|
||||
c.lineWidth=5;c.beginPath();c.moveTo(128,198);c.lineTo(128,262);c.stroke()
|
||||
const L=pts.map(([x,y,nx,ny,w])=>[x+nx*w,y+ny*w]),R=pts.map(([x,y,nx,ny,w])=>[x-nx*w,y-ny*w]),[ex,ey]=pts[N],[qx,qy]=pts[N-1],el=hypot(ex-qx,ey-qy),tip=[ex-(ex-qx)/el*16,ey-(ey-qy)/el*16]
|
||||
for(let k=0;k<N;k++){c.fillStyle=pts[k][4]+pts[k+1][4]>0?RB:RD;c.beginPath();c.moveTo(...L[k]);c.lineTo(...L[k+1]);c.lineTo(...(k==N-1?tip:R[k+1]));c.lineTo(...R[k]);c.closePath();c.fill();c.lineWidth=1;c.strokeStyle=c.fillStyle;c.stroke()}
|
||||
c.fillStyle=pts[N][4]>0?RB:RD;c.beginPath();c.moveTo(...R[N-1]);c.lineTo(...tip);c.lineTo(...R[N]);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle='#111';c.lineWidth=5;c.beginPath();c.moveTo(...L[0]);for(const p of L.slice(1))c.lineTo(...p);c.lineTo(...tip);for(const p of R.slice().reverse())c.lineTo(...p);c.closePath();c.stroke()
|
||||
for(const d of[-1,1]){ds(c,26,16,TOP,()=>{c.moveTo(128+d*82,262);c.lineTo(128+d*72,230)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(128+d*68,222,11,13,d*.3,0,T);c.fill();c.stroke()}
|
||||
c.restore()
|
||||
c.fillStyle=ST;c.lineWidth=4;const s=.6+.4*max(0,sin(T*t*2));star(c,pts[N][0]-6,pts[N][1]-30,17*s,T*t/5)
|
||||
const s2=max(0,sin(T*(t+.5)*2));if(s2>.15)star(c,34,64,12*s2,0)
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
// leaf green haired girl in a straw hat tracks a little buzzing red bug looping figure eights, swoops her butterfly net and bags it with a cheer, then it wriggles free and buzzes off again
|
||||
const{sin,cos,PI,max,min,atan2}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#94d82d',HD='#5c940d',HL='#f4fce3',EYE='#ff922b',ED='#d9480f',SH='#ffd8a8',SHD='#f08c00',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',HAT='#ffe066',HTD='#e8b93c',RIB='#4dabf7',POLE='#c0805a',RIM='#ff8787',BUG='#ff6b6b',SP='#ffe066'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return x*x*(3-2*x)}
|
||||
const eye=(c,x,y,d,gx,gy)=>{
|
||||
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+gx,y+gy,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+gx,y+gy-10,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+7,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()
|
||||
}
|
||||
const star=(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()}
|
||||
const bug=(c,x,y,a,i,mad)=>{c.save();c.translate(x,y);c.rotate(a)
|
||||
c.lineWidth=3;for(const d of[-1,1])for(const k of[-1,0,1])c.beginPath(),c.moveTo(k*6,d*7),c.lineTo(k*6+(i%2?2:-2),d*15),c.stroke()
|
||||
c.fillStyle='rgba(231,245,255,.85)';c.lineWidth=3;const w=i%2?1:.55;for(const d of[-1,1])c.beginPath(),c.ellipse(-2,d*12*w,11,7*w,d*.5,0,T),c.fill(),c.stroke()
|
||||
c.fillStyle=BUG;c.lineWidth=4;c.beginPath();c.ellipse(-2,0,13,11,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();c.moveTo(-15,0);c.lineTo(10,0);c.stroke();c.fillStyle='#111';for(const[sx,sy]of[[-6,-5],[-6,5],[2,-6],[2,6]])c.beginPath(),c.arc(sx,sy,2.4,0,T),c.fill()
|
||||
c.fillStyle='#343a40';c.lineWidth=4;c.beginPath();c.arc(13,0,7.5,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=2.5;for(const d of[-1,1])c.beginPath(),c.moveTo(17,d*4),c.quadraticCurveTo(24,d*6,26,d*12),c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(15,d*3,2.4,0,T),c.fill()
|
||||
if(mad){c.strokeStyle='#fff';c.lineWidth=2;c.beginPath();c.moveTo(10,-6);c.lineTo(14,-3);c.moveTo(10,6);c.lineTo(14,3);c.stroke()}
|
||||
c.restore()}
|
||||
const PX=132,PY=198,PL=100,BX=204,BY=92,lis=u=>[BX-30*sin(T*u),BY-28*sin(2*T*u)]
|
||||
export default(c,t,i)=>{
|
||||
const fly=t<.5||t>=.88,th=t<.42?-1.6+.06*sin(T*t*2/.42):t<.52?-1.6+.76*ez(t,.42,.52):t<.88?-.84+.06*ez(t,.52,.62):-.78-.82*ez(t,.88,1)
|
||||
const hx=PX+cos(th)*PL,hy=PY+sin(th)*PL,dx=cos(th),dy=sin(th),got=t>=.52&&t<.88,sw=t>=.42&&t<.52
|
||||
let bx,by,ba;if(t<.5){const u=t/.5;[bx,by]=lis(u);const[nx,ny]=lis(u+.01);ba=atan2(ny-by,nx-bx)}else if(t>=.88){const u=ez(t,.88,1);bx=hx+dx*24+(BX-hx-dx*24)*u;by=hy+dy*24+40+(BY-hy-dy*24-40)*u;ba=-1.2+1.2*u}else{bx=hx+dx*24+5+4*sin(T*t*6);by=hy+dy*24+42;ba=PI/2+.4*sin(T*t*5)}
|
||||
const gx=max(-5,min(6,(bx-70)/14)),gy=max(-6,min(4,(by-150)/14))
|
||||
const H=f=>{c.save();c.translate(66,212);c.scale(.66,.66);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,206,150);c.quadraticCurveTo(210,180,196,190);c.lineTo(60,190);c.quadraticCurveTo(46,180,50,150);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=SH;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.moveTo(128,208),c.lineTo(128+d*32,188),c.lineTo(128+d*40,214),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SH;c.lineWidth=6;for(const d of[-1,1])c.beginPath(),c.roundRect(128+d*38-16,236,32,30,4),c.fill(),c.stroke(),c.beginPath(),c.moveTo(128+d*38-16,246),c.lineTo(128+d*38+16,246),c.stroke()
|
||||
c.strokeStyle=SHD;c.lineWidth=5;c.beginPath();c.moveTo(128,212);c.lineTo(128,330);c.stroke();c.strokeStyle='#111'
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(got){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else eye(c,103,140,-1,gx,gy),eye(c,153,140,1,gx,gy)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(got){c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,188,128,188);c.quadraticCurveTo(114,188,112,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,190,9,7,0,0,T);c.fill();c.restore()}
|
||||
else if(sw||t>=.88){c.beginPath();c.ellipse(128,171,7,8,0,0,T);c.fill();c.stroke()}
|
||||
else{c.beginPath();c.moveTo(118,168);c.quadraticCurveTo(128,174,138,168);c.stroke();c.fillStyle=TG;c.lineWidth=4;c.beginPath();c.ellipse(122,174,5,6,.3,0,T);c.fill();c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(62,176)
|
||||
c.bezierCurveTo(48,74,88,36,128,36);c.bezierCurveTo(168,36,208,74,194,176);c.quadraticCurveTo(186,170,184,180);c.quadraticCurveTo(184,140,178,104)
|
||||
c.quadraticCurveTo(168,102,162,112);c.quadraticCurveTo(156,96,144,92);c.quadraticCurveTo(140,106,130,112);c.quadraticCurveTo(124,96,112,92);c.quadraticCurveTo(108,104,100,110)
|
||||
c.quadraticCurveTo(94,98,86,98);c.quadraticCurveTo(82,108,80,112);c.quadraticCurveTo(72,140,74,180);c.quadraticCurveTo(68,170,62,176);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.save();c.translate(128,60);c.rotate(-.1)
|
||||
c.fillStyle=HAT;c.lineWidth=8;c.beginPath();c.ellipse(0,8,96,20,0,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(-54,10);c.bezierCurveTo(-54,-48,54,-48,54,10);c.quadraticCurveTo(0,20,-54,10);c.fill();c.stroke()
|
||||
c.fillStyle=RIB;c.beginPath();c.moveTo(-54,-2);c.quadraticCurveTo(0,8,54,-2);c.lineTo(54,10);c.quadraticCurveTo(0,20,-54,10);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HTD;c.lineWidth=4;c.beginPath();c.ellipse(0,8,80,13,0,.1*PI,.9*PI);c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=6;c.beginPath();c.arc(0,4,38,PI*1.2,PI*1.42);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle='#fff';c.lineWidth=5;for(let k=0;k<5;k++)c.beginPath(),c.ellipse(40+cos(k*T/5)*8,0+sin(k*T/5)*8,6,6,0,0,T),c.fill(),c.stroke()
|
||||
c.fillStyle=SP;c.beginPath();c.arc(40,0,5,0,T);c.fill();c.stroke();c.restore()
|
||||
})
|
||||
if(fly){c.fillStyle='#adb5bd';for(let k=1;k<=4;k++){const u=t<.5?t/.5-k*.035:0;if(t<.5&&u>0){const[x,y]=lis(u);c.beginPath();c.arc(x,y,3-k*.4,0,T);c.fill()}}}
|
||||
ds(c,11,5,POLE,()=>{c.moveTo(PX-dx*20,PY-dy*20);c.lineTo(hx,hy)})
|
||||
const cx=hx+dx*24,cy=hy+dy*24,[tx,ty]=sw?[cx-34,cy+36]:t>=.88?[cx+20,cy+56]:[cx+4+(got?4*sin(T*t*6):0),cy+64]
|
||||
const sk=()=>{c.beginPath();c.moveTo(cx-24,cy);c.bezierCurveTo(cx-30,cy+26,tx-18,ty,tx,ty);c.bezierCurveTo(tx+18,ty,cx+30,cy+26,cx+24,cy);c.arc(cx,cy,24,0,PI,true);c.closePath()}
|
||||
c.save();sk();c.fillStyle='rgba(255,255,255,.6)';c.fill()
|
||||
sk();c.clip();c.strokeStyle='rgba(134,142,150,.8)';c.lineWidth=2;c.beginPath();for(let k=-70;k<70;k+=9)c.moveTo(cx+k-50,cy-30),c.lineTo(cx+k+50,cy+70),c.moveTo(cx+k+50,cy-30),c.lineTo(cx+k-50,cy+70);c.stroke();c.restore()
|
||||
if(got)bug(c,bx,by,ba,i,1)
|
||||
c.lineWidth=5;c.beginPath();c.moveTo(cx-24,cy);c.bezierCurveTo(cx-30,cy+26,tx-18,ty,tx,ty);c.bezierCurveTo(tx+18,ty,cx+30,cy+26,cx+24,cy);c.stroke()
|
||||
ds(c,10,5,RIM,()=>{c.arc(cx,cy,24,0,T)})
|
||||
if(fly)bug(c,bx,by,ba,i,t>=.88)
|
||||
if(sw)for(const k of[0,1,2])ds(c,7,3,'#fff',()=>{c.arc(PX,PY,PL+18+k*10,th-.7+k*.1,th-.2+k*.1)})
|
||||
if(got){const q=(t-.52)/.36;c.fillStyle=SP;c.lineWidth=3.5;for(const[x,y,o]of[[cx-30,cy-34,0],[cx-42,cy+8,.15],[cx-4,cy-44,.3]]){const r=12*sin(PI*min(1,max(0,(q-o)/.55)));if(r>1)star(c,x,y,r)}}
|
||||
ds(c,22,13,SH,()=>{c.moveTo(104,250);c.quadraticCurveTo(116,214,PX-4,PY+8)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(PX,PY,12,12,0,0,T);c.fill();c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// black haired girl with a purple streak peeking over a laptop eyes the live webcam suspiciously, slides the privacy cover shut so the screen flips to camera off, then gives a sly wink
|
||||
const{sin,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#3b3f45',HD='#212529',HL='#868e96',ST='#b197fc',STD='#7950f2',EYE='#9775fa',ED='#5f3dc4',BL='#ffa8a8',LP='#dee2e6',LPD='#adb5bd',SCR='#a5d8ff',OFF='#ced4da',RED='#ff6b6b',CV='#b197fc',SP='#ffd43b'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return x*x*(3-2*x)}
|
||||
const eye=(c,x,y,d,gx,gy,h)=>{
|
||||
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+gx,y+gy,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+gx,y+gy-10,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+7,2,0,T);c.fill()
|
||||
if(h){c.fillStyle=SKIN;c.fillRect(x-16,y-20,32,20*h)}c.restore()
|
||||
c.lineWidth=6;c.beginPath();if(h)c.moveTo(x-16,y-20+20*h),c.lineTo(x+16,y-20+20*h),c.lineTo(x+d*21,y-24+20*h);else 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()
|
||||
}
|
||||
const cam=(c,x,y,on)=>{c.save();c.translate(x,y);c.fillStyle=on?'#fff':'#f1f3f5';c.lineWidth=6;c.beginPath();c.roundRect(-36,-20,48,40,9);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(12,-6);c.lineTo(32,-18);c.lineTo(32,18);c.lineTo(12,6);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=on?RED:LPD;c.lineWidth=4;c.beginPath();c.arc(-24,-8,5,0,T);c.fill();c.stroke()
|
||||
if(!on)ds(c,12,6,RED,()=>{c.moveTo(-40,-26);c.lineTo(38,26)});c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const sh=ez(t,.24,.42)-ez(t,.8,.88),on=sh<.5,hu=ez(t,.08,.16)-ez(t,.86,.96),wk=t>=.48&&t<.8,cx=158-32*sh
|
||||
const H=f=>{c.save();c.translate(104,130+2*sin(T*t));c.rotate(wk?-.08:.04*hu);c.scale(.7,.7);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=10;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,216,100,212,240);c.lineTo(44,240);c.bezierCurveTo(40,100,56,34,128,34);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(wk){c.lineWidth=9;c.beginPath();c.moveTo(88,146);c.quadraticCurveTo(103,132,118,146);c.stroke();eye(c,153,140,1,0,2,.35)}
|
||||
else{const g=on?[6,6]:[0,2],h=on?.45:0;eye(c,103,140,-1,...g,h);eye(c,153,140,1,...g,h)}
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*46,164,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*46+k-2,168),c.lineTo(128+d*46+k+2,160),c.stroke()
|
||||
c.lineWidth=7;if(wk){c.beginPath();c.moveTo(112,168);c.quadraticCurveTo(120,174,128,168);c.quadraticCurveTo(136,174,146,164);c.stroke()}
|
||||
else if(on){c.beginPath();c.moveTo(116,172);c.lineTo(138,170);c.stroke()}
|
||||
else{c.beginPath();c.moveTo(116,168);c.quadraticCurveTo(128,176,140,168);c.stroke()}
|
||||
c.lineWidth=10;c.fillStyle=HAIR;c.beginPath();c.moveTo(60,240)
|
||||
c.bezierCurveTo(44,74,88,36,128,36);c.bezierCurveTo(168,36,212,74,196,240);c.lineTo(180,240)
|
||||
c.quadraticCurveTo(186,140,178,104);c.quadraticCurveTo(170,106,164,114);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110)
|
||||
c.quadraticCurveTo(132,96,124,88);c.quadraticCurveTo(118,102,110,108);c.quadraticCurveTo(104,96,94,94);c.quadraticCurveTo(90,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,140,76,240);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=ST;c.beginPath();c.moveTo(150,48);c.quadraticCurveTo(170,70,164,114);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110);c.quadraticCurveTo(144,70,130,44);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;for(const[s,e]of[[1.24,1.36],[1.44,1.52]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle=STD;c.beginPath();c.moveTo(146,62);c.quadraticCurveTo(154,76,152,88);c.stroke();c.strokeStyle='#111'
|
||||
})
|
||||
c.fillStyle=LP;c.lineWidth=7;c.beginPath();c.roundRect(22,126,212,124,16);c.fill();c.stroke()
|
||||
c.fillStyle=on?SCR:OFF;c.lineWidth=5;c.beginPath();c.roundRect(36,152,184,88,6);c.fill();c.stroke()
|
||||
cam(c,128,197,on);if(on&&i%4<2)c.fillStyle=RED,c.lineWidth=3.5,c.beginPath(),c.arc(52,166,6,0,T),c.fill(),c.stroke()
|
||||
c.fillStyle='#495057';c.lineWidth=4;c.beginPath();c.roundRect(110,131,64,15,7.5);c.fill();c.stroke()
|
||||
c.fillStyle='#212529';c.beginPath();c.arc(126,138.5,6,0,T);c.fill();c.fillStyle='#74c0fc';c.beginPath();c.arc(124,136.5,2,0,T);c.fill()
|
||||
c.fillStyle=on?RED:'#868e96';c.lineWidth=3;c.beginPath();c.arc(98,138.5,4,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=CV;c.lineWidth=4;c.beginPath();c.roundRect(cx-15,130,30,17,8);c.fill();c.stroke()
|
||||
c.strokeStyle=STD;c.lineWidth=2.5;c.beginPath();for(const k of[-5,0,5])c.moveTo(cx+k,134),c.lineTo(cx+k,143);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=LPD;c.lineWidth=7;c.beginPath();c.moveTo(16,250);c.lineTo(240,250);c.lineTo(254,264);c.lineTo(2,264);c.closePath();c.fill();c.stroke()
|
||||
if(hu>.3){const hx=cx+24,hy=118+(1-hu)*34
|
||||
c.save();c.beginPath();c.rect(0,0,256,128);c.clip()
|
||||
ds(c,26,16,STD,()=>{c.moveTo(hx+34,hy+44);c.lineTo(hx+8,hy+4)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy,14,12,-.3,0,T);c.fill();c.stroke();c.restore()
|
||||
if(hu>.6){ds(c,13,7,SKIN,()=>{c.moveTo(hx-6,hy+4);c.lineTo(cx+8,138)});c.fillStyle=SKIN;c.lineWidth=4.5;for(const k of[0,1])c.beginPath(),c.ellipse(hx+5+k*9,128,5,7,0,0,T),c.fill(),c.stroke()}}
|
||||
if(wk){const q=(t-.48)/.32,r=sin(PI*min(1,q*1.5));if(r>.1){c.fillStyle=SP;c.lineWidth=3.5;const x=34,y=50;c.beginPath();c.moveTo(x,y-14*r);for(const[a,b]of[[1,0],[0,1],[-1,0],[0,-1]])c.quadraticCurveTo(x+(a+b)*2*r,y+(b-a)*2*r,x+a*14*r,y+b*14*r);c.fill();c.stroke()}}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
// orange haired girl clicking a big "not a robot" captcha checkbox, a robot antenna boings out of her head blinking while she sweats nervously at the spinner, then the box ticks green and she beams in relief
|
||||
const{sin,cos,PI,max,min,atan2,hypot}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#ff922b',HD='#d9480f',HL='#ffe8cc',EYE='#22b8cf',ED='#0b7285',TOP='#d0ebff',TD='#4dabf7',BL='#ffa8a8',CRD='#f8f9fa',GR='#ced4da',BLU='#4c6ef5',OK='#40c057',ANT='#adb5bd',BUL='#ff6b6b',SW='#a5d8ff',CLIP='#b197fc',SP='#ffe066',MO='#c92a2a'
|
||||
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 ease=x=>x<=0?0:x>=1?1:x*x*(3-2*x),L=(a,b,u)=>a+(b-a)*u
|
||||
const eye=(c,x,y,d,g)=>{
|
||||
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+g,y+2,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+g,y-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+g,y+3,4.5,6.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+g-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+g+5,y+8,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()
|
||||
}
|
||||
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()}
|
||||
const BX=42,BY=50
|
||||
export default(c,t,i)=>{
|
||||
const ck=i>=9&&i<15,wait=i>=4&&i<9,hap=ck,clk=i==3,nv=wait
|
||||
const ant=i<4||i>9?0:i==4?1.3:i==9?.4:1,reach=i<1?.3:i<3?ease(i/3):i<5?1:i<9?.62:i<14?.5:.4
|
||||
c.fillStyle=CRD;c.lineWidth=6;c.beginPath();c.roundRect(8,14,156,72,12);c.fill();c.stroke()
|
||||
c.fillStyle=clk?'#e9ecef':'#fff';c.lineWidth=5;c.beginPath();c.roundRect(BX-19,BY-19,38,38,7);c.fill();c.stroke()
|
||||
c.fillStyle=GR;for(const[y,w]of[[40,48],[58,32]])c.beginPath(),c.roundRect(70,y-5,w,10,5),c.fill()
|
||||
c.save();c.translate(138,44);c.rotate(T*t/4)
|
||||
ds(c,9,4.5,BLU,()=>{c.arc(0,0,12,.2,PI*1.5)});c.fillStyle=BLU;c.lineWidth=3.5;c.beginPath();c.moveTo(4,-17);c.lineTo(13,-11);c.lineTo(2,-6);c.closePath();c.fill();c.stroke();c.restore()
|
||||
c.fillStyle=GR;for(const k of[0,1,2])c.beginPath(),c.roundRect(126+k*9,64,6,6,2),c.fill()
|
||||
if(wait){c.save();c.translate(BX,BY);c.rotate(T*(i-4)/5*1.2);ds(c,8,4,BLU,()=>{c.arc(0,0,10,0,PI*1.4)});c.restore()}
|
||||
if(ck){const p=i==9?1.35:1;c.save();c.translate(BX,BY);c.scale(p,p);ds(c,12,6,OK,()=>{c.moveTo(-12,0);c.lineTo(-3,10);c.lineTo(15,-14)});c.restore()
|
||||
c.fillStyle=SP;c.lineWidth=3;for(const[x,y,o]of[[16,102,0],[90,100,.5],[184,28,.25]]){const r=sin(PI*min(1,max(0,(i-9)/5-o*.3)));if(r>.1)spark(c,x,y,12*r)}}
|
||||
if(clk)for(const a of[-2.4,-1.6,-.8])ds(c,6,2.5,'#fff',()=>{c.moveTo(BX+cos(a)*26,BY+sin(a)*26);c.lineTo(BX+cos(a)*36,BY+sin(a)*36)})
|
||||
const H=f=>{c.save();c.translate(182,210);c.scale(.66,.66);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,214,96,206,156);c.quadraticCurveTo(206,182,188,184);c.lineTo(68,184);c.quadraticCurveTo(50,182,50,156);c.bezierCurveTo(42,96,56,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,380);c.lineTo(216,380);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(102,192);c.quadraticCurveTo(128,222,154,192);c.lineTo(160,206);c.quadraticCurveTo(128,240,96,206);c.closePath();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(hap){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else{const g=nv?(i%2?-4:4):-4;eye(c,103,140,-1,g);eye(c,153,140,1,g)}
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(hap){c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,190,144,164);c.closePath();c.fill();c.stroke()}
|
||||
else if(nv){c.fillStyle='#fff';c.beginPath();c.roundRect(116,162,24,13,5);c.fill();c.stroke();c.lineWidth=4;c.beginPath();c.moveTo(118,168.5);c.lineTo(138,168.5);c.stroke()}
|
||||
else{c.beginPath();c.moveTo(118,168);c.quadraticCurveTo(128,174,138,168);c.stroke()}
|
||||
if(ant>0){const h=48*ant;ds(c,10,5,ANT,()=>{c.moveTo(128,40);for(let k=1;k<=8;k++)c.lineTo(128+(k%2?-8:8)*(k<8?1:0),40-h*k/8)})
|
||||
c.fillStyle=i%4<2?BUL:'#fff';c.lineWidth=8;c.beginPath();c.arc(128,32-h,13,0,T);c.fill();c.stroke()
|
||||
if(i%4<2)for(const a of[-2.4,-1.57,-.74])ds(c,8,3.5,'#fff',()=>{c.moveTo(128+cos(a)*22,32-h+sin(a)*22);c.lineTo(128+cos(a)*32,32-h+sin(a)*32)})}
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(68,154)
|
||||
c.bezierCurveTo(52,74,88,36,128,36);c.bezierCurveTo(168,36,204,74,188,154)
|
||||
c.quadraticCurveTo(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,124,68,154);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;for(const[a,e]of[[1.24,1.36],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke();c.strokeStyle='#111'
|
||||
if(ant>0){c.fillStyle=ANT;c.lineWidth=8;c.beginPath();c.ellipse(128,42,16,8,0,0,T);c.fill();c.stroke()}
|
||||
c.fillStyle=CLIP;c.lineWidth=7;for(const y of[78,96])c.beginPath(),c.roundRect(160,y-5,28,10,5),c.fill(),c.stroke()
|
||||
if(nv){c.fillStyle=SW;c.lineWidth=7;for(const[x,y,s]of[[222,92,1],[34,104,.8],[230,128,.65]])c.beginPath(),c.moveTo(x,y-20*s),c.quadraticCurveTo(x+13*s,y,x,y+8*s),c.quadraticCurveTo(x-13*s,y,x,y-20*s),c.fill(),c.stroke()}
|
||||
})
|
||||
const tx=L(96,BX+4,reach),ty=L(150,BY+6,reach)+(clk?3:0),sx=146,sy=226,a=atan2(ty-sy,tx-sx),hx=tx-cos(a)*24,hy=ty-sin(a)*24
|
||||
ds(c,20,11,TOP,()=>{c.moveTo(sx,sy);c.quadraticCurveTo(L(sx,hx,.4),max(sy,hy)+10,hx-cos(a)*6,hy-sin(a)*6)})
|
||||
c.save();c.translate(hx,hy);c.rotate(a);c.fillStyle=SKIN;c.lineWidth=5
|
||||
c.beginPath();c.roundRect(4,-6,26,12,6);c.fill();c.stroke();c.beginPath();c.ellipse(0,2,14,12,0,0,T);c.fill();c.stroke();c.restore()
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
// arcade girl with a neon magenta side ponytail gripping a joystick and frantically mashing a red button while a "CONTINUE?" screen counts 9 down to 0, pupils shaking and sweat flying
|
||||
const{sin,PI}=Math,T=2*PI
|
||||
export const frames=20,delay=100
|
||||
const SKIN='#ffe3d1',HAIR='#f03ec8',HD='#a61e8a',HL='#ffd6f5',EYE='#22b8cf',ED='#0b7285',JK='#845ef7',TRIM='#66d9e8',BL='#ffa8a8',FR='#da77f2',SC='#1b1d3a',OFF='#2c2f5a',LIT='#ffe066',HOT='#ff6b6b',DK='#4dabf7',DKD='#1c7ed6',RD='#ff6b6b',RDD='#e03131',SW='#a5d8ff',STAR='#ffd43b'
|
||||
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 W=24,G=8,V=44,SEG=[[-W+G,-V,W-G,-V],[W,-V+G,W,-G],[W,G,W,V-G],[-W+G,V,W-G,V],[-W,G,-W,V-G],[-W,-V+G,-W,-G],[-W+G,0,W-G,0]],DG=['abcdef','bc','abged','abgcd','fgbc','afgcd','afgedc','abc','abcdefg','abcdfg']
|
||||
const eye=(c,x,y,d,jx)=>{
|
||||
c.fillStyle='#fff';c.beginPath();c.ellipse(x,y,15,18,0,0,T);c.fill()
|
||||
c.save();c.beginPath();c.ellipse(x,y,15,18,0,0,T);c.clip();c.beginPath();c.ellipse(x+jx,y+3,8.5,10,0,0,T);c.fillStyle=EYE;c.fill();c.lineWidth=2.5;c.stroke()
|
||||
c.fillStyle=ED;c.beginPath();c.ellipse(x+jx,y-4,9,5,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.arc(x+jx,y+4,3.5,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+jx-3,y-1,2.5,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y,15,18,0,0,T);c.stroke()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(x-17,y-8);c.quadraticCurveTo(x,y-22,x+17,y-8);c.moveTo(x+d*16,y-9);c.lineTo(x+d*22,y-14);c.stroke()
|
||||
}
|
||||
export default(c,t,i)=>{
|
||||
const n=9-(i>>1),tk=i%2==0,dn=i%2==1,jx=dn?1.5:-1.5,col=n<4?HOT:LIT,sw=sin(T*t*5)*.08
|
||||
c.lineWidth=6;c.fillStyle=FR;c.beginPath();c.roundRect(6,8,120,196,16);c.fill();c.stroke()
|
||||
c.fillStyle=SC;c.lineWidth=5;c.beginPath();c.roundRect(16,18,100,176,9);c.fill();c.stroke()
|
||||
c.fillStyle=n<4&&tk?HOT:'#fff';c.font='bold 14px DejaVu Sans';c.textAlign='center';c.fillText('CONTINUE?',66,44)
|
||||
c.save();c.translate(66,116);const s=tk?1.08:1;c.scale(s,s)
|
||||
c.strokeStyle=OFF;c.lineWidth=13;c.beginPath();for(const[a,b,e,f]of SEG)c.moveTo(a,b),c.lineTo(e,f);c.stroke()
|
||||
const on=SEG.filter((_,k)=>DG[n].includes('abcdefg'[k]))
|
||||
for(const[w,s]of[[15,col],[4,'rgba(255,255,255,.75)']]){c.strokeStyle=s;c.lineWidth=w;c.beginPath();for(const[a,b,e,f]of on)c.moveTo(a,b),c.lineTo(e,f);c.stroke()}
|
||||
c.restore();c.strokeStyle='#111'
|
||||
c.fillStyle='rgba(255,255,255,.18)';c.beginPath();c.moveTo(24,26);c.lineTo(52,26);c.lineTo(24,62);c.closePath();c.fill()
|
||||
const H=f=>{c.save();c.translate(182+jx,156);c.scale(.64,.64);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.save();c.translate(190,66);c.rotate(sw);c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(-6,-6);c.bezierCurveTo(36,-14,42,70,32,140);c.quadraticCurveTo(26,160,12,152);c.bezierCurveTo(26,100,22,44,-6,14);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(12,10);c.bezierCurveTo(26,40,28,90,22,130);c.stroke();c.strokeStyle='#111';c.restore()
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,210,96,202,150);c.lineTo(54,150);c.bezierCurveTo(46,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=JK;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(104,190);c.lineTo(128,236);c.lineTo(152,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=TRIM;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*24,188),c.lineTo(128+d*4,240),c.lineTo(128+d*12,250),c.lineTo(128+d*38,196),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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()
|
||||
eye(c,103,140,-1,dn?2:-2);eye(c,153,140,1,dn?2:-2)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*46,164,12,7,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*46+k-2,168),c.lineTo(128+d*46+k+2,160),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle='#c92a2a';c.beginPath();c.moveTo(112,170);c.quadraticCurveTo(128,162,144,170);c.quadraticCurveTo(144,186+(dn?2:0),128,186+(dn?2:0));c.quadraticCurveTo(112,186+(dn?2:0),112,170);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(116,169);c.quadraticCurveTo(128,163,140,169);c.lineTo(138,174);c.quadraticCurveTo(128,170,118,174);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,160)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,204,74,190,146)
|
||||
c.quadraticCurveTo(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(74,132,80,166);c.quadraticCurveTo(72,170,66,160);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;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;c.beginPath();c.moveTo(88,122);c.lineTo(112,114);c.moveTo(144,114);c.lineTo(168,122);c.stroke()
|
||||
c.fillStyle=TRIM;c.lineWidth=7;c.beginPath();c.ellipse(190,64,11,16,.5,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=STAR;c.lineWidth=6;c.beginPath();for(let k=0;k<10;k++){const a=-PI/2+k*PI/5,r=k%2?7:16;c.lineTo(86+r*Math.cos(a),66+r*sin(a))}c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SW;c.lineWidth=6;for(const[x,y,o]of[[208,92,0],[200,130,.5]]){const p=(t*4+o)%1,dx=22*p,yy=y-10*p+30*p*p;c.save();c.globalAlpha=1-p*p;c.beginPath();c.moveTo(x+dx,yy-16);c.quadraticCurveTo(x+dx+11,yy,x+dx,yy+6);c.quadraticCurveTo(x+dx-11,yy,x+dx,yy-16);c.fill();c.stroke();c.restore()}
|
||||
})
|
||||
c.lineWidth=6;c.fillStyle=DK;c.beginPath();c.moveTo(-8,224);c.lineTo(264,224);c.lineTo(264,262);c.lineTo(-8,262);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=DKD;c.beginPath();c.moveTo(-8,242);c.lineTo(264,242);c.lineTo(264,262);c.lineTo(-8,262);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=STAR;c.lineWidth=4;c.beginPath();c.moveTo(-4,251);c.lineTo(260,251);c.stroke();c.strokeStyle='#111'
|
||||
c.lineWidth=4;for(const[x,f]of[[30,STAR],[62,'#69db7c'],[94,'#74c0fc']])c.fillStyle='#343a40',c.beginPath(),c.ellipse(x,234,11,5,0,0,T),c.fill(),c.stroke(),c.fillStyle=f,c.beginPath(),c.ellipse(x,231,9,4.5,0,0,T),c.fill(),c.stroke()
|
||||
const sx=140+(dn?-7:7),by=dn?228:220
|
||||
c.fillStyle='#343a40';c.lineWidth=5;c.beginPath();c.ellipse(140,234,17,6,0,0,T);c.fill();c.stroke()
|
||||
ds(c,10,4,'#adb5bd',()=>{c.moveTo(140,234);c.lineTo(sx,204)})
|
||||
c.fillStyle='#343a40';c.lineWidth=5;c.beginPath();c.ellipse(226,235,22,8,0,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=RDD;c.beginPath();c.moveTo(208,234);c.lineTo(208,by);c.lineTo(244,by);c.lineTo(244,234);c.quadraticCurveTo(226,242,208,234);c.fill();c.stroke()
|
||||
c.fillStyle=RD;c.beginPath();c.ellipse(226,by,18,6.5,0,0,T);c.fill();c.stroke()
|
||||
ds(c,22,13,JK,()=>{c.moveTo(154,182);c.quadraticCurveTo(154,204,sx+8,216)})
|
||||
ds(c,22,13,JK,()=>{c.moveTo(212,182);c.quadraticCurveTo(232,186,226,by-(dn?12:26))})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(sx+5,214,11,10,0,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.ellipse(226,by-(dn?8:22),13,9,0,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=RD;c.lineWidth=5;c.beginPath();c.arc(sx,196,12,0,T);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(sx-4,192,3.5,0,T);c.fill()
|
||||
if(dn)for(const a of[-2.6,-2,-1.45,-.95])ds(c,7,3,'#fff',()=>{c.moveTo(226+30*Math.cos(a),212+20*sin(a));c.lineTo(226+40*Math.cos(a),212+28*sin(a))})
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
// chocolate haired maid girl with twin braids holding out a plate of choc chip cookies with a hopeful smile, a cursor clicks the pulsing green accept button and she lights up
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#8d5b3c',HD='#5c3a22',HL='#e9cbb1',EYE='#20c997',ED='#087f5b',DR='#91a7ff',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',RB='#ff6b6b',CK='#e8b07a',CD='#c47f45',CH='#5c3a22',RIM='#a5d8ff',OK='#51cf66',OD='#2f9e44',SP='#ffd43b'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return 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,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-10,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+7,2,0,T);c.fill()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const braid=(c,d,a)=>{c.save();c.translate(128+d*64,146);c.rotate(a);c.lineWidth=7
|
||||
c.fillStyle=HAIR;c.beginPath();c.moveTo(-8,104);c.quadraticCurveTo(-16,122,-10,132);c.quadraticCurveTo(-4,124,0,134);c.quadraticCurveTo(4,124,10,132);c.quadraticCurveTo(16,122,8,104);c.closePath();c.fill();c.stroke()
|
||||
for(let k=3;k>=0;k--){c.fillStyle=HAIR;c.beginPath();c.ellipse(0,14+k*24,16-k,15,0,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=4;c.beginPath();c.moveTo(-8,8+k*24);c.quadraticCurveTo(-2,20+k*24,9,16+k*24);c.stroke();c.strokeStyle='#111';c.lineWidth=7}
|
||||
c.fillStyle=RB;c.lineWidth=5;c.beginPath();c.moveTo(0,106);c.lineTo(-15,98);c.lineTo(-15,114);c.closePath();c.moveTo(0,106);c.lineTo(15,98);c.lineTo(15,114);c.closePath();c.fill();c.stroke()
|
||||
c.beginPath();c.arc(0,106,5,0,T);c.fill();c.stroke();c.restore()}
|
||||
const cookie=(c,x,y,r)=>{c.fillStyle=CK;c.lineWidth=4.5;c.beginPath();c.arc(x,y,r,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle=CD;c.lineWidth=3;c.beginPath();c.arc(x,y,r-5,PI*.15,PI*.6);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=CH;for(const[a,b]of[[-.4,-.35],[.35,-.2],[-.1,.3],[.45,.4],[-.5,.25]])c.beginPath(),c.ellipse(x+a*r,y+b*r,r*.13,r*.11,a,0,T),c.fill()}
|
||||
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 hap=t>=.5&&t<.9,pr=ez(t,.44,.5)-ez(t,.52,.6),cu=ez(t,.2,.46)-ez(t,.72,.94),bob=sin(T*t*2),of=.5+.5*sin(T*t-PI/2)
|
||||
const px=108,py=222-4*of-3*(hap?sin(PI*min(1,(t-.5)/.2)):0),ps=1+.08*of,blink=i==3
|
||||
const H=f=>{c.save();c.translate(102,172+2*bob);c.rotate(.04*sin(T*t));c.scale(.76,.76);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,96,204,158);c.lineTo(52,158);c.bezierCurveTo(44,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=DR;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(92,240);c.lineTo(164,240);c.lineTo(170,330);c.lineTo(86,330);c.closePath();c.fill();c.stroke()
|
||||
for(const d of[-1,1]){for(let k=0;k<3;k++){const x=128+d*(40+k*8),y=236-k*14;c.beginPath();c.arc(x+d*4,y,7,0,T);c.fill();c.stroke()}
|
||||
ds(c,16,7,'#fff',()=>{c.moveTo(128+d*34,240);c.lineTo(128+d*58,200)})}
|
||||
c.fillStyle='#fff';c.lineWidth=7;for(const d of[-1,1])c.beginPath(),c.moveTo(128,204),c.quadraticCurveTo(128+d*18,186,128+d*32,190),c.quadraticCurveTo(128+d*30,208,128,214),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle=RB;c.beginPath();c.moveTo(128,210);c.lineTo(114,200);c.lineTo(114,220);c.closePath();c.moveTo(128,210);c.lineTo(142,200);c.lineTo(142,220);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=8;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(hap){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(blink){c.lineWidth=7;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,149,x+15,142),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,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO;c.beginPath()
|
||||
if(hap)c.moveTo(112,163),c.quadraticCurveTo(128,168,144,163),c.quadraticCurveTo(142,188,128,188),c.quadraticCurveTo(114,188,112,163)
|
||||
else c.moveTo(118,166),c.quadraticCurveTo(128,170,138,166),c.quadraticCurveTo(136,178,128,178),c.quadraticCurveTo(120,178,118,166)
|
||||
c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,hap?189:179,8,6,0,0,T);c.fill();c.restore()
|
||||
for(const d of[-1,1])braid(c,d,d*(-.06+.05*sin(T*t*2+d)))
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,160)
|
||||
c.bezierCurveTo(48,74,88,36,128,36);c.bezierCurveTo(168,36,208,74,192,160);c.quadraticCurveTo(184,152,178,160)
|
||||
c.quadraticCurveTo(184,124,178,104);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,90);c.quadraticCurveTo(114,102,106,108);c.quadraticCurveTo(100,96,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(72,124,78,160);c.quadraticCurveTo(72,152,64,160);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;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;c.beginPath();c.moveTo(90,114);c.lineTo(112,108);c.moveTo(144,108);c.lineTo(166,114);c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=7;for(let k=0;k<7;k++){const a=PI*(1.18+k*.107);c.beginPath();c.arc(128+cos(a)*70,112+sin(a)*70,11,0,T);c.fill();c.stroke()}
|
||||
c.beginPath();c.arc(128,112,62,PI*1.16,PI*1.84);c.arc(128,112,76,PI*1.84,PI*1.16,true);c.closePath();c.fill();c.stroke()
|
||||
})
|
||||
const bx=210,by=92,bs=(1+.05*sin(T*t*4)*(1-ez(t,.42,.5)+ez(t,.88,.98)))*(1-.12*pr)
|
||||
if(!hap&&t<.48){const p=(t*4)%1;c.strokeStyle=OK;c.lineWidth=6*(1-p);c.beginPath();c.roundRect(bx-40-10*p,by-28-10*p,80+20*p,56+20*p,20+6*p);c.stroke();c.strokeStyle='#111'}
|
||||
c.save();c.translate(bx,by);c.scale(bs,bs)
|
||||
c.fillStyle=OD;c.lineWidth=6;c.beginPath();c.roundRect(-38,-20,76,50,18);c.fill();c.stroke()
|
||||
c.fillStyle=hap?'#8ce99a':OK;c.beginPath();c.roundRect(-38,-28+7*pr,76,48,18);c.fill();c.stroke()
|
||||
ds(c,11,5,'#fff',()=>{c.moveTo(-15,-5+7*pr);c.lineTo(-4,6+7*pr);c.lineTo(16,-14+7*pr)})
|
||||
c.restore()
|
||||
if(hap){const q=min(1,(t-.5)/.3);c.fillStyle=SP;c.lineWidth=3.5;for(const[x,y,o]of[[166,44,0],[246,50,.15],[244,140,.3],[176,138,.1]]){const r=sin(PI*min(1,max(0,q*1.3-o)));if(r>.1)spark(c,x,y,14*r)}}
|
||||
c.save();c.translate(px,py);c.scale(ps,ps)
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.ellipse(0,8,66,18,0,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle=RIM;c.lineWidth=4;c.beginPath();c.ellipse(0,6,50,11,0,0,T);c.stroke();c.strokeStyle='#111'
|
||||
cookie(c,0,-20,23);cookie(c,-32,-6,21);cookie(c,32,-6,21)
|
||||
c.restore()
|
||||
for(const d of[-1,1]){const hx=px+d*62*ps,hy=py+10
|
||||
ds(c,26,16,DR,()=>{c.moveTo(px+d*72,262);c.lineTo(hx+d*4,hy+12)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy,11,12,0,0,T);c.fill();c.stroke()}
|
||||
if(cu>.01){const x=290-74*cu,y=250-136*cu+5*pr,s=1-.15*pr;c.save();c.translate(x,y);c.scale(s,s);c.fillStyle='#fff';c.lineWidth=5
|
||||
c.beginPath();c.moveTo(0,0);c.lineTo(0,30);c.lineTo(8,23);c.lineTo(14,35);c.lineTo(20,32);c.lineTo(14,21);c.lineTo(25,21);c.closePath();c.fill();c.stroke();c.restore()}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
// mint haired girl with hair clips flashing a V sign, the copy icon duplicates and an identical clone pops in beside her with a poof, both wink in sync, then the clone poofs away
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#63e6be',HD='#0ca678',HL='#e6fcf5',EYE='#f06595',ED='#a61e4d',TOP='#ffc9c9',TD='#fa5252',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',CL=['#ffd43b','#74c0fc'],CP='#74c0fc',CPD='#1c7ed6'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return x*x*(3-2*x)}
|
||||
const bk=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)))-1;return 1+2.7*x**3+1.7*x**2}
|
||||
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+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const girl=(c,x,y,s,w,b)=>{c.save();c.translate(x,y);c.scale(s,s);c.rotate(w?.06:0);c.translate(-128,-186);c.lineWidth=10
|
||||
c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,214,96,208,200);c.quadraticCurveTo(200,214,186,208);c.lineTo(70,208);c.quadraticCurveTo(56,214,48,200);c.bezierCurveTo(42,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.moveTo(128,204),c.quadraticCurveTo(128+d*20,186,128+d*36,190),c.quadraticCurveTo(128+d*34,212,128,216),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,208,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle=TD;c.beginPath();c.moveTo(128,214);c.lineTo(112,204);c.lineTo(112,226);c.closePath();c.moveTo(128,214);c.lineTo(144,204);c.lineTo(144,226);c.closePath();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()
|
||||
eye(c,153,140,1)
|
||||
if(w){c.lineWidth=8;c.beginPath();c.moveTo(90,130);c.lineTo(112,141);c.lineTo(90,152);c.stroke()}else if(b){c.lineWidth=8;c.beginPath();c.moveTo(88,142);c.quadraticCurveTo(103,149,118,142);c.stroke()}else eye(c,103,140,-1)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO;c.beginPath();c.moveTo(114,164);c.quadraticCurveTo(128,170,142,164);c.quadraticCurveTo(140,184,128,184);c.quadraticCurveTo(116,184,114,164);c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,185,8,6,0,0,T);c.fill();c.restore()
|
||||
if(w){c.fillStyle=TG;c.beginPath();c.moveTo(130,180);c.quadraticCurveTo(132,196,140,194);c.quadraticCurveTo(146,186,140,178);c.fill();c.stroke()}
|
||||
c.lineWidth=10;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,200)
|
||||
c.bezierCurveTo(46,74,88,36,128,36);c.bezierCurveTo(168,36,210,74,192,200);c.quadraticCurveTo(184,190,178,198)
|
||||
c.quadraticCurveTo(186,130,178,104);c.quadraticCurveTo(170,106,164,114);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110)
|
||||
c.quadraticCurveTo(132,96,124,88);c.quadraticCurveTo(118,102,110,108);c.quadraticCurveTo(104,96,94,94);c.quadraticCurveTo(90,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,130,78,198);c.quadraticCurveTo(72,190,64,200);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;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=7;for(const[k,[cx,cy,a]]of[[78,82,-.9],[90,70,-.7]].entries())c.fillStyle=CL[k],c.save(),c.translate(cx,cy),c.rotate(a),c.beginPath(),c.roundRect(-20,-6,40,12,6),c.fill(),c.stroke(),c.restore()
|
||||
c.fillStyle=CL[0];c.save();c.translate(170,74);for(const a of[.8,-.8])c.save(),c.rotate(a),c.beginPath(),c.roundRect(-16,-6,32,12,6),c.fill(),c.stroke(),c.restore();c.restore()
|
||||
const hy=150-(w?8:0)
|
||||
ds(c,30,20,TOP,()=>{c.moveTo(186,330);c.quadraticCurveTo(226,270,208,hy+26)})
|
||||
for(const a of[-.25,.2])ds(c,18,10,SKIN,()=>{c.moveTo(206,hy+8);c.lineTo(206+sin(a)*36,hy+8-cos(a)*36)})
|
||||
c.fillStyle=SKIN;c.lineWidth=7;c.beginPath();c.ellipse(208,hy+16,17,16,0,0,T);c.fill();c.stroke()
|
||||
c.restore()}
|
||||
const poof=(c,x,y,p)=>{if(p<=0||p>=1)return;const r=10+16*sin(PI*p);c.fillStyle='#fff';c.lineWidth=5;for(let k=0;k<6;k++){const a=k*T/6+.3,d=22+30*p;c.beginPath();c.arc(x+cos(a)*d,y+sin(a)*d*.8,r*(1-p*.5),0,T);c.fill();c.stroke()}}
|
||||
export default(c,t,i)=>{
|
||||
const cs=bk(t,.3,.44)*(1-ez(t,.84,.94)),w=t>=.47&&t<.8,o=12*(ez(t,.08,.24)-ez(t,.86,.98)),pu=ez(t,.08,.16)-ez(t,.16,.26)
|
||||
c.save();c.translate(128,42);c.scale(1+.15*pu,1+.15*pu)
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.roundRect(-20-o*.5,-20-o*.5,40,40,8);c.fill();c.stroke()
|
||||
c.fillStyle=CP;c.beginPath();c.roundRect(-20+o*.5,-20+o*.5,40,40,8);c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();for(const y of[-8,0,8])c.moveTo(-10+o*.5,y+o*.5),c.lineTo((y>0?2:10)+o*.5,y+o*.5);c.stroke();c.strokeStyle='#111';c.restore()
|
||||
const by=184-3*sin(T*t*2)
|
||||
girl(c,64,by,.6,w,i==2)
|
||||
if(cs>.01)girl(c,192,by+(1-cs)*30,.6*cs,w,i==2)
|
||||
poof(c,192,150,(t-.24)/.24);poof(c,192,150,(t-.82)/.16)
|
||||
if(t>=.4&&t<.5){c.save();c.setLineDash([8,6]);c.lineDashOffset=-i*7;c.strokeStyle=CPD;c.lineWidth=4;c.beginPath();c.roundRect(136,78,114,174,8);c.stroke();c.restore()}
|
||||
if(w){const q=(t-.47)/.33;c.fillStyle='#ffd43b';c.lineWidth=3.5;for(const[x,y,d]of[[24,66,0],[128,92,.2],[234,60,.4]]){const r=sin(PI*min(1,max(0,(q-d)*1.6)));if(r>.1){c.beginPath();c.moveTo(x,y-12*r);for(const[a,b]of[[1,0],[0,1],[-1,0],[0,-1]])c.quadraticCurveTo(x+(a+b)*1.8*r,y+(b-a)*1.8*r,x+a*12*r,y+b*12*r);c.fill();c.stroke()}}}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// silver haired girl flicking a big dark mode toggle, the backdrop fades from a sunny sky to a starry night with a moon and she drowses in a striped nightcap, then flicks it back to day
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=95
|
||||
const SKIN='#ffe3d1',HAIR='#e9ecef',HD='#adb5bd',HL='#fff',EYE='#4dabf7',ED='#1864ab',PJ='#ffc9de',PD='#f06595',BL='#ffa8a8',SKY='#a5d8ff',NT='#25285a',SUN='#ffd43b',SD='#fab005',MN='#ffec99',TK='#fff',TD='#5c7cfa',CAP='#748ffc',SP='#ffe066'
|
||||
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 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+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
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()
|
||||
}
|
||||
const moon=(c,x,y,s)=>{c.save();c.translate(x,y);c.scale(s,s);c.beginPath();c.arc(0,0,18,.395,4.711);c.arc(9,-6,15,4.069,1.037,true);c.closePath();c.restore()}
|
||||
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 s=ease((t-.4)/.1)-ease((t-.9)/.1),dk=s>.5,kx=46+48*s,pr=(t>.36&&t<.46)||t>.86?1:0,cp=dk?min(1,(t-.45)/.08):0
|
||||
const box=()=>{c.beginPath();c.roundRect(8,8,240,240,30)}
|
||||
c.lineWidth=7;box();c.fillStyle=SKY;c.fill()
|
||||
c.save();box();c.clip()
|
||||
c.globalAlpha=s;c.fillStyle=NT;c.fillRect(0,0,256,256);c.globalAlpha=1
|
||||
c.fillStyle='#fff';c.globalAlpha=1-s;c.lineWidth=5;c.beginPath();c.moveTo(108,52);c.quadraticCurveTo(102,38,118,36);c.quadraticCurveTo(124,20,142,26);c.quadraticCurveTo(160,24,158,40);c.quadraticCurveTo(170,44,164,52);c.closePath();c.fill();c.stroke()
|
||||
c.save();c.translate(54,58);c.rotate(T*t/8);for(let k=0;k<8;k++){const a=k*T/8;ds(c,9,4,SUN,()=>{c.moveTo(cos(a)*28,sin(a)*28);c.lineTo(cos(a)*38,sin(a)*38)})}c.restore()
|
||||
c.fillStyle=SUN;c.lineWidth=6;c.beginPath();c.arc(54,58,21,0,T);c.fill();c.stroke()
|
||||
c.globalAlpha=s;c.fillStyle=MN;c.lineWidth=6;moon(c,54,58,1.3);c.fill();c.stroke()
|
||||
c.fillStyle=SP;c.lineWidth=3;for(const[x,y,o]of[[118,34,0],[150,62,.3],[96,96,.6],[26,118,.15],[214,30,.8]]){const r=.55+.45*sin(T*(t*2+o));spark(c,x,y,9*r)}
|
||||
c.globalAlpha=1
|
||||
const H=f=>{c.save();c.translate(178,200);c.scale(.64,.64);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(206,34,220,100,214,170);c.lineTo(226,330);c.lineTo(30,330);c.lineTo(42,170);c.bezierCurveTo(36,100,50,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=PJ;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,380);c.lineTo(216,380);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.moveTo(128,206),c.quadraticCurveTo(128+d*20,186,128+d*36,194),c.quadraticCurveTo(128+d*30,214,128,206),c.fill(),c.stroke()
|
||||
c.fillStyle=PD;for(const y of[236,270])c.beginPath(),c.arc(128,y,6,0,T),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(dk){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,140),c.quadraticCurveTo(x,150,x+15,140),c.stroke()}
|
||||
else if(i==2){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-14,142),c.quadraticCurveTo(x,150,x+14,142),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,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle='#c92a2a';if(dk)c.beginPath(),c.ellipse(128,172,5,7,0,0,T),c.fill(),c.stroke();else c.beginPath(),c.moveTo(114,164),c.quadraticCurveTo(128,184,142,164),c.closePath(),c.fill(),c.stroke()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,170)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,190,170)
|
||||
c.quadraticCurveTo(186,120,180,104);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,76,104);c.quadraticCurveTo(68,128,66,170);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;for(const x of[84,172])c.beginPath(),c.moveTo(x,120),c.quadraticCurveTo(x+(x<128?-8:8),140,x+(x<128?-6:6),164),c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;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'
|
||||
if(cp>0){c.save();c.translate(128,70);c.scale(cp,cp);c.lineWidth=9
|
||||
c.fillStyle=CAP;c.beginPath();c.moveTo(-64,6);c.quadraticCurveTo(-60,-50,0,-56);c.quadraticCurveTo(-60,-70,-96,-20);c.quadraticCurveTo(-60,-40,-66,4);c.fill()
|
||||
c.beginPath();c.moveTo(-64,6);c.quadraticCurveTo(-60,-50,0,-56);c.quadraticCurveTo(60,-50,64,6);c.closePath();c.fill()
|
||||
c.save();c.clip();c.strokeStyle='#fff';c.lineWidth=12;for(const x of[-34,0,34])c.beginPath(),c.moveTo(x-20,10),c.lineTo(x+16,-60),c.stroke();c.restore()
|
||||
c.beginPath();c.moveTo(-64,6);c.quadraticCurveTo(-60,-50,0,-56);c.quadraticCurveTo(-60,-70,-96,-20);c.moveTo(0,-56);c.quadraticCurveTo(60,-50,64,6);c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.roundRect(-70,-4,140,22,11);c.fill();c.stroke();c.beginPath();c.arc(-98,-16,13,0,T);c.fill();c.stroke();c.restore()}
|
||||
})
|
||||
if(dk)for(const[o,x0]of[[0,0],[.5,14]]){const p=((t-.5)*4+o)%1;c.globalAlpha=min(1,(1-p)*3);c.lineWidth=4;c.strokeStyle='#fff';c.beginPath();const x=214+x0*.6+10*p,y=110-40*p,z=7+3*p;c.moveTo(x-z,y-z);c.lineTo(x+z,y-z);c.lineTo(x-z,y+z);c.lineTo(x+z,y+z);c.stroke();c.globalAlpha=1}
|
||||
c.strokeStyle='#111'
|
||||
c.fillStyle=dk?TD:TK;c.lineWidth=6;c.beginPath();c.roundRect(20,150,100,52,26);c.fill();c.stroke()
|
||||
c.fillStyle=dk?'#dee2e6':SUN;c.beginPath();c.arc(kx,176,20,0,T);c.fill();c.stroke()
|
||||
if(dk){c.fillStyle=MN;c.lineWidth=3.5;moon(c,kx-1,177,.55);c.fill();c.stroke()}
|
||||
else{c.fillStyle='#fff';c.lineWidth=3.5;c.beginPath();c.arc(kx,176,7,0,T);c.fill();c.stroke()}
|
||||
const hx=kx+30+6*(1-pr),hy=190+3*(1-pr)
|
||||
ds(c,20,11,PJ,()=>{c.moveTo(152,250);c.quadraticCurveTo(150,212,hx+16,hy+6)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.save();c.translate(hx,hy);c.rotate(-.35);c.beginPath();c.roundRect(-18,-5,20,10,5);c.fill();c.stroke();c.beginPath();c.ellipse(8,4,12,11,0,0,T);c.fill();c.stroke();c.restore()
|
||||
c.restore()
|
||||
c.lineWidth=7;box();c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
// midnight blue haired girl in pajamas and a sleep mask dozing while hugging a pillow, breathing slowly as Zzz drift up and a moon "DND" hanger sways on the doorknob beside her
|
||||
const{sin,cos,PI}=Math,T=2*PI
|
||||
export const frames=16,delay=110
|
||||
const SKIN='#ffe3d1',HAIR='#3b4a8c',HD='#232c5e',HL='#91a7ff',PJ='#a5d8ff',PW='#f3f0ff',PWD='#d0bfff',MK='#f783ac',MKD='#d6336c',BL='#ffa8a8',DR='#e8b07a',DRD='#c47f45',KN='#fcc419',HG='#fff3bf',NV='#364fc7',MN='#ffd43b',RD='#fa5252',ZC='#91a7ff'
|
||||
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 zed=(c,x,y,s)=>{c.save();c.translate(x,y);c.scale(s,s);c.rotate(-.15);ds(c,11,5,ZC,()=>{c.moveTo(-9,-9);c.lineTo(9,-9);c.lineTo(-9,9);c.lineTo(9,9)});c.restore()}
|
||||
export default(c,t)=>{
|
||||
const br=sin(T*t),sw=.13*sin(T*t+.6)
|
||||
c.lineWidth=6;c.fillStyle=DR;c.beginPath();c.roundRect(170,-20,110,300,8);c.fill();c.stroke()
|
||||
c.strokeStyle=DRD;c.lineWidth=5;c.beginPath();c.roundRect(188,10,80,96,6);c.roundRect(188,128,80,150,6);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=KN;c.lineWidth=5;c.beginPath();c.roundRect(186,74,22,46,8);c.fill();c.stroke()
|
||||
c.save();c.translate(197,86);c.rotate(sw)
|
||||
c.fillStyle=HG;c.lineWidth=6;c.beginPath();c.roundRect(-30,-16,60,112,12);c.moveTo(9,0);c.arc(0,0,9,0,T,true);c.fill('evenodd');c.stroke()
|
||||
c.lineWidth=4;c.beginPath();c.moveTo(0,-9);c.lineTo(0,-16);c.stroke()
|
||||
c.fillStyle=NV;c.lineWidth=5;c.beginPath();c.arc(0,34,19,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=MN;c.lineWidth=4;c.beginPath();c.arc(-2,34,12,PI*.3,PI*1.7);c.quadraticCurveTo(-8,34,4,43);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(10,26,2.5,0,T);c.arc(12,40,1.8,0,T);c.fill()
|
||||
c.beginPath();for(const x of[-18,0,18]){if(x)c.moveTo(x-5,64),c.lineTo(x-5,82),c.lineTo(x-1,82),c.quadraticCurveTo(x+6,82,x+6,73),c.quadraticCurveTo(x+6,64,x-1,64),c.closePath();else c.moveTo(x-5,82),c.lineTo(x-5,64),c.lineTo(x+5,82),c.lineTo(x+5,64)}
|
||||
for(const[w,s]of[[9,'#111'],[4,RD]])c.lineWidth=w,c.strokeStyle=s,c.stroke()
|
||||
c.restore();c.strokeStyle='#111'
|
||||
c.fillStyle=KN;c.lineWidth=5;c.beginPath();c.arc(197,86,7,0,T);c.fill();c.stroke()
|
||||
const H=f=>{c.save();c.translate(92,176+2*br);c.rotate(-.16);c.scale(.64,.64);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(204,34,216,110,212,190);c.quadraticCurveTo(214,240,200,260);c.lineTo(56,260);c.quadraticCurveTo(42,240,44,190);c.bezierCurveTo(40,110,52,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=PJ;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,400);c.lineTo(216,400);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=7;for(const d of[-1,1])c.beginPath(),c.moveTo(128,206),c.quadraticCurveTo(128+d*22,190,128+d*34,192),c.quadraticCurveTo(128+d*40,214,128,222),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.lineWidth=9;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,208,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
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.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,166,13,7,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-5,0,5])c.beginPath(),c.moveTo(128+d*44+k-2,169),c.lineTo(128+d*44+k+2,162),c.stroke()
|
||||
c.fillStyle='#c92a2a';c.lineWidth=5;c.beginPath();c.ellipse(128,173,5+br,4+1.5*br,0,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=MK;c.lineWidth=7;c.beginPath();c.moveTo(70,128);c.bezierCurveTo(74,112,116,112,128,122);c.bezierCurveTo(140,112,182,112,186,128);c.bezierCurveTo(190,150,160,160,128,148);c.bezierCurveTo(96,160,66,150,70,128);c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=5;for(const x of[100,156]){c.beginPath();c.arc(x,128,12,PI*.15,PI*.85);c.stroke();for(const a of[.35,.65])c.beginPath(),c.moveTo(x+12*cos(PI*a),128+12*sin(PI*a)),c.lineTo(x+18*cos(PI*a),128+18*sin(PI*a)),c.stroke()}
|
||||
c.strokeStyle='#111'
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(62,190)
|
||||
c.bezierCurveTo(44,74,88,36,128,36);c.bezierCurveTo(168,36,212,74,194,190);c.quadraticCurveTo(186,194,180,188)
|
||||
c.quadraticCurveTo(184,130,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,140,76,188);c.quadraticCurveTo(70,194,62,190);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;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()
|
||||
ds(c,14,7,MKD,()=>{c.moveTo(60,124);c.lineTo(72,128);c.moveTo(184,128);c.lineTo(196,124)})
|
||||
c.fillStyle=MN;c.lineWidth=6;c.beginPath();for(let k=0;k<10;k++){const a=-PI/2+k*PI/5,r=k%2?7:15;c.lineTo(84+r*cos(a),70+r*sin(a))}c.closePath();c.fill();c.stroke()
|
||||
})
|
||||
c.fillStyle=PW;c.lineWidth=6;c.beginPath();c.moveTo(26,208+br);c.quadraticCurveTo(92,198+br,158,210+br);c.quadraticCurveTo(166,238,158,266);c.lineTo(26,266);c.quadraticCurveTo(18,238,26,208+br);c.fill();c.stroke()
|
||||
c.strokeStyle=PWD;c.lineWidth=4;c.beginPath();c.moveTo(44,238+br);c.quadraticCurveTo(92,230+br,140,240+br);c.stroke();c.strokeStyle='#111'
|
||||
for(const[x,y,e,d]of[[36,194,70,1],[150,190,118,-1]])ds(c,22,13,PJ,()=>{c.moveTo(x,y+br);c.quadraticCurveTo(x+d*2,y+28+br,e-d*6,222+br)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;for(const x of[72,116])c.beginPath(),c.ellipse(x,220+br,11,9,0,0,T),c.fill(),c.stroke()
|
||||
for(const o of[0,1/3,2/3]){const p=(t+o)%1;zed(c,128+30*p+5*sin(p*T),118-96*p,.45+.6*sin(PI*p))}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// auburn haired girl in round glasses scribbling lines onto a document with a giant pencil, eraser end wiggling and tongue out, then she beams and slides the finished page away
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=18,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#c0583c',HD='#86321f',HL='#f6d0c2',EYE='#40c057',ED='#2b8a3e',TOP='#66d9e8',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',GL='#e7f5ff',PB='#ffd43b',PBL='#ffe066',PBD='#f59f00',WO='#ffd8a8',GR='#495057',FE='#ced4da',ER='#ff8fab',PA='#fff',PL='#dee2e6',INK='#5c7cfa',SP='#ffd43b'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return 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-4,y+5,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x-4,y-5,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x-4,y+5,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x-5,y+7,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-9,y-1,4.5,0,T);c.fill();c.beginPath();c.arc(x,y+12,2,0,T);c.fill()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const LY=[154,180,206],LW=[72,78,52],X0=28,SX=72,SY=192,ln=(k,p)=>[X0+LW[k]*p,LY[k]+3*sin(p*LW[k]*.45)]
|
||||
const sheet=(c,x,y,a,n,p)=>{c.save();c.translate(x,y);c.rotate(a)
|
||||
c.fillStyle=PA;c.lineWidth=6;c.beginPath();c.moveTo(-60,-74);c.lineTo(38,-74);c.lineTo(60,-52);c.lineTo(60,82);c.lineTo(-60,82);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=PL;c.lineWidth=5;c.beginPath();c.moveTo(38,-74);c.lineTo(38,-52);c.lineTo(60,-52);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=INK;c.lineWidth=4.5;for(let k=0;k<n;k++){const q=k<n-1?1:p;c.beginPath();for(let s=0;s<=q+1e-6;s+=.04){const[px,py]=ln(k,min(s,q));c.lineTo(px-SX,py-SY)}c.stroke()}
|
||||
c.strokeStyle='#111';c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const W=[[.02,.22],[.28,.48],[.54,.7]],wk=W.findIndex(([a,b])=>t>=a&&t<b),hap=t>=.72&&t<.92,sl=ez(t,.8,.98),n=W.filter(([a])=>t>=a).length,p=n?min(1,(t-W[n-1][0])/(W[n-1][1]-W[n-1][0])):0
|
||||
const tp=t=>{for(const[k,[a,b]]of W.entries()){if(t<a){const[px,py]=k?ln(k-1,1):[X0,LY[0]-10],[nx,ny]=ln(k,0),q=k?ez(t,W[k-1][1],a):t/a;return[px+(nx-px)*q,py+(ny-py)*q-(k?14*sin(PI*q):0)]}if(t<b)return ln(k,(t-a)/(b-a))}
|
||||
const[ex,ey]=ln(2,1),q=ez(t,.9,1);return[ex+(X0-ex)*q,ey-24*ez(t,.7,.76)+(LY[0]-10-ey+24)*q]}
|
||||
const tip=tp(t),th=.18+(wk>=0?.07*sin(p*LW[wk]*.45):0),hx=tip[0]+4*cos(th)+40*sin(th),hy=tip[1]+4*sin(th)-40*cos(th)
|
||||
sheet(c,SX,SY,0,0,0)
|
||||
if(sl<1)sheet(c,SX-200*sl,SY+20*sl,-.5*sl,n,p)
|
||||
const H=f=>{c.save();c.translate(192,150+(hap?-3:0));c.rotate(hap?.04:-.06);c.scale(.62,.62);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=10;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,96,206,190);c.lineTo(50,190);c.bezierCurveTo(44,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=HAIR;c.beginPath();c.arc(150,24,30,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=6;c.beginPath();c.arc(150,24,16,PI*1.1,PI*1.9);c.moveTo(136,32);c.quadraticCurveTo(150,42,164,30);c.stroke();c.strokeStyle='#111';c.lineWidth=10
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(100,190);c.lineTo(128,240);c.lineTo(156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.lineTo(128,212);c.lineTo(142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(hap){c.lineWidth=10;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(i==5){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,144),c.quadraticCurveTo(x,151,x+15,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*46,166,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*46+k-2,170),c.lineTo(128+d*46+k+2,162),c.stroke()
|
||||
c.lineWidth=7;c.fillStyle=MO;c.beginPath()
|
||||
if(hap)c.moveTo(112,166),c.quadraticCurveTo(128,171,144,166),c.quadraticCurveTo(142,190,128,190),c.quadraticCurveTo(114,190,112,166),c.fill(),c.stroke(),c.save(),c.clip(),c.fillStyle=TG,c.beginPath(),c.ellipse(128,191,8,6,0,0,T),c.fill(),c.restore()
|
||||
else{c.moveTo(114,170);c.quadraticCurveTo(126,176,140,168);c.stroke();c.fillStyle=TG;c.beginPath();c.moveTo(118,172);c.quadraticCurveTo(116,186,123,186);c.quadraticCurveTo(130,184,128,174);c.fill();c.stroke()}
|
||||
c.lineWidth=10;c.fillStyle=HAIR;c.beginPath();c.moveTo(60,190)
|
||||
c.bezierCurveTo(44,74,88,36,128,36);c.bezierCurveTo(168,36,212,74,196,190);c.quadraticCurveTo(188,180,180,188)
|
||||
c.quadraticCurveTo(186,130,178,104);c.quadraticCurveTo(170,106,164,114);c.quadraticCurveTo(160,96,150,88);c.quadraticCurveTo(144,104,134,110)
|
||||
c.quadraticCurveTo(128,94,116,90);c.quadraticCurveTo(112,104,104,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,130,78,188);c.quadraticCurveTo(70,180,60,190);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.lineWidth=7;for(const x of[103,153]){c.beginPath();c.ellipse(x,142,22,21,0,0,T);c.stroke()
|
||||
c.strokeStyle=GL;c.lineWidth=5;c.beginPath();c.moveTo(x+6,128);c.lineTo(x+14,136);c.stroke();c.strokeStyle='#111';c.lineWidth=7}
|
||||
c.beginPath();c.moveTo(125,140);c.quadraticCurveTo(128,134,131,140);c.moveTo(81,138);c.lineTo(72,134);c.moveTo(175,138);c.lineTo(184,134);c.stroke()
|
||||
})
|
||||
ds(c,20,12,TOP,()=>{c.moveTo(150,196);c.quadraticCurveTo(124,256,hx+6,hy+8)})
|
||||
c.save();c.translate(tip[0],tip[1]);c.rotate(th)
|
||||
c.fillStyle=WO;c.lineWidth=5;c.beginPath();c.moveTo(0,0);c.lineTo(12,-24);c.lineTo(-12,-24);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=GR;c.beginPath();c.moveTo(0,0);c.lineTo(4,-8);c.lineTo(-4,-8);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=PB;c.beginPath();c.rect(-12,-96,24,72);c.fill();c.stroke()
|
||||
c.fillStyle=PBL;c.fillRect(-9.5,-93.5,6,67);c.fillStyle=PBD;c.fillRect(4,-93.5,5.5,67)
|
||||
c.strokeStyle=PBD;c.lineWidth=2;c.beginPath();c.moveTo(-3.5,-30);c.lineTo(-3.5,-90);c.moveTo(4,-30);c.lineTo(4,-90);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=ER;c.lineWidth=5;c.beginPath();c.roundRect(-12,-124,24,18,[8,8,0,0]);c.fill();c.stroke()
|
||||
c.fillStyle=FE;c.beginPath();c.rect(-13,-108,26,13);c.fill();c.stroke()
|
||||
c.lineWidth=2.5;c.beginPath();c.moveTo(-13,-101.5);c.lineTo(13,-101.5);c.stroke()
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(4,-40,13,12,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();c.moveTo(-8,-44);c.quadraticCurveTo(-12,-38,-8,-34);c.stroke()
|
||||
c.restore()
|
||||
if(hap){const q=(t-.72)/.2;c.fillStyle=SP;c.lineWidth=3.5;for(const[x,y,o]of[[24,112,0],[140,110,.2],[116,236,.4]]){const r=sin(PI*min(1,max(0,(q-o)*1.6)));if(r>.1){c.beginPath();c.moveTo(x,y-13*r);for(const[a,b]of[[1,0],[0,1],[-1,0],[0,-1]])c.quadraticCurveTo(x+(a+b)*2*r,y+(b-a)*2*r,x+a*13*r,y+b*13*r);c.fill();c.stroke()}}}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// rose pink haired girl in an apron tips a bowl of mixed shapes into a big filter funnel, squares triangles and circles tumble in but only little hearts drip out the bottom into a jar
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#f783ac',HD='#c2255c',HL='#fff0f6',EYE='#7950f2',ED='#4c2fb0',BLZ='#fff',AP='#96f2d7',BL='#ffa8a8',MO='#c92a2a',FU='#d0bfff',FUD='#9775fa',IN='#5f3dc4',BW='#ffd8a8',BWD='#f59f00',GLS='#e7f5ff',HB='#fff',CS=['#4dabf7','#ffd43b','#69db7c','#ff6b9d'],HRT='#ff6b9d'
|
||||
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 eye=(c,x,y,d,gx,gy)=>{
|
||||
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+gx,y+gy,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+gx,y+gy-10,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+7,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()
|
||||
}
|
||||
const heart=(c,x,y,s)=>{c.beginPath();c.moveTo(x,y+s);c.bezierCurveTo(x-1.4*s,y-.1*s,x-.8*s,y-1.1*s,x,y-.45*s);c.bezierCurveTo(x+.8*s,y-1.1*s,x+1.4*s,y-.1*s,x,y+s);c.fill();c.stroke()}
|
||||
const shape=(c,k,x,y,a,z=1)=>{c.save();c.translate(x,y);c.rotate(a);c.scale(z,z);c.fillStyle=CS[k];c.lineWidth=4;c.beginPath()
|
||||
if(k==0)c.roundRect(-8,-8,16,16,3);else if(k==1)c.moveTo(0,-10),c.lineTo(10,8),c.lineTo(-10,8),c.closePath();else if(k==2)c.arc(0,0,8.5,0,T);else{c.restore();c.fillStyle=CS[3];c.lineWidth=4;heart(c,x,y,9*z);return}
|
||||
c.fill();c.stroke();c.restore()}
|
||||
const FX=196,FY=118,RX=54,RY=12
|
||||
export default(c,t,i)=>{
|
||||
const bb=2*sin(2*T*t),ba=.75+.1*sin(4*T*t),bk=i==11
|
||||
const H=f=>{c.save();c.translate(62,206+bb*.5);c.scale(.68,.68);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,214,96,208,150);c.quadraticCurveTo(216,220,206,280);c.lineTo(50,280);c.quadraticCurveTo(40,220,48,150);c.bezierCurveTo(42,96,56,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=BLZ;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=AP;c.beginPath();c.moveTo(84,330);c.lineTo(90,226);c.quadraticCurveTo(128,216,166,226);c.lineTo(172,330);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=6;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*34,224),c.lineTo(128+d*26,196),c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(128,272);c.bezierCurveTo(108,256,114,240,128,250);c.bezierCurveTo(142,240,148,256,128,272);c.fill();c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(bk){c.lineWidth=7;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,5,-5),eye(c,153,140,1,5,-5)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO;c.beginPath();c.moveTo(116,165);c.quadraticCurveTo(128,184,140,165);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,200)
|
||||
c.bezierCurveTo(46,74,88,36,128,36);c.bezierCurveTo(168,36,212,74,194,200);c.lineTo(180,200)
|
||||
c.quadraticCurveTo(186,130,180,100);c.quadraticCurveTo(160,96,150,110);c.quadraticCurveTo(144,92,128,86);c.quadraticCurveTo(122,100,108,104)
|
||||
c.quadraticCurveTo(102,90,92,88);c.quadraticCurveTo(88,100,80,110);c.quadraticCurveTo(70,140,76,200);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
ds(c,16,8,HB,()=>{c.ellipse(128,106,62,66,0,PI*1.12,PI*1.88)})
|
||||
c.fillStyle=HRT;c.lineWidth=6;heart(c,170,58,14)
|
||||
})
|
||||
c.lineWidth=6;c.fillStyle=GLS;c.beginPath();c.moveTo(FX-30,212);c.lineTo(FX+30,212);c.lineTo(FX+26,250);c.quadraticCurveTo(FX,256,FX-26,250);c.closePath();c.fill()
|
||||
c.fillStyle=HRT;c.lineWidth=3.5;for(const[x,y,a]of[[FX-12,240,-.3],[FX+10,238,.3],[FX,226,0]]){c.save();c.translate(x,y);c.rotate(a);heart(c,0,0,8);c.restore()}
|
||||
const dp=(t*2)%1,dg=min(1,dp/.4),dy=dp<.4?0:60*((dp-.4)/.6)**2
|
||||
c.fillStyle=HRT;c.lineWidth=4;if(dy<26)heart(c,FX,200+6*dg+dy,3+7*dg)
|
||||
c.lineWidth=6;c.strokeStyle='#111';c.beginPath();c.moveTo(FX-30,212);c.lineTo(FX-26,250);c.quadraticCurveTo(FX,256,FX+26,250);c.lineTo(FX+30,212);c.stroke()
|
||||
c.beginPath();c.ellipse(FX,212,30,6,0,0,T);c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(FX-22,222);c.lineTo(FX-20,242);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=IN;c.lineWidth=6;c.beginPath();c.ellipse(FX,FY,RX,RY,0,0,T);c.fill()
|
||||
for(let k=0;k<4;k++){const p=(t*2+k/4)%1,x=166+44*p,y=54-30*p+98*p*p;shape(c,[0,3,1,2][k],x,y,T*p*(k%2?.5:-.5)+k,1.25)}
|
||||
c.fillStyle=FU;c.beginPath();c.moveTo(FX-RX,FY);c.ellipse(FX,FY,RX,RY,0,PI,0,true);c.lineTo(FX+11,174);c.lineTo(FX+11,194);c.quadraticCurveTo(FX,199,FX-11,194);c.lineTo(FX-11,174);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=FUD;c.beginPath();c.moveTo(FX+RX-12,FY+10);c.lineTo(FX+11,174);c.lineTo(FX+11,194);c.quadraticCurveTo(FX+8,197,FX+4,197);c.lineTo(FX+4,174);c.quadraticCurveTo(FX+26,140,FX+RX-26,FY+12);c.closePath();c.fill()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(FX-RX,FY);c.ellipse(FX,FY,RX,RY,0,PI,0,true);c.lineTo(FX+11,174);c.lineTo(FX+11,194);c.quadraticCurveTo(FX,199,FX-11,194);c.lineTo(FX-11,174);c.closePath();c.stroke()
|
||||
c.beginPath();c.moveTo(FX-11,174);c.lineTo(FX+11,174);c.stroke()
|
||||
c.lineWidth=6;c.beginPath();c.ellipse(FX,FY,RX,RY,0,0,T);c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.moveTo(FX-RX+16,FY+16);c.lineTo(FX-18,164);c.stroke();c.strokeStyle='#111'
|
||||
const hx=122,hy=92+bb
|
||||
ds(c,24,14,BLZ,()=>{c.moveTo(104,232);c.quadraticCurveTo(152,178,hx,hy+12)})
|
||||
c.save();c.translate(hx,hy);c.rotate(-.35);ds(c,12,6,BWD,()=>{c.moveTo(0,0);c.lineTo(26,-8)});c.restore()
|
||||
c.save();c.translate(150,56+bb);c.rotate(ba)
|
||||
c.fillStyle=BW;c.lineWidth=6;c.beginPath();c.moveTo(-24,-12);c.quadraticCurveTo(-24,22,0,22);c.quadraticCurveTo(24,22,24,-12);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=BWD;c.lineWidth=4;c.beginPath();c.moveTo(-17,2);c.quadraticCurveTo(0,8,17,2);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=IN;c.lineWidth=5;c.beginPath();c.ellipse(0,-12,24,6,0,0,T);c.fill();c.stroke()
|
||||
for(const[k,x]of[[0,-12],[3,2],[1,14]])shape(c,k,x,-16,x*.05)
|
||||
c.fillStyle=BW;c.lineWidth=5;c.beginPath();c.ellipse(0,-12,24,6,0,0,PI);c.fill();c.stroke()
|
||||
c.restore()
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy,11,11,0,0,T);c.fill();c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
// pink lavender bob girl scratching her head with an awkward smile and a sliding sweatdrop while her thought cloud cycles through a key, a "****" password box and "???"
|
||||
const{sin,cos,PI,min}=Math,T=2*PI
|
||||
export const frames=18,delay=100
|
||||
const SKIN='#ffe3d1',HAIR='#f2b5e8',HD='#c86fb4',HL='#fff0fb',EYE='#4dabf7',ED='#1864ab',SWT='#c3fae8',SWD='#38d9a9',BL='#ffa8a8',PIN='#ffd43b',GD='#ffd43b',GDD='#f59f00',Q='#9775fa',FLD='#e7f5ff',SW='#a5d8ff'
|
||||
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 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-2,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-12,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+5,y-1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x,y-8,4.5,0,T);c.fill();c.beginPath();c.arc(x+9,y+5,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()
|
||||
}
|
||||
const qm=(c,x,y,s)=>{c.save();c.translate(x,y);c.scale(s,s);ds(c,12,6,Q,()=>{c.moveTo(-8,-10);c.bezierCurveTo(-8,-23,10,-23,10,-11);c.bezierCurveTo(10,-3,0,-3,0,7)})
|
||||
c.fillStyle=Q;c.lineWidth=4;c.beginPath();c.arc(0,17,4.5,0,T);c.fill();c.stroke();c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const k=Math.floor(i/6),f=i%6,sc=[.55,1.14,.97,1,1,1][f],sy=i%2?-4:3,sd=(i%9)/9
|
||||
c.lineWidth=16;c.beginPath();for(const[x,y,r]of[[158,60,26],[188,40,30],[220,56,24],[208,82,24],[172,84,24]])c.moveTo(x+r,y),c.arc(x,y,r,0,T);c.stroke();c.fillStyle='#fff';c.fill()
|
||||
c.lineWidth=5;for(const[x,y,r]of[[150,114,9],[140,132,5.5]])c.beginPath(),c.arc(x,y,r,0,T),c.fill(),c.stroke()
|
||||
c.save();c.translate(190,62);c.scale(sc,sc)
|
||||
if(k==0){c.rotate(-.25);ds(c,13,6,GD,()=>{c.moveTo(-10,0);c.lineTo(28,0);c.moveTo(20,0);c.lineTo(20,10);c.moveTo(28,0);c.lineTo(28,12)})
|
||||
c.fillStyle=GD;c.lineWidth=5;c.beginPath();c.arc(-20,0,14,0,T);c.moveTo(-15,0);c.arc(-20,0,5,0,T,true);c.fill('evenodd');c.stroke()
|
||||
c.strokeStyle=GDD;c.lineWidth=3;c.beginPath();c.arc(-20,0,10,PI*1.1,PI*1.5);c.stroke()}
|
||||
else if(k==1){c.fillStyle=FLD;c.lineWidth=5;c.beginPath();c.roundRect(-38,-15,76,30,9);c.fill();c.stroke()
|
||||
c.lineWidth=4;c.beginPath();for(let j=0;j<4;j++){const x=-24+j*16;for(let a=0;a<3;a++)c.moveTo(x+6*cos(a*PI/3+PI/2),6*sin(a*PI/3+PI/2)),c.lineTo(x-6*cos(a*PI/3+PI/2),-6*sin(a*PI/3+PI/2))}c.stroke()
|
||||
if(i%2)c.fillStyle='#111',c.fillRect(34,-9,3,18)}
|
||||
else{qm(c,-22,2,.85);qm(c,0,-2,1.1);qm(c,22,2,.85)}
|
||||
c.restore()
|
||||
const H=f=>{c.save();c.translate(98,180);c.rotate(-.08);c.scale(.66,.66);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(204,34,214,110,206,178);c.quadraticCurveTo(200,196,180,192);c.lineTo(76,192);c.quadraticCurveTo(56,196,50,178);c.bezierCurveTo(42,110,52,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=SWT;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,400);c.lineTo(216,400);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SWD;c.beginPath();c.moveTo(102,186);c.quadraticCurveTo(128,200,154,186);c.lineTo(160,206);c.quadraticCurveTo(128,222,96,206);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,204,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
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()
|
||||
eye(c,103,142,-1);eye(c,153,142,1)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,164,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const j of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+j-2,168),c.lineTo(128+d*44+j+2,160),c.stroke()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(112,172);c.quadraticCurveTo(118,166,124,172);c.quadraticCurveTo(130,178,136,172);c.quadraticCurveTo(142,166,146,170);c.stroke()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(56,184)
|
||||
c.bezierCurveTo(40,74,88,36,128,36);c.bezierCurveTo(168,36,216,74,200,184);c.quadraticCurveTo(190,194,178,186)
|
||||
c.quadraticCurveTo(186,130,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,130,78,186);c.quadraticCurveTo(66,194,56,184);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;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;c.beginPath();c.moveTo(88,112);c.lineTo(112,120);c.moveTo(144,116);c.lineTo(168,110);c.stroke()
|
||||
for(const[w,s]of[[11,'#111'],[5,PIN]]){c.lineWidth=w;c.strokeStyle=s;c.beginPath();c.moveTo(70,92);c.lineTo(94,78);c.moveTo(74,104);c.lineTo(98,90);c.stroke()}
|
||||
c.strokeStyle='#111'
|
||||
c.fillStyle=SW;c.lineWidth=7;const y=96+44*sd;c.save();c.globalAlpha=min(1,(1-sd)*4);c.beginPath();c.moveTo(60,y-20);c.quadraticCurveTo(73,y,60,y+7);c.quadraticCurveTo(47,y,60,y-20);c.fill();c.stroke();c.restore()
|
||||
})
|
||||
ds(c,22,13,SWT,()=>{c.moveTo(144,230);c.quadraticCurveTo(190,190,150,124+sy)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(143,116+sy,12,13,-.5,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3.5;c.beginPath();for(const j of[-6,0,6])c.moveTo(135+j*.6,108+sy+j),c.lineTo(130+j*.6,114+sy+j);c.stroke()
|
||||
ds(c,6,2.5,'#fff',()=>{c.moveTo(160,100+sy);c.lineTo(168,94+sy);c.moveTo(162,112+sy);c.lineTo(172,112+sy)})
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
// mint haired girl with an ahoge in a comfy sweater doing a big happy stretch with her hands clasped overhead, swaying beside an empty inbox tray with a bobbing green check while sparkles twinkle
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=95
|
||||
const SKIN='#ffe3d1',HAIR='#8ce99a',HD='#2f9e44',HL='#ebfbee',SWT='#d0bfff',SD='#9775fa',BL='#ffa8a8',TR='#a5d8ff',TB='#e7f5ff',TD='#4dabf7',GR='#51cf66',SP='#ffe066',CLIP='#ffd43b',MO='#c92a2a',Z=.66
|
||||
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()}
|
||||
const star=(c,x,y,r)=>{c.beginPath();for(let k=0;k<10;k++){const q=k%2?r*.45:r,a=k*PI/5-PI/2;c.lineTo(x+cos(a)*q,y+sin(a)*q)}c.closePath();c.fill();c.stroke()}
|
||||
export default(c,t)=>{
|
||||
const s=(1-cos(T*t))/2,a=.05*sin(T*t),by=-6*s,bb=5*sin(T*t*2)
|
||||
c.fillStyle=SP;c.lineWidth=3.5
|
||||
for(const[x,y,o]of[[16,94,0],[98,82,.3],[112,150,.55],[10,148,.8]]){const r=max(0,sin(T*(t+o)));if(r>.08)spark(c,x,y,12*r)}
|
||||
c.fillStyle=TB;c.lineWidth=6;c.beginPath();c.roundRect(18,156,80,40,8);c.fill();c.stroke()
|
||||
c.strokeStyle='#d0ebff';c.lineWidth=4;c.beginPath();c.moveTo(28,170);c.lineTo(88,170);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=TR;c.lineWidth=6;c.beginPath();c.moveTo(8,186);c.lineTo(36,186);c.lineTo(44,200);c.lineTo(72,200);c.lineTo(80,186);c.lineTo(108,186);c.lineTo(108,226);c.quadraticCurveTo(108,236,98,236);c.lineTo(18,236);c.quadraticCurveTo(8,236,8,226);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.moveTo(18,196);c.lineTo(18,224);c.stroke();c.strokeStyle='#111'
|
||||
c.save();c.translate(58,126+bb);c.rotate(.1*sin(T*t));c.fillStyle=GR;c.lineWidth=6;c.beginPath();c.arc(0,0,24,0,T);c.fill();c.stroke()
|
||||
ds(c,12,6,'#fff',()=>{c.moveTo(-11,1);c.lineTo(-3,9);c.lineTo(12,-8)});c.restore()
|
||||
c.fillStyle='rgba(134,142,150,.3)';c.beginPath();c.ellipse(58,152,16-3*bb/5,3,0,0,T);c.fill()
|
||||
c.save();c.translate(172,268);c.rotate(a);c.translate(-172,-268)
|
||||
const H=f=>{c.save();c.translate(172,200+by*.3);c.scale(Z,Z);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=10;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(204,34,218,100,212,170);c.lineTo(222,300);c.lineTo(34,300);c.lineTo(44,170);c.bezierCurveTo(38,100,52,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=SWT;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(46,196,34,380);c.lineTo(222,380);c.quadraticCurveTo(210,196,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle=SWT;c.beginPath();c.moveTo(98,192);c.quadraticCurveTo(128,222,158,192);c.lineTo(166,206);c.quadraticCurveTo(128,244,90,206);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=SD;c.lineWidth=6;for(const x of[100,128,156])c.beginPath(),c.moveTo(x,250),c.lineTo(x,300),c.stroke();c.strokeStyle='#111'
|
||||
c.lineWidth=10;c.save();c.translate(128,40);c.rotate(.25*sin(T*t*2));c.fillStyle=HAIR;c.beginPath();c.moveTo(-6,2);c.bezierCurveTo(-14,-30,16,-44,30,-30);c.bezierCurveTo(12,-34,2,-20,8,2);c.closePath();c.fill();c.stroke();c.restore()
|
||||
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=10;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=7;c.fillStyle=MO;c.beginPath();c.ellipse(128,172,7+2*s,4+8*s,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=10;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,170)
|
||||
c.bezierCurveTo(48,74,88,36,128,36);c.bezierCurveTo(168,36,208,74,192,170)
|
||||
c.quadraticCurveTo(186,124,180,104);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,76,104);c.quadraticCurveTo(68,128,64,170);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=9;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=CLIP;c.lineWidth=7;star(c,176,78,17)
|
||||
})
|
||||
const hy=62+by,hx=172,ey=130+by*.6
|
||||
for(const d of[-1,1])ds(c,21,12,SWT,()=>{c.moveTo(hx+d*38,222);c.quadraticCurveTo(hx+d*60,180,hx+d*60,ey);c.quadraticCurveTo(hx+d*58,hy+18,hx+d*8,hy+6)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.ellipse(hx+d*7,hy,11,12,0,0,T),c.fill(),c.stroke()
|
||||
if(s>.6)for(const d of[-1,1])ds(c,7,3,'#fff',()=>{c.moveTo(hx+d*22,hy-14);c.lineTo(hx+d*32,hy-24)})
|
||||
c.restore()
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
// curly peach haired girl warmly holding out an envelope with a heart wax seal, the invitation card slides up out of it as she smiles and little hearts float, then tucks back in
|
||||
const{sin,cos,PI,min}=Math,T=2*PI
|
||||
export const frames=16,delay=95
|
||||
const SKIN='#ffe3d1',HAIR='#ffb38a',HD='#e8835a',HL='#ffe8d6',EYE='#20c997',ED='#087f5b',DR='#d0bfff',BL='#ff8fab',EN='#ffdeeb',END='#fcc2d7',CD='#fff',SL='#e03131',SLD='#a51111',HT=['#ff6b6b','#f783ac','#ffa8a8'],FL='#ffd43b'
|
||||
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 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+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+2,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-2,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+7,y+8,2,0,T);c.fill()
|
||||
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()
|
||||
}
|
||||
const heart=(c,x,y,r)=>{c.beginPath();c.moveTo(x,y+r*.9);c.bezierCurveTo(x-r*1.3,y,x-r*.7,y-r*1.1,x,y-r*.35);c.bezierCurveTo(x+r*.7,y-r*1.1,x+r*1.3,y,x,y+r*.9);c.closePath()}
|
||||
const cloud=(c,pts,f,w)=>{c.lineWidth=w;c.beginPath();for(const[x,y,r]of pts)c.moveTo(x+r,y),c.arc(x,y,r,0,T);c.stroke();c.fillStyle=f;c.fill()}
|
||||
export default(c,t,i)=>{
|
||||
const s=ease((t-.04)/.3)-ease((t-.66)/.28),hap=s>.55,bk=i==12,by=sin(T*t)*2
|
||||
const H=f=>{c.save();c.translate(96,166);c.rotate(.06*s);c.scale(.62,.62);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
cloud(c,[[60,90,30],[54,140,30],[54,190,28],[64,236,26],[196,90,30],[202,140,30],[202,190,28],[192,236,26],[90,52,30],[128,40,30],[166,52,30]],HD,18)
|
||||
c.fillStyle=DR;c.lineWidth=9;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,400);c.lineTo(216,400);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.moveTo(128,206),c.quadraticCurveTo(128+d*24,188,128+d*40,194),c.quadraticCurveTo(128+d*42,222,128,218),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,196);c.quadraticCurveTo(128,208,142,196);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.moveTo(142,168);c.lineTo(142,194);c.stroke()
|
||||
c.fillStyle=SL;c.lineWidth=6;heart(c,128,214,11);c.fill();c.stroke()
|
||||
c.lineWidth=9;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(hap){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(bk){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,150,x+15,142),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,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle='#c92a2a';if(hap){c.beginPath();c.moveTo(114,166);c.quadraticCurveTo(128,170,142,166);c.quadraticCurveTo(140,182,128,182);c.quadraticCurveTo(116,182,114,166);c.fill();c.stroke()}
|
||||
else{c.beginPath();c.moveTo(116,166);c.quadraticCurveTo(128,178,140,166);c.stroke()}
|
||||
cloud(c,[[62,128,16],[56,162,15],[194,128,16],[200,162,15]],HAIR,16)
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,124)
|
||||
c.bezierCurveTo(48,64,90,34,128,34);c.bezierCurveTo(166,34,208,64,192,124)
|
||||
c.quadraticCurveTo(190,104,180,96);c.quadraticCurveTo(178,114,160,112);c.quadraticCurveTo(160,96,148,90);c.quadraticCurveTo(146,112,126,110)
|
||||
c.quadraticCurveTo(126,92,112,90);c.quadraticCurveTo(110,112,92,112);c.quadraticCurveTo(92,96,80,96);c.quadraticCurveTo(70,104,64,124);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;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.lineWidth=5;for(const[x,y]of[[62,128],[194,128],[56,162],[200,162]])c.beginPath(),c.arc(x,y,7,PI*.9,PI*1.6),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=FL;c.lineWidth=6;for(let k=0;k<5;k++){const a=k*T/5-PI/2;c.beginPath();c.arc(172+12*cos(a),64+12*sin(a),9,0,T);c.fill();c.stroke()}
|
||||
c.fillStyle='#ff922b';c.beginPath();c.arc(172,64,7,0,T);c.fill();c.stroke()
|
||||
})
|
||||
c.save();c.translate(186,176+by);c.rotate(-.08)
|
||||
c.fillStyle=END;c.lineWidth=6;c.beginPath();c.moveTo(-54,-30);c.lineTo(0,-30-40*min(1,s*2+.3));c.lineTo(54,-30);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=EN;c.beginPath();c.roundRect(-54,-32,108,70,6);c.fill();c.stroke()
|
||||
const cy=-46*s
|
||||
c.fillStyle=CD;c.lineWidth=5;c.beginPath();c.roundRect(-44,-26+cy,88,58,4);c.fill();c.stroke()
|
||||
c.fillStyle='#f783ac';c.lineWidth=4;heart(c,0,-8+cy,10);c.fill();c.stroke()
|
||||
c.strokeStyle='#ced4da';c.lineWidth=4;c.beginPath();c.moveTo(-26,10+cy);c.lineTo(26,10+cy);c.moveTo(-18,20+cy);c.lineTo(18,20+cy);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=EN;c.lineWidth=6;c.beginPath();c.moveTo(-54,-30);c.lineTo(0,6);c.lineTo(54,-30);c.lineTo(54,32);c.quadraticCurveTo(54,38,48,38);c.lineTo(-48,38);c.quadraticCurveTo(-54,38,-54,32);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=END;c.lineWidth=4;c.beginPath();c.moveTo(-48,32);c.lineTo(-14,14);c.moveTo(48,32);c.lineTo(14,14);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=SL;c.lineWidth=5;c.beginPath();for(let k=0;k<=24;k++){const a=k*T/24,r=15+(k%2?1.5:-1);c.lineTo(r*cos(a),8+r*sin(a))}c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SLD;heart(c,0,8,7.5);c.fill()
|
||||
c.fillStyle='rgba(255,255,255,.6)';c.beginPath();c.arc(-6,2,3,0,T);c.fill()
|
||||
c.restore()
|
||||
ds(c,20,12,DR,()=>{c.moveTo(70,214);c.quadraticCurveTo(96,240,136,212+by)})
|
||||
ds(c,20,12,DR,()=>{c.moveTo(126,214);c.quadraticCurveTo(170,244,228,204+by)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;for(const[x,y]of[[140,206],[232,196]])c.beginPath(),c.ellipse(x,y+by,11,12,0,0,T),c.fill(),c.stroke()
|
||||
for(let k=0;k<3;k++){const p=(t*1.5+k/3)%1,a=s>.3?1:0;if(!a||p>.95)continue;c.save();c.globalAlpha=min(1,(1-p)*3,s*2);c.fillStyle=HT[k];c.lineWidth=4;heart(c,170+k*22+8*sin(T*p+k),118-80*p-24*s,7+4*sin(PI*p));c.fill();c.stroke();c.restore()}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// electric blue girl with a spiky high ponytail clenching her fists and powering up in a flickering aura as her XP bar fills, then a LV UP sign with up arrows bursts out and she cheers before the bar resets
|
||||
const{sin,cos,PI,max,min,abs}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#339af0',HD='#1864ab',HL='#d0ebff',EYE='#fab005',ED='#e67700',TOP='#fa5252',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',AU='#fff3bf',AD='#ffd43b',XP='#69db7c',XD='#2f9e44',UP='#ffd43b',SP='#ffe066'
|
||||
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 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,y+2,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,y-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(x-18,y-22);c.lineTo(x+18,y-22);c.lineTo(x-d*18,y-12);c.lineTo(x+d*18,y-4);c.closePath();c.fill();c.restore()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(x-d*16,y-11);c.lineTo(x+d*16,y-3);c.moveTo(x+d*14,y-4);c.lineTo(x+d*21,y-7);c.stroke()
|
||||
}
|
||||
const GL={L:x=>[[x,0],[x,20],[x+11,20]],V:x=>[[x,0],[x+6,20],[x+12,0]],P:x=>[[x,20],[x,0],[x+7,0],[x+12,3],[x+12,8],[x+7,11],[x,11]],X:x=>[[x,0],[x+12,20],null,[x+12,0],[x,20]],U:x=>[[x,0],[x,14],[x+3,20],[x+9,20],[x+12,14],[x+12,0]],'!':x=>[[x+2,0],[x+2,12],null,[x+2,20],[x+2,20.5]]}
|
||||
const txt=(c,s,x,y,sc,a,b,col)=>ds(c,a,b,col,()=>{let o=0;for(const ch of s){if(GL[ch]){let m=1;for(const p of GL[ch](o)){if(!p){m=1;continue}const px=x+p[0]*sc,py=y+p[1]*sc;m?c.moveTo(px,py):c.lineTo(px,py);m=0}}o+=ch==' '?8:ch=='!'?8:18}})
|
||||
const arrow=(c,x,y,s,f)=>{c.save();c.translate(x,y);c.scale(s,s);c.fillStyle=f;c.lineWidth=6/s;c.beginPath();c.moveTo(0,-28);c.lineTo(24,-4);c.lineTo(10,-4);c.lineTo(10,22);c.lineTo(-10,22);c.lineTo(-10,-4);c.lineTo(-24,-4);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=4/s;c.beginPath();c.moveTo(-4,-18);c.lineTo(-14,-8);c.stroke();c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const chg=i<8,lv=i>=8&&i<14,fill=chg?i/7:lv?1:1-(i-13)/2,jx=chg?(i%2?1.5:-1.5)*(.4+i/7):0,g=chg?.55+.45*i/7:lv?1:.7-.3*(i-14)
|
||||
const by=lv?-10*sin(PI*min(1,(i-8)/3)):0
|
||||
c.save();c.translate(128,150);c.scale(g,g);c.fillStyle=AU;c.strokeStyle=AD;c.lineWidth=7/g;c.beginPath()
|
||||
for(let k=0;k<=24;k++){const a=PI/2+k*T/24,top=-sin(a),r=(k%2?92:108+14*top*(1+.4*sin(T*t*4+k)))*(1+.12*max(0,top));c.lineTo(cos(a)*r*1.05,sin(a)*r*(1+.2*max(0,top))+18)}
|
||||
c.closePath();c.fill();c.stroke();c.restore()
|
||||
for(let k=0;k<6;k++){const q=(t*2+k/6)%1,x=[34,64,96,160,192,222][k],y=200-150*q;if(q>.1&&q<.9)ds(c,8,4,SP,()=>{c.moveTo(x,y);c.lineTo(x,y+18+k%2*8)})}
|
||||
const H=f=>{c.save();c.translate(128+jx,192+by);c.scale(.68,.68);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.save();c.translate(150,44);c.rotate(.3+.08*sin(T*t*4))
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(-26,10);c.lineTo(-40,-40);c.lineTo(-14,-24);c.lineTo(-6,-78);c.lineTo(10,-36);c.lineTo(36,-84);c.lineTo(34,-30);c.lineTo(66,-56);c.lineTo(48,-10);c.lineTo(78,-14);c.lineTo(30,18);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(0,0);c.lineTo(20,-50);c.moveTo(14,6);c.lineTo(48,-30);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=TOP;c.lineWidth=7;c.beginPath();c.ellipse(0,12,20,11,-.3,0,T);c.fill();c.stroke();c.restore()
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,204,160);c.lineTo(194,190);c.lineTo(62,190);c.lineTo(52,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(104,188);c.lineTo(128,214);c.lineTo(152,188);c.lineTo(156,204);c.lineTo(128,226);c.lineTo(100,204);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=6;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*60,212),c.lineTo(128+d*76,330),c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=SKIN;c.lineWidth=8;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(lv){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,15,1.15*PI,1.85*PI),c.stroke()}
|
||||
else eye(c,103,142,-1),eye(c,153,142,1)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,164,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,168),c.lineTo(128+d*44+k+2,160),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(lv){c.beginPath();c.moveTo(110,163);c.quadraticCurveTo(128,168,146,163);c.quadraticCurveTo(144,190,128,190);c.quadraticCurveTo(112,190,110,163);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,192,10,8,0,0,T);c.fill();c.restore()}
|
||||
else{c.fillStyle='#fff';c.beginPath();c.roundRect(110,164,36,16,6);c.fill();c.stroke();c.lineWidth=4;c.beginPath();c.moveTo(112,172);c.lineTo(144,172);for(const x of[122,134])c.moveTo(x,165),c.lineTo(x,179);c.stroke()}
|
||||
c.lineWidth=8;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.lineTo(180,108);c.lineTo(168,114);c.lineTo(160,92);c.lineTo(146,108);c.lineTo(134,84);c.lineTo(124,108)
|
||||
c.lineTo(110,88);c.lineTo(100,110);c.lineTo(88,96);c.lineTo(82,116);c.lineTo(76,108);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
})
|
||||
for(const d of[-1,1]){const sx=128+d*30+jx,sy=210+by,fx=lv?128+d*70:128+d*24+jx,fy=lv?110+by:208+(chg?(i%2)*2:0)
|
||||
ds(c,22,14,TOP,()=>{c.moveTo(sx,sy);lv?c.quadraticCurveTo(128+d*76,190,fx,fy+10):c.quadraticCurveTo(128+d*64,226,fx+d*8,fy+4)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.roundRect(fx-12,fy-11,24,22,9);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();for(const k of[-4,4])c.moveTo(fx+k,fy-11),c.lineTo(fx+k,fy-4);c.stroke()}
|
||||
if(chg&&i>2)ds(c,7,3,'#fff',()=>{for(const d of[-1,1])for(const k of[0,1]){const x=128+d*(46+k*10),y=196+k*8;c.moveTo(x,y);c.lineTo(x+d*10,y-4)}})
|
||||
txt(c,'XP',8,226,.9,10,5,XP)
|
||||
c.fillStyle='#343a40';c.lineWidth=6;c.beginPath();c.roundRect(42,222,206,26,13);c.fill();c.stroke()
|
||||
const w=(206-10)*fill;if(w>4){c.save();c.beginPath();c.roundRect(47,227,w,16,8);c.fillStyle=lv&&i%2?'#b2f2bb':XP;c.fill();c.clip();c.strokeStyle=XD;c.lineWidth=4;c.beginPath();for(let x=30+(i*4)%14;x<260;x+=14)c.moveTo(x,250),c.lineTo(x+12,222);c.stroke();c.restore();c.strokeStyle='#111'}
|
||||
if(i>=8){const q=min(1,(i-7)/2),s=i<14?(q<1?1.2*q+.2:1)*(i==9?1.1:1):1-(i-13)*.3,y=36+20*(1-q)
|
||||
if(s>.5){c.save();c.translate(128,y);c.scale(s,s);c.fillStyle='#fff';c.lineWidth=7;c.beginPath();c.roundRect(-64,-24,128,48,16);c.fill();c.stroke();txt(c,'LV UP!',-50,-10,1,11,5.5,UP);c.restore()
|
||||
for(const d of[-1,1])arrow(c,128+d*92,110-30*q-10*abs(sin(T*t*2)),s*.9,UP)}}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
// coral haired girl with a side ponytail double tapping a photo card with her finger, ripples ring out and a big red heart pops and bounces over the photo as she beams
|
||||
const{sin,PI,min}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#ff8a80',HD='#f0605a',HL='#fff0ee',EYE='#4dabf7',ED='#1864ab',TOP='#96f2d7',TD='#20c997',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',SCR='#ffd43b',SKY='#a5d8ff',SUN='#ffd43b',G1='#8ce99a',G2='#51cf66',HR='#ff6b6b',GRY='#ced4da'
|
||||
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 eye=(c,x,y,d,g)=>{
|
||||
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+g,y+2,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+g,y-9,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+g,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+g-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+g+5,y+8,2,0,T);c.fill();c.restore()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const heart=(c,x,y,s)=>{c.save();c.translate(x,y);c.scale(s,s);c.beginPath();c.moveTo(0,24);c.bezierCurveTo(-34,2,-30,-26,-13,-26);c.bezierCurveTo(-5,-26,0,-19,0,-13);c.bezierCurveTo(0,-19,5,-26,13,-26);c.bezierCurveTo(30,-26,34,2,0,24);c.closePath();c.restore()}
|
||||
const HP=[[124,204],[108,154],[98,166],[108,154],[98,166],[110,152],[116,180],[122,200]],HS=[0,0,0,0,.4,1.25,.9,1.06,1,1,1,1,1,.95,.6,0]
|
||||
export default(c,t,i)=>{
|
||||
const[hx,hy]=HP[min(i,7)],pr=i==2||i==4,hap=i>=5&&i<14,hs=HS[i],by=i>=8&&i<14?-6*sin(PI*(i-8)/3):0
|
||||
c.save();c.translate(70,130);c.rotate(-.06)
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.roundRect(-60,-74,120,148,10);c.fill();c.stroke()
|
||||
c.save();c.beginPath();c.rect(-48,-62,96,96);c.clip();c.fillStyle=SKY;c.fillRect(-48,-62,96,96)
|
||||
c.fillStyle=SUN;c.lineWidth=4;c.beginPath();c.arc(22,-36,12,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=G1;c.beginPath();c.moveTo(-60,40);c.quadraticCurveTo(-30,-26,10,10);c.quadraticCurveTo(30,-12,60,4);c.lineTo(60,40);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=G2;c.beginPath();c.moveTo(-60,40);c.quadraticCurveTo(-14,4,30,40);c.closePath();c.fill();c.stroke();c.restore()
|
||||
c.lineWidth=4;c.beginPath();c.rect(-48,-62,96,96);c.stroke()
|
||||
c.lineWidth=4;c.fillStyle=hap?HR:'#fff';heart(c,-34,54,.42);c.fill();c.stroke()
|
||||
c.strokeStyle=GRY;c.lineWidth=5;c.beginPath();c.moveTo(-14,50);c.lineTo(36,50);c.moveTo(-14,60);c.lineTo(20,60);c.stroke();c.strokeStyle='#111'
|
||||
c.restore()
|
||||
const H=f=>{c.save();c.translate(172,156+(hap?-2*sin(PI*(i-5)/2):0));c.rotate(hap?.04:-.03);c.scale(.62,.62);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,96,204,170);c.lineTo(52,170);c.bezierCurveTo(44,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.save();c.translate(196,70);c.rotate(.1*sin(T*t*2))
|
||||
c.fillStyle=HAIR;c.beginPath();c.moveTo(-6,0);c.bezierCurveTo(60,0,72,90,52,150);c.quadraticCurveTo(40,186,10,190);c.quadraticCurveTo(34,160,32,120);c.quadraticCurveTo(28,60,-4,28);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(16,20);c.bezierCurveTo(44,46,52,100,40,150);c.stroke();c.strokeStyle='#111';c.lineWidth=9
|
||||
c.fillStyle=SCR;c.beginPath();c.ellipse(2,8,14,20,.5,0,T);c.fill();c.stroke();c.restore()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=TD;c.beginPath();c.moveTo(96,192);c.quadraticCurveTo(128,230,160,192);c.lineTo(166,206);c.quadraticCurveTo(128,250,90,206);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,210,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.lineWidth=9;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(hap){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(i==14){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,149,x+15,142),c.stroke()}
|
||||
else eye(c,103,140,-1,-4),eye(c,153,140,1,-4)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO;c.beginPath()
|
||||
if(hap)c.moveTo(110,163),c.quadraticCurveTo(128,168,146,163),c.quadraticCurveTo(144,190,128,190),c.quadraticCurveTo(112,190,110,163)
|
||||
else c.moveTo(116,166),c.quadraticCurveTo(128,170,140,166),c.quadraticCurveTo(138,180,128,180),c.quadraticCurveTo(118,180,116,166)
|
||||
c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,hap?191:181,9,7,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,168)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,190,150)
|
||||
c.quadraticCurveTo(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110)
|
||||
c.quadraticCurveTo(130,96,120,88);c.quadraticCurveTo(116,102,108,110);c.quadraticCurveTo(102,98,94,96);c.quadraticCurveTo(90,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,130,78,166);c.quadraticCurveTo(72,160,66,168);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
})
|
||||
for(const k of[2,4])if(i==k||i==k+1){const r=i==k?8:20;ds(c,i==k?7:5,i==k?3:2,'#fff',()=>{c.arc(86,152,r,0,T)})}
|
||||
ds(c,22,13,TOP,()=>{c.moveTo(138,204);c.quadraticCurveTo(104,262,hx+6,hy+12)})
|
||||
const s=pr?.92:1;c.save();c.translate(hx,hy);c.scale(s,s);c.rotate(-.75)
|
||||
ds(c,13,6,SKIN,()=>{c.moveTo(0,-2);c.lineTo(0,-18)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(2,8,12,13,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();c.moveTo(-4,6);c.lineTo(4,6);c.moveTo(-4,12);c.lineTo(4,12);c.stroke();c.restore()
|
||||
if(hs>0){c.save();c.translate(66,96+by);c.rotate(.12*sin(PI*i/3));c.lineWidth=7;c.fillStyle=HR;heart(c,0,0,1.5*hs);c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(-16*hs,-16*hs,9*hs,PI*1.05,PI*1.5);c.stroke();c.restore()
|
||||
if(i>=5&&i<13)for(const[k,[x,o]]of[[0,[24,0]],[1,[108,2]],[2,[44,4]]].entries()){const p=(i-5-o)/5;if(p>0&&p<1){c.fillStyle=k%2?'#ff8fab':HR;c.lineWidth=3.5;heart(c,x+6*sin(p*5),58-50*p,.4*(1-p*.4));c.fill();c.stroke()}}}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
// tangerine pigtailed girl with a squeaky toy mallet, a giant red map pin drops onto a little folded map and bounces, she bonks it in with a pop and ripples spread, then it hops away to drop again
|
||||
const{sin,cos,PI,max,min,acos}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#ff922b',HD='#d9480f',HL='#fff4e6',EYE='#4dabf7',ED='#1864ab',TEE='#fff',OV='#748ffc',OVD='#4c6ef5',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',PIN='#ff6b6b',PD='#e03131',M1='#d3f9d8',M2='#b2f2bb',RV='#74c0fc',RT='#f03e3e',MH='#ffd43b',MHD='#f59f00',WD='#c0805a',SP='#ffe066',TIE='#cc5de8'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return x*x*(3-2*x)}
|
||||
const cl=(t,a,b)=>min(1,max(0,(t-a)/(b-a)))
|
||||
const eye=(c,x,y,d,gx,gy)=>{
|
||||
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+gx,y+gy,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+gx,y+gy-10,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+7,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()
|
||||
}
|
||||
const star=(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()}
|
||||
const PX=180,PY=228,L=60,R=27,B=acos(R/L)
|
||||
export default(c,t,i)=>{
|
||||
const dr=t<.2?-230*(1-t/.2)**2:t>=.86?-230*cl(t,.86,1)**2:0
|
||||
const bo=t>=.2&&t<.42?-16*sin(PI*cl(t,.24,.42)):0,hit=t>=.5&&t<.58,land=t>=.2&&t<.25
|
||||
const sq=land?.78:hit?.72:t>=.58&&t<.64?1.08:1,sk=t>=.5&&t<.86?4:0
|
||||
const ma=t<.4?-1.3-.5*ez(t,0,.32):t<.5?-1.8+1.5*cl(t,.4,.5)**2:-.3-1*ez(t,.56,.8),hp=t>=.54&&t<.86,sh=hit
|
||||
c.lineWidth=6;c.fillStyle=M1;c.beginPath();c.moveTo(118,202);c.lineTo(232,202);c.lineTo(250,250);c.lineTo(100,250);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=M2;c.beginPath();c.moveTo(156,202);c.lineTo(194,202);c.lineTo(200,250);c.lineTo(150,250);c.closePath();c.fill();c.lineWidth=3.5;c.stroke()
|
||||
c.strokeStyle=RV;c.lineWidth=7;c.beginPath();c.moveTo(126,206);c.bezierCurveTo(150,226,124,236,140,248);c.stroke()
|
||||
c.strokeStyle=RT;c.lineWidth=4;c.setLineDash([6,6]);c.beginPath();c.moveTo(214,246);c.quadraticCurveTo(220,214,PX+6,PY);c.stroke();c.setLineDash([]);c.strokeStyle='#111'
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(118,202);c.lineTo(232,202);c.lineTo(250,250);c.lineTo(100,250);c.closePath();c.stroke()
|
||||
c.save();c.beginPath();c.moveTo(118,202);c.lineTo(232,202);c.lineTo(250,250);c.lineTo(100,250);c.closePath();c.clip()
|
||||
for(const[a,b]of[[.2,.62],[.5,.86]])if(t>=a&&t<b){const p=cl(t,a,b);c.strokeStyle=`rgba(255,255,255,${1-p})`;c.lineWidth=5;c.beginPath();c.ellipse(PX,PY,12+60*p,4+20*p,0,0,T);c.stroke();c.strokeStyle=`rgba(17,17,17,${.6*(1-p)})`;c.lineWidth=2.5;c.beginPath();c.ellipse(PX,PY,16+60*p,6+20*p,0,0,T);c.stroke()}
|
||||
c.restore();c.strokeStyle='#111'
|
||||
if(dr>-60){c.fillStyle='rgba(73,80,87,.3)';const s=1+dr/80;c.beginPath();c.ellipse(PX,PY+1,16*s,5*s,0,0,T);c.fill()}
|
||||
const H=f=>{c.save();c.translate(78,192);c.scale(.62,.62);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,206,150);c.lineTo(50,150);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
for(const d of[-1,1]){c.save();c.translate(128+d*64,66);c.rotate(d*(.1+.08*sin(T*t*2)));c.fillStyle=HAIR;c.beginPath();c.moveTo(0,-16);c.bezierCurveTo(d*50,-16,d*66,50,d*44,104);c.quadraticCurveTo(d*38,88,d*22,92);c.bezierCurveTo(d*38,44,d*18,14,0,16);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=5;c.beginPath();c.moveTo(d*18,-4);c.bezierCurveTo(d*40,4,d*50,32,d*44,62);c.stroke();c.strokeStyle='#111';c.lineWidth=8
|
||||
c.fillStyle=TIE;c.beginPath();c.ellipse(0,0,12,16,0,0,T);c.fill();c.stroke();c.restore()}
|
||||
c.fillStyle=TEE;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=OV;c.beginPath();c.moveTo(72,330);c.lineTo(80,250);c.lineTo(176,250);c.lineTo(184,330);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=10;c.strokeStyle=OVD;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*44,252),c.lineTo(128+d*36,196),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=MH;c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.arc(128+d*44,256,6,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(sh){c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,128),c.lineTo(128+d*18,140),c.lineTo(128+d*38,152),c.stroke()}
|
||||
else if(hp){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else eye(c,103,140,-1,5,t<.2?-4:3),eye(c,153,140,1,5,t<.2?-4:3)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(hp||sh){c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,188,128,188);c.quadraticCurveTo(114,188,112,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,190,9,7,0,0,T);c.fill();c.restore()}
|
||||
else{c.beginPath();c.moveTo(118,168);c.quadraticCurveTo(128,174,138,168);c.stroke();c.fillStyle=TG;c.lineWidth=4;c.beginPath();c.ellipse(134,174,5,6,-.3,0,T);c.fill();c.stroke()}
|
||||
c.lineWidth=8;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(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,124,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
})
|
||||
const hx=136,hy=168
|
||||
c.save();c.translate(PX,PY+dr+bo+sk);c.scale(1/sq**.5,sq)
|
||||
c.fillStyle=PIN;c.lineWidth=6;c.beginPath();c.moveTo(0,0);c.arc(0,-L,R,PI/2+B,PI/2-B+T);c.closePath();c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle=PD;c.beginPath();c.arc(14,-L+8,R+4,-.3,PI*.9);c.lineTo(0,0);c.fill();c.restore()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(0,0);c.arc(0,-L,R,PI/2+B,PI/2-B+T);c.closePath();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(0,-L,10,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(0,-L,R-7,PI*1.12,PI*1.4);c.stroke();c.strokeStyle='#111'
|
||||
c.restore()
|
||||
if(hit||t>=.58&&t<.66){c.fillStyle=SP;c.lineWidth=3.5;for(const[a,r]of[[-2.6,13],[-.5,11],[-1.6,9]])star(c,PX+cos(a)*44,PY-L-12+sin(a)*36,r)}
|
||||
ds(c,20,11,TEE,()=>{c.moveTo(108,236);c.quadraticCurveTo(126,224,hx,hy+10)})
|
||||
c.save();c.translate(hx,hy);c.rotate(ma)
|
||||
ds(c,13,6,WD,()=>{c.moveTo(-6,0);c.lineTo(62,0)})
|
||||
c.fillStyle=MH;c.lineWidth=6;c.beginPath();c.roundRect(52,-20,26,40,8);c.fill();c.stroke()
|
||||
c.fillStyle=MHD;c.lineWidth=5;for(const y of[-24,16])c.beginPath(),c.roundRect(50,y,30,8,4),c.fill(),c.stroke()
|
||||
c.restore()
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy,11,11,0,0,T);c.fill();c.stroke()
|
||||
if(t<.5&&t>=.4)for(const k of[0,1])ds(c,7,3,'#fff',()=>{c.arc(hx,hy,90-k*14,-1.5+k*.1,-.6+k*.1)})
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
// periwinkle haired streamer with a side ponytail chatting excitedly into a desk mic while a red muted icon blinks, she notices, freezes in panic with gloom lines and a sweatdrop, then slaps the mic and the icon pops away
|
||||
const{sin,cos,PI}=Math,T=2*PI
|
||||
export const frames=18,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#91a7ff',HD='#5c7cfa',HL='#edf2ff',EYE='#f06595',ED='#c2255c',HO='#96f2d7',HOD='#20c997',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',MIC='#495057',GR='#ced4da',ST='#adb5bd',RED='#ff6b6b',WOOD='#e8b07a',WD='#c47f45',SW='#a5d8ff',SC='#ffd43b',GL='#748ffc'
|
||||
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 eye=(c,x,y,d,gx,gy,sk)=>{
|
||||
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()
|
||||
if(sk){c.fillStyle=EYE;c.lineWidth=2.5;c.beginPath();c.ellipse(x+gx,y+gy,6,7,0,0,T);c.fill();c.stroke();c.fillStyle='#111';c.beginPath();c.arc(x+gx,y+gy,2.5,0,T);c.fill()}
|
||||
else{c.beginPath();c.ellipse(x+gx,y+gy+2,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+gx,y+gy-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+8,2,0,T);c.fill()}
|
||||
c.restore()
|
||||
c.lineWidth=6;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 tk=i<8,nt=i==8||i==9,pn=i>=10&&i<15,sl=i==15,ok=i>15,on=tk?(i>>1)%2==1:i<15,b=tk||ok?3*sin(T*t*4.5):0,jx=pn?(i%2?2:-2):0
|
||||
if(on||sl){const s=sl?.6:nt||pn?1.1:1
|
||||
c.save();c.translate(46,46);c.scale(s,s)
|
||||
c.fillStyle=RED;c.lineWidth=6;c.beginPath();c.arc(0,0,34,0,T);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.roundRect(-8,-24,16,28,8);c.fill()
|
||||
c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.moveTo(-14,-6);c.arc(0,-6,14,PI,0,true);c.moveTo(0,8);c.lineTo(0,17);c.moveTo(-9,18);c.lineTo(9,18);c.stroke()
|
||||
for(const[w,k]of[[13,RED],[5,'#fff']])c.lineWidth=w,c.strokeStyle=k,c.beginPath(),c.moveTo(-22,-22),c.lineTo(22,22),c.stroke();c.strokeStyle='#111';c.restore()}
|
||||
if(sl)ds(c,9,4,SC,()=>{for(let k=0;k<8;k++){const a=k*PI/4;c.moveTo(46+30*cos(a),46+30*sin(a));c.lineTo(46+42*cos(a),46+42*sin(a))}})
|
||||
c.save();c.translate(150+jx,180+b);c.scale(.8,.8);c.translate(-128,-186)
|
||||
const pw=.08*sin(T*t*2)
|
||||
c.save();c.translate(186,72);c.rotate(pw)
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(-6,-10);c.bezierCurveTo(50,-26,72,40,58,96);c.quadraticCurveTo(52,124,34,134);c.quadraticCurveTo(46,96,30,60);c.quadraticCurveTo(22,32,0,12);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(18,0);c.bezierCurveTo(44,10,52,56,44,100);c.stroke();c.strokeStyle='#111';c.restore()
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,204,160);c.quadraticCurveTo(204,188,186,196);c.lineTo(70,196);c.quadraticCurveTo(52,188,52,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=HO;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=HOD;c.beginPath();c.moveTo(86,198);c.quadraticCurveTo(128,176,170,198);c.lineTo(164,214);c.quadraticCurveTo(128,198,92,214);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*14,206),c.lineTo(128+d*16,246),c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*16,250,5,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.quadraticCurveTo(128,202,142,192);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,190);c.moveTo(142,168);c.lineTo(142,190);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(pn){c.save();c.clip();c.strokeStyle=GL;c.lineWidth=3.5;for(let x=90;x<170;x+=9)c.beginPath(),c.moveTo(x,100),c.lineTo(x,x%2?122:130),c.stroke();c.restore();c.strokeStyle='#111'}
|
||||
if(sl){c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,128),c.lineTo(128+d*18,140),c.lineTo(128+d*38,152),c.stroke()}
|
||||
else if(ok){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.arc(x,148,15,1.15*PI,1.85*PI),c.stroke()}
|
||||
else if(tk)eye(c,103,140,-1,-3,-1),eye(c,153,140,1,-3,-1)
|
||||
else eye(c,103,140,-1,nt?-5:0,nt?-6:2,1),eye(c,153,140,1,nt?-5:0,nt?-6:2,1)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(tk&&i%2==0||ok){c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,188,128,188);c.quadraticCurveTo(114,188,112,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,190,9,7,0,0,T);c.fill();c.restore()}
|
||||
else if(tk){c.beginPath();c.ellipse(128,171,9,6,0,0,T);c.fill();c.stroke()}
|
||||
else if(nt){c.beginPath();c.ellipse(128,172,6,8,0,0,T);c.fill();c.stroke()}
|
||||
else if(sl){c.fillStyle='#fff';c.beginPath();c.roundRect(110,162,36,16,6);c.fill();c.stroke();c.beginPath();c.moveTo(112,170);c.lineTo(144,170);c.stroke()}
|
||||
else{c.beginPath();c.moveTo(108,172);for(let k=0;k<4;k++)c.quadraticCurveTo(113+k*10,k%2?178:166,118+k*10,172);c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(68,156)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,188,156)
|
||||
c.quadraticCurveTo(186,120,180,104);c.quadraticCurveTo(172,104,166,110);c.quadraticCurveTo(162,96,154,90);c.quadraticCurveTo(148,102,138,106)
|
||||
c.quadraticCurveTo(134,92,126,84);c.quadraticCurveTo(118,100,104,106);c.quadraticCurveTo(100,94,92,90);c.quadraticCurveTo(86,104,80,108)
|
||||
c.quadraticCurveTo(70,126,68,156);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
if(pn){c.lineWidth=5;c.beginPath();c.moveTo(88,116);c.lineTo(112,106);c.moveTo(144,106);c.lineTo(168,116);c.stroke()}
|
||||
c.fillStyle=SC;c.lineWidth=7;c.beginPath();c.arc(184,72,13,0,T);c.fill();c.stroke()
|
||||
if(pn){c.fillStyle=SW;c.lineWidth=6;c.beginPath();c.moveTo(62,96);c.quadraticCurveTo(76,118,62,126);c.quadraticCurveTo(48,118,62,96);c.fill();c.stroke()}
|
||||
c.restore()
|
||||
if(nt)ds(c,13,6,RED,()=>{c.moveTo(224,16);c.lineTo(222,40);c.moveTo(221,52);c.lineTo(221,53)})
|
||||
if(tk&&(i>>1)%2==0){c.fillStyle=SC;c.lineWidth=3.5;for(const[x,y,r]of[[230,40,11],[210,18,7]]){c.beginPath();c.moveTo(x,y-r);for(const[a,q]of[[1,0],[0,1],[-1,0],[0,-1]])c.quadraticCurveTo(x+(a+q)*r*.15,y+(q-a)*r*.15,x+a*r,y+q*r);c.fill();c.stroke()}}
|
||||
c.lineWidth=6;c.fillStyle=WOOD;c.beginPath();c.roundRect(-12,228,280,50,10);c.fill();c.stroke()
|
||||
c.strokeStyle=WD;c.lineWidth=4;c.beginPath();c.moveTo(150,242);c.lineTo(230,242);c.stroke();c.strokeStyle='#111'
|
||||
ds(c,14,7,ST,()=>{c.moveTo(60,160);c.lineTo(60,226)})
|
||||
c.fillStyle=MIC;c.lineWidth=6;c.beginPath();c.ellipse(60,230,36,9,0,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=on||sl?RED:'#69db7c';c.lineWidth=3;c.beginPath();c.arc(82,229,4,0,T);c.fill();c.stroke()
|
||||
c.save();c.translate(66,126);c.rotate(.28)
|
||||
c.fillStyle=MIC;c.lineWidth=6;c.beginPath();c.roundRect(-21,-34,42,70,21);c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle=GR;c.fillRect(-22,-36,44,34);c.strokeStyle='#868e96';c.lineWidth=2.5;c.beginPath();for(let k=-30;k<0;k+=7)c.moveTo(-22,k),c.lineTo(22,k);for(let k=-21;k<22;k+=8)c.moveTo(k,-36),c.lineTo(k,-2);c.stroke();c.restore()
|
||||
c.lineWidth=5;c.fillStyle=ST;c.beginPath();c.rect(-22,-4,44,9);c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(-13,12);c.lineTo(-13,24);c.stroke();c.strokeStyle='#111'
|
||||
c.restore()
|
||||
const L=pn?[110,166]:sl?[62,220]:[64,192],R=pn?[190,166]:tk||ok?[230,166+b]:[188,224]
|
||||
for(const[[x,y],sx,d]of[[L,106,-1],[R,194,1]]){ds(c,28,17,HO,()=>{c.moveTo(sx,206+b);c.quadraticCurveTo(sx+d*(pn?28:16),230,x,y+8)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(x,y,14,15,0,0,T);c.fill();c.stroke()}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// long berry red haired girl in a showgirl vest tugging a little stage curtain aside to reveal a spinning "NEW" burst badge with sparkles, beaming, then letting it swing shut again
|
||||
const{sin,cos,PI,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#e8366a',HD='#a51d45',HL='#ffc9d9',EYE='#40c057',ED='#2b8a3e',VS='#7950f2',BOW='#ffd43b',BL='#ffa8a8',CU='#f06595',CD='#c2255c',ROD='#fab005',STG='#f3d9fa',BG='#ffd43b',BGD='#f59f00',RED='#f03e3e',SP='#ffe066'
|
||||
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 ease=x=>x<=0?0:x>=1?1:x*x*(3-2*x)
|
||||
const eye=(c,x,y,d,st)=>{
|
||||
c.fillStyle='#fff';c.beginPath();c.ellipse(x,y,14,17,0,0,T);c.fill()
|
||||
c.save();c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';if(st)spark(c,x-3,y-3,8,0);else c.beginPath(),c.arc(x-4,y-5,4.5,0,T),c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
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()
|
||||
}
|
||||
const spark=(c,x,y,r,o=1)=>{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();if(o)c.stroke()}
|
||||
export default(c,t,i)=>{
|
||||
const o=ease((t-.06)/.26)-ease((t-.7)/.24),ct=16+84*o,cp=16+120*o,cb=16+90*o,hx=140+4*o,pz=1+.06*sin(T*t*2),hap=o>.6,bk=i==1
|
||||
c.lineWidth=6;c.fillStyle=STG;c.beginPath();c.roundRect(12,30,138,170,10);c.fill();c.stroke()
|
||||
c.save();c.translate(70,116);c.rotate(T*t/4);c.scale(pz,pz)
|
||||
c.fillStyle=BG;c.lineWidth=6;c.beginPath();for(let k=0;k<28;k++){const a=k*PI/14,r=k%2?44:55;c.lineTo(r*cos(a),r*sin(a))}c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=BGD;c.lineWidth=4;c.beginPath();c.arc(0,0,36,0,T);c.stroke();c.restore()
|
||||
c.save();c.translate(70,116);c.rotate(-.12);c.scale(pz,pz)
|
||||
for(const[w,s]of[[14,'#111'],[7,RED]]){c.lineWidth=w;c.strokeStyle=s;c.beginPath()
|
||||
c.moveTo(-30,12);c.lineTo(-30,-12);c.lineTo(-16,12);c.lineTo(-16,-12)
|
||||
c.moveTo(4,-12);c.lineTo(-8,-12);c.lineTo(-8,12);c.lineTo(4,12);c.moveTo(-8,0);c.lineTo(2,0)
|
||||
c.moveTo(12,-12);c.lineTo(17,12);c.lineTo(22,-2);c.lineTo(27,12);c.lineTo(32,-12);c.stroke()}
|
||||
c.restore();c.strokeStyle='#111'
|
||||
if(o>.5){const q=min(1,(o-.5)*2);c.fillStyle=SP;c.lineWidth=4;for(const[x,y,r,ph]of[[28,50,15,0],[124,52,12,1.3],[30,178,11,2.6],[112,182,14,4]])spark(c,x,y,r*q*(.7+.3*sin(T*t*4+ph)))}
|
||||
const n=6,w=(150-cb)/n,L=(a,k)=>a+(150-a)*k/n
|
||||
c.lineWidth=6;c.fillStyle=CU;c.beginPath();c.moveTo(ct,30);c.lineTo(150,30);c.lineTo(150,198)
|
||||
for(let k=n;k>0;k--)c.quadraticCurveTo(cb+(k-.5)*w,206,cb+(k-1)*w,198)
|
||||
c.quadraticCurveTo(cp-4*o,176,cp,150);c.quadraticCurveTo(cp-8*o,90,ct,30);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=CD;c.lineWidth=4;c.beginPath();for(let k=1;k<n;k++)c.moveTo(L(ct,k),40),c.quadraticCurveTo(L(cp,k)-8*o,90,L(cp,k),150),c.quadraticCurveTo(L(cp,k)-4*o,176,L(cb,k),192);c.stroke();c.strokeStyle='#111'
|
||||
ds(c,13,7,ROD,()=>{c.moveTo(12,30);c.lineTo(154,30)})
|
||||
c.fillStyle=ROD;c.lineWidth=5;for(const x of[12,154])c.beginPath(),c.arc(x,30,8,0,T),c.fill(),c.stroke()
|
||||
const H=f=>{c.save();c.translate(198,152);c.rotate(.05*o);c.scale(.6,.6);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(204,34,216,110,214,200);c.quadraticCurveTo(214,300,222,400);c.lineTo(34,400);c.quadraticCurveTo(42,300,42,200);c.bezierCurveTo(40,110,52,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,400);c.lineTo(216,400);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=VS;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*28,190),c.quadraticCurveTo(128+d*76,198,128+d*92,400),c.lineTo(128+d*14,400),c.lineTo(128+d*6,250),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=BOW;c.lineWidth=7;for(const d of[-1,1])c.beginPath(),c.moveTo(128,212),c.lineTo(128+d*22,200),c.lineTo(128+d*22,226),c.closePath(),c.fill(),c.stroke()
|
||||
c.beginPath();c.arc(128,213,6,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=9;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,196);c.quadraticCurveTo(128,206,142,196);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.moveTo(142,168);c.lineTo(142,194);c.stroke()
|
||||
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=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,150,x+15,142),c.stroke()}
|
||||
else eye(c,103,140,-1,hap),eye(c,153,140,1,hap)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle='#c92a2a'
|
||||
if(hap){c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,170,144,164);c.quadraticCurveTo(142,186,128,186);c.quadraticCurveTo(114,186,112,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle='#ff8fab';c.beginPath();c.ellipse(128,188,9,7,0,0,T);c.fill();c.restore()}
|
||||
else{c.beginPath();c.moveTo(116,166);c.quadraticCurveTo(122,174,128,168);c.quadraticCurveTo(134,174,140,166);c.stroke()}
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(60,230)
|
||||
c.bezierCurveTo(40,76,88,36,128,36);c.bezierCurveTo(168,36,216,76,196,230);c.quadraticCurveTo(188,236,180,228)
|
||||
c.quadraticCurveTo(186,140,178,104);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,140,76,228);c.quadraticCurveTo(68,236,60,230);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;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=BOW;c.lineWidth=7;c.beginPath();for(let k=0;k<10;k++){const a=-PI/2+k*PI/5,r=k%2?8:18;c.lineTo(166+r*cos(a),66+r*sin(a))}c.closePath();c.fill();c.stroke()
|
||||
})
|
||||
ds(c,20,12,'#fff',()=>{c.moveTo(168,188);c.quadraticCurveTo(hx+30,178,hx+10,154)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx+2,150,12,13,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3.5;c.beginPath();for(const y of[146,153])c.moveTo(hx-9,y),c.lineTo(hx-2,y);c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// lavender twintailed girl in a pink cardigan who jumps in surprise with a "!" when a golden bell beside her dings and a red count badge pops onto it, then beams up at it
|
||||
const{sin,cos,PI,max,min,exp}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#b197fc',HD='#7048e8',HL='#f3f0ff',EYE='#f783ac',ED='#c2255c',CAR='#ffdeeb',CD='#f783ac',BL='#ffa8a8',BELL='#ffd43b',BD='#f59f00',RD='#fa5252',RB='#ffd43b',MO='#c92a2a'
|
||||
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 ease=x=>x<=0?0:x>=1?1:x*x*(3-2*x)
|
||||
const eye=(c,x,y,d,g,w)=>{
|
||||
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+g,y+2+g*.6,11.5*w,15*w,0,0,T);c.fillStyle=EYE;c.fill();c.lineWidth=2.5;c.stroke()
|
||||
c.fillStyle=ED;c.beginPath();c.ellipse(x+g,y-8+g*.6,13*w,10*w,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+g,y+3+g*.6,5.5*w,7.5*w,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+g-4*w,y-5+g*.6,4.5*w,0,T);c.fill();c.beginPath();c.arc(x+g+5*w,y+8+g*.6,2,0,T);c.fill();c.restore()
|
||||
c.lineWidth=7;c.beginPath();c.moveTo(x-16,y-6-3*(1-w));c.quadraticCurveTo(x,y-20-6*(1-w),x+16,y-6-3*(1-w));c.moveTo(x+d*15,y-7);c.lineTo(x+d*21,y-12);c.stroke()
|
||||
}
|
||||
export default(c,t,i)=>{
|
||||
const k=t-.22,sur=t>=.22&&t<.42,jq=min(1,max(0,k/.22)),jy=-20*sin(PI*jq),up=sin(PI*jq),hap=t>=.42&&t<.9,bk=i==1,bo=2*sin(T*t*2)
|
||||
const ang=k<0?0:.5*exp(-3.2*k)*sin(T*k*3)*(1-ease((t-.85)/.13)),bs=(t<.22?0:t<.28?1.35:1)*(1-ease((t-.88)/.1)),ex=t<.22||t>.7?0:t<.28?1.4:1
|
||||
c.save();c.translate(62,26);c.rotate(ang)
|
||||
if(k>0&&k<.5)for(const d of[-1,1])for(const r of[46,58])ds(c,7,3,'#fff',()=>{c.arc(0,62,r,d<0?PI*.82:-PI*.18,d<0?PI*1.12:PI*.12)})
|
||||
c.fillStyle=BELL;c.lineWidth=5;c.beginPath();c.arc(0,8,8,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=6;c.beginPath();c.arc(0,84,9,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(-40,72);c.quadraticCurveTo(-30,64,-30,40);c.bezierCurveTo(-30,4,30,4,30,40);c.quadraticCurveTo(30,64,40,72);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=BD;c.lineWidth=6;c.beginPath();c.moveTo(18,26);c.quadraticCurveTo(22,40,21,58);c.stroke();c.strokeStyle='#fff';c.beginPath();c.moveTo(-18,28);c.quadraticCurveTo(-20,36,-20,46);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=BD;c.lineWidth=6;c.beginPath();c.roundRect(-44,68,88,12,6);c.fill();c.stroke()
|
||||
if(bs>0){c.save();c.translate(30,22);c.scale(bs,bs);c.fillStyle=RD;c.lineWidth=5;c.beginPath();c.arc(0,0,17,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(-5,-7);c.quadraticCurveTo(0,-12,5,-7);c.quadraticCurveTo(7,-2,0,-1);c.quadraticCurveTo(8,1,5,6);c.quadraticCurveTo(0,11,-5,6);c.lineWidth=4;c.strokeStyle='#fff';c.stroke();c.restore();c.strokeStyle='#111'}
|
||||
c.restore()
|
||||
const H=f=>{c.save();c.translate(170,200+jy+bo);c.scale(.64,.64);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9
|
||||
for(const d of[-1,1]){c.save();c.translate(128+d*64,76);c.rotate(d*(-.05-.42*up)+.06*sin(T*t*2+1))
|
||||
c.fillStyle=HAIR;c.beginPath();c.moveTo(0,0);c.bezierCurveTo(d*38,4,d*52,70,d*32,128);c.quadraticCurveTo(d*24,146,d*6,140);c.bezierCurveTo(d*24,94,d*8,36,0,0);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(d*12,18);c.bezierCurveTo(d*28,46,d*34,84,d*26,118);c.stroke();c.strokeStyle='#111';c.lineWidth=9
|
||||
c.restore()}
|
||||
c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,210,96,202,156);c.lineTo(54,156);c.bezierCurveTo(46,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=CAR;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,380);c.lineTo(216,380);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(104,190);c.lineTo(128,240);c.lineTo(152,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle=CD;for(const y of[258,290])c.beginPath(),c.arc(128,y,7,0,T),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(bk){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-14,142),c.quadraticCurveTo(x,150,x+14,142),c.stroke()}
|
||||
else if(sur)eye(c,103,138,-1,0,.62),eye(c,153,138,1,0,.62)
|
||||
else eye(c,103,140,-1,hap?-4:0,1),eye(c,153,140,1,hap?-4:0,1)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(sur)c.beginPath(),c.ellipse(128,174,7,9,0,0,T),c.fill(),c.stroke()
|
||||
else if(hap){c.beginPath();c.moveTo(114,164);c.quadraticCurveTo(128,188,142,164);c.closePath();c.fill();c.stroke();c.save();c.clip();c.fillStyle='#ff8fab';c.beginPath();c.ellipse(128,182,8,6,0,0,T);c.fill();c.restore()}
|
||||
else c.beginPath(),c.arc(128,164,8,.15*PI,.85*PI),c.stroke()
|
||||
c.lineWidth=9;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(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,124,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=RB;c.lineWidth=8;for(const d of[-1,1]){c.save();c.translate(128+d*60,72);c.rotate(d*.3);for(const e of[-1,1])c.beginPath(),c.moveTo(0,0),c.lineTo(e*20,-13),c.lineTo(e*20,13),c.closePath(),c.fill(),c.stroke();c.beginPath();c.arc(0,0,8,0,T);c.fill();c.stroke();c.restore()}
|
||||
})
|
||||
for(const d of[-1,1]){const hx=170+d*(54+8*up),hy=244-60*up+jy
|
||||
if(up>.05){ds(c,20,11,CAR,()=>{c.moveTo(170+d*36,232+jy);c.quadraticCurveTo(170+d*66,250+jy,hx,hy+8)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.arc(hx,hy,10,0,T);c.fill();c.stroke()}}
|
||||
if(ex>0){c.save();c.translate(226,70);c.scale(ex,ex);c.rotate(.15);c.fillStyle=RD;c.lineWidth=5;c.beginPath();c.moveTo(-7,-28);c.lineTo(7,-28);c.lineTo(4,4);c.lineTo(-4,4);c.closePath();c.fill();c.stroke();c.beginPath();c.arc(0,16,6,0,T);c.fill();c.stroke()
|
||||
c.restore();for(const a of[-.5,0,.5])ds(c,6,2.5,'#fff',()=>{c.moveTo(226+sin(a)*38,70-cos(a)*38);c.lineTo(226+sin(a)*48,70-cos(a)*48)})}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// forest green haired tour guide girl in a mustard beret waving a little pennant flag and presenting three step dots that light up 1 2 3 in sequence with a hop each, then all bounce and reset
|
||||
const{sin,cos,PI}=Math,T=2*PI
|
||||
export const frames=15,delay=100
|
||||
const SKIN='#ffe3d1',HAIR='#4c9a5f',HD='#2d6a3e',HL='#d3f9d8',EYE='#f08c00',ED='#d9480f',VE='#364fc7',SC='#ff6b6b',BE='#ffd43b',BED='#f59f00',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',FL='#ff6b6b',ON='#4dabf7',OFF='#f1f3f5',GR='#adb5bd',WD='#c47f45'
|
||||
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 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+2,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-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+5,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+9,y+8,2,0,T);c.fill();c.restore()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const star=(c,x,y,r)=>{c.beginPath();for(let k=0;k<10;k++){const a=-PI/2+k*PI/5,q=k%2?r*.45:r;c.lineTo(x+cos(a)*q,y+sin(a)*q)}c.closePath();c.fill();c.stroke()}
|
||||
const dig=(c,n,x,y)=>{n==1?(c.moveTo(x+2,y+5),c.lineTo(x+7,y),c.lineTo(x+7,y+20)):n==2?(c.moveTo(x+1,y+5),c.quadraticCurveTo(x+1,y,x+6,y),c.quadraticCurveTo(x+12,y,x+12,y+6),c.quadraticCurveTo(x+12,y+10,x+1,y+20),c.lineTo(x+12,y+20)):(c.moveTo(x+1,y),c.lineTo(x+12,y),c.lineTo(x+5,y+8),c.quadraticCurveTo(x+13,y+8,x+13,y+14),c.quadraticCurveTo(x+13,y+20,x+6,y+20),c.quadraticCurveTo(x+2,y+20,x,y+18))}
|
||||
const SY=[64,128,192],LT=[1,5,9]
|
||||
export default(c,t,i)=>{
|
||||
const al=i>=10&&i<14,hop=LT.includes(i)?-8:LT.includes(i-1)?-3:al?-5*sin(PI*(i-10)/2)**2:0,wv=T*t*3
|
||||
const lit=k=>i>=LT[k]&&i<14
|
||||
c.fillStyle=OFF;c.lineWidth=6;c.beginPath();c.roundRect(202,SY[0],16,SY[2]-SY[0],8);c.fill();c.stroke()
|
||||
const fe=i>=14?0:i<2?0:i<5?(i-1)/4*64:i<6?64:i<9?64+(i-5)/4*64:128;if(fe>4){c.fillStyle=ON;c.lineWidth=4;c.beginPath();c.roundRect(205,SY[0],10,fe,5);c.fill();c.stroke()}
|
||||
for(let k=0;k<3;k++){const on=lit(k),p=i-LT[k],s=on?(p==0?1.3:p==1?1.1:al?1+.1*sin(PI*(i-10+k*.5)/1.5):1):1
|
||||
c.save();c.translate(210,SY[k]);c.scale(s,s);c.fillStyle=on?ON:OFF;c.lineWidth=6;c.beginPath();c.arc(0,0,22,0,T);c.fill();c.stroke()
|
||||
if(on){c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.arc(0,0,15,PI*1.1,PI*1.4);c.stroke();ds(c,9,4.5,'#fff',()=>dig(c,k+1,-6,-10))}
|
||||
else{c.strokeStyle=GR;c.lineWidth=5;c.beginPath();dig(c,k+1,-6,-10);c.stroke();c.strokeStyle='#111'}
|
||||
c.restore()
|
||||
if(on&&p==0)ds(c,7,3,BE,()=>{for(const a of[-.7,0,.7]){c.moveTo(210+cos(a)*31,SY[k]+sin(a)*31);c.lineTo(210+cos(a)*40,SY[k]+sin(a)*40)}})}
|
||||
c.save();c.translate(0,hop)
|
||||
const H=f=>{c.save();c.translate(104,180);c.scale(.68,.68);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,214,100,208,160);c.quadraticCurveTo(212,200,200,236);c.lineTo(56,236);c.quadraticCurveTo(44,200,48,160);c.bezierCurveTo(42,100,56,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=VE;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*30,192),c.quadraticCurveTo(128+d*72,200,128+d*84,330),c.lineTo(128+d*12,330),c.lineTo(128+d*12,260),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=BE;c.lineWidth=5;for(const y of[280,310])c.beginPath(),c.arc(110,y,5,0,T),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.lineWidth=8;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle=SC;c.beginPath();c.moveTo(102,194);c.quadraticCurveTo(128,214,154,194);c.lineTo(160,206);c.quadraticCurveTo(128,228,96,206);c.closePath();c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(128,214);c.lineTo(116,250);c.lineTo(132,246);c.lineTo(140,212);c.closePath();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(al){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,15,1.15*PI,1.85*PI),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,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO;c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,186,128,186);c.quadraticCurveTo(114,186,112,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,188,9,7,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(62,176)
|
||||
c.bezierCurveTo(44,74,88,40,128,40);c.bezierCurveTo(168,40,212,74,194,176);c.quadraticCurveTo(186,180,180,172)
|
||||
c.quadraticCurveTo(184,128,178,104);c.quadraticCurveTo(170,106,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(72,128,76,172);c.quadraticCurveTo(70,180,62,176);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.3,1.4],[1.48,1.56],[1.64,1.74]])c.beginPath(),c.arc(128,106,54,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.save();c.translate(116,50);c.rotate(-.18)
|
||||
c.fillStyle=BED;c.lineWidth=7;c.beginPath();c.roundRect(-4,-42,10,16,4);c.fill();c.stroke()
|
||||
c.fillStyle=BE;c.lineWidth=8;c.beginPath();c.moveTo(-62,10);c.bezierCurveTo(-80,-30,-20,-44,20,-36);c.bezierCurveTo(70,-28,84,0,62,12);c.quadraticCurveTo(0,26,-62,10);c.fill();c.stroke()
|
||||
c.strokeStyle=BED;c.lineWidth=5;c.beginPath();c.moveTo(-50,6);c.quadraticCurveTo(0,16,50,8);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=FL;c.lineWidth=5;star(c,40,-10,11);c.restore()
|
||||
})
|
||||
ds(c,9,5,WD,()=>{c.moveTo(42,166);c.lineTo(36,20)})
|
||||
c.fillStyle=FL;c.lineWidth=6;c.beginPath();const fx=s=>[38+s*62,22+9*s*sin(wv-s*3.5)]
|
||||
for(let k=0;k<=8;k++){const[x,y]=fx(k/8);c.lineTo(x,y+(k==8?18:0)*(1-k/8))}
|
||||
for(let k=8;k>=0;k--){const[x,y]=fx(k/8);c.lineTo(x,y+36-18*k/8)}
|
||||
c.closePath();c.fill();c.stroke()
|
||||
const[sx,sy]=fx(.42);c.fillStyle=BE;c.lineWidth=4;star(c,sx,sy+13,9)
|
||||
c.fillStyle=BE;c.lineWidth=5;c.beginPath();c.arc(36,18,6,0,T);c.fill();c.stroke()
|
||||
ds(c,24,15,'#fff',()=>{c.moveTo(70,206);c.quadraticCurveTo(40,200,44,160)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(43,154,12,13,0,0,T);c.fill();c.stroke()
|
||||
ds(c,24,15,'#fff',()=>{c.moveTo(136,204);c.quadraticCurveTo(160,214,170,184)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.save();c.translate(176,176);c.rotate(-.5);c.beginPath();c.ellipse(0,0,16,9,0,0,T);c.fill();c.stroke();c.beginPath();c.ellipse(-4,-9,4.5,8,.3,0,T);c.fill();c.stroke();c.restore()
|
||||
c.restore()
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
// blushing girl with long sakura pink hair and a mint headband covering her eyes with both hands, then parting two fingers to peek up at a password field of bouncing dots with a lock icon
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#ffa8c5',HD='#e64980',HL='#fff0f6',EYE='#ffa94d',ED='#e8590c',CAR='#a5d8ff',CD='#4dabf7',BL='#ff8787',HB='#63e6be',FLD='#fff',DOT='#343a40',GD='#ffd43b',GDD='#f59f00',SW='#a5d8ff',Z=.8
|
||||
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 ease=x=>x<=0?0:x>=1?1:x*x*(3-2*x)
|
||||
const eye=(c,x,y,g)=>{
|
||||
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+g,y-2,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+g,y-12,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+g,y-1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+g-4,y-9,4.5,0,T);c.fill();c.beginPath();c.arc(x+g+5,y+4,2,0,T);c.fill();c.restore()
|
||||
c.lineWidth=8;c.beginPath();c.moveTo(x-16,y-6);c.quadraticCurveTo(x,y-20,x+16,y-6);c.stroke()
|
||||
}
|
||||
const hand=(c,x,y,d,sp)=>{c.save();c.translate(x,y);c.rotate(-d*.08);c.fillStyle=SKIN;c.lineWidth=6
|
||||
c.beginPath();c.ellipse(-d*22,14,7,13,-d*.45,0,T);c.fill();c.stroke()
|
||||
for(const k of[0,1,2,3]){const a=(k-1.5)*.06+(k==1?-sp:k==2?sp:0)*.42,o=k==0||k==3?7:0;c.save();c.translate((k-1.5)*10.5,4);c.rotate(a);c.beginPath();c.roundRect(-6.5,-48+o,13,52-o,6.5);c.fill();c.stroke();c.restore()}
|
||||
c.beginPath();c.roundRect(-21,-2,42,32,13);c.fill();c.stroke()
|
||||
c.lineWidth=3.5;for(const k of[-1,0,1])c.beginPath(),c.moveTo(k*10.5,2),c.lineTo(k*10.5,8),c.stroke();c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const sp=ease((t-.2)/.1)-ease((t-.72)/.1),g=t<.45?-3:5
|
||||
c.fillStyle=FLD;c.lineWidth=6;c.beginPath();c.roundRect(12,14,232,58,16);c.fill();c.stroke()
|
||||
ds(c,13,6,'#ced4da',()=>{c.arc(40,36,9,PI,0);c.lineTo(49,44)})
|
||||
c.fillStyle=GD;c.lineWidth=5;c.beginPath();c.roundRect(26,38,28,24,6);c.fill();c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.arc(40,48,3.5,0,T);c.fill();c.fillRect(38.5,48,3,7)
|
||||
c.fillStyle=DOT;for(let k=0;k<5;k++){const b=max(0,sin(T*(t*2-k*.12)));c.beginPath();c.arc(84+k*28,44-8*b,9.5,0,T);c.fill()}
|
||||
if(i%6<3){c.lineWidth=5;c.beginPath();c.moveTo(222,30);c.lineTo(222,56);c.stroke()}
|
||||
const H=f=>{c.save();c.translate(128,216-5*sp);c.rotate(.05*sp+.03*sin(T*t));c.scale(Z,Z);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(206,34,222,100,216,170);c.quadraticCurveTo(214,240,246,300);c.lineTo(10,300);c.quadraticCurveTo(42,240,40,170);c.bezierCurveTo(34,100,50,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=CAR;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,380);c.lineTo(216,380);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(106,190);c.lineTo(128,230);c.lineTo(150,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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()
|
||||
eye(c,103,140,g);eye(c,153,140,g)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*40,160,18,10,0,0,T),c.fill()
|
||||
c.lineWidth=5;c.beginPath();c.moveTo(120,180);c.quadraticCurveTo(124,175,128,179);c.quadraticCurveTo(132,183,136,178);c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,170)
|
||||
c.bezierCurveTo(48,74,88,36,128,36);c.bezierCurveTo(168,36,208,74,192,170)
|
||||
c.quadraticCurveTo(186,124,180,104);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,76,104);c.quadraticCurveTo(68,128,64,170);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;for(const[s,e]of[[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=HB;c.lineWidth=8;c.beginPath();c.moveTo(62,96);c.bezierCurveTo(66,30,190,30,194,96);c.lineTo(182,96);c.bezierCurveTo(176,48,80,48,74,96);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SW;c.lineWidth=7;c.beginPath();c.moveTo(196,92);c.quadraticCurveTo(210,112,196,120);c.quadraticCurveTo(182,112,196,92);c.fill();c.stroke()
|
||||
c.strokeStyle=BL;c.lineWidth=4;for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+k-3,160),c.lineTo(128+k+3,150),c.stroke();c.strokeStyle='#111'
|
||||
for(const d of[-1,1])ds(c,24,14,CAR,()=>{c.moveTo(128+d*30,192);c.quadraticCurveTo(128+d*46,250,128+d*64,330)})
|
||||
hand(c,98,166,-1,0);hand(c,157,166,1,sp)
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// sunflower twintail girl frozen mid disco pose on one leg next to a big pulsing pause button, music notes stuck in the air, only her eyes dart around while a sweatdrop slides and she trembles
|
||||
const{sin,cos,PI,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#ffd43b',HD='#f08c00',HL='#fff9db',EYE='#4dabf7',ED='#1864ab',TOP='#ff8787',SK='#4dabf7',SKD='#1c7ed6',SH='#ff6b6b',RB='#4dabf7',BL='#ffa8a8',PA='#9775fa',PAD='#7048e8',NT='#ff922b',SW='#a5d8ff'
|
||||
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 ease=x=>x<=0?0:x>=1?1:x*x*(3-2*x)
|
||||
const eye=(c,x,y,d,lx)=>{
|
||||
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+lx,y+2,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+lx,y-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+lx,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+lx-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+lx+5,y+8,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()
|
||||
}
|
||||
const note=(c,x,y,a)=>{c.save();c.translate(x,y);c.rotate(a);c.fillStyle=NT;c.lineWidth=5
|
||||
c.beginPath();c.moveTo(4,10);c.lineTo(4,-20);c.lineTo(20,-14);c.lineTo(20,4);c.stroke()
|
||||
for(const[cx,cy]of[[-2,10],[14,4]])c.beginPath(),c.ellipse(cx,cy,7,5.5,-.4,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=7;c.beginPath();c.moveTo(4,-20);c.lineTo(20,-14);c.stroke();c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const pz=1+.07*sin(T*t*2),tr=.012*sin(T*t*8),lx=t>.12&&t<.44?-4:t>.56&&t<.88?4:0,bk=i==7,sd=ease(t/.8)
|
||||
c.save();c.translate(62,66);c.scale(pz,pz)
|
||||
c.fillStyle='rgba(151,117,250,.25)';c.beginPath();c.arc(0,0,56,0,T);c.fill()
|
||||
c.fillStyle=PA;c.lineWidth=7;c.beginPath();c.roundRect(-42,-42,84,84,22);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=5;for(const x of[-14,14])c.beginPath(),c.roundRect(x-8,-24,16,48,6),c.fill(),c.stroke()
|
||||
c.strokeStyle=PAD;c.lineWidth=5;c.beginPath();c.arc(0,0,32,PI*.15,PI*.45);c.stroke();c.restore();c.strokeStyle='#111'
|
||||
note(c,40+sin(T*t*8),170,-.2);note(c,226+sin(T*t*8+1),30,.25)
|
||||
c.save();c.translate(146,246);c.rotate(tr);c.scale(1.08,1.08);c.translate(-146,-246)
|
||||
const H=f=>{c.save();c.translate(156,112);c.rotate(.1);c.scale(.6,.6);c.translate(-128,-128);f();c.restore()}
|
||||
H(()=>{c.lineWidth=9
|
||||
for(const d of[-1,1]){c.save();c.translate(128+d*62,84);c.rotate(d*-.28+tr*3)
|
||||
c.fillStyle=HAIR;c.beginPath();c.moveTo(0,0);c.bezierCurveTo(d*40,2,d*54,80,d*30,150);c.quadraticCurveTo(d*22,166,d*8,158);c.bezierCurveTo(d*26,100,d*8,40,0,0);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(d*12,16);c.bezierCurveTo(d*28,50,d*34,100,d*22,140);c.stroke();c.strokeStyle='#111';c.lineWidth=9;c.restore()}
|
||||
c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(196,34,206,96,198,150);c.lineTo(58,150);c.bezierCurveTo(50,96,60,34,128,34);c.fill();c.stroke()})
|
||||
ds(c,17,10,SKIN,()=>{c.moveTo(150,200);c.lineTo(146,234)})
|
||||
ds(c,17,10,SKIN,()=>{c.moveTo(164,200);c.lineTo(190,218);c.lineTo(166,232)})
|
||||
c.lineWidth=5;c.fillStyle=SH;c.beginPath();c.ellipse(140,238,13,7,0,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.ellipse(161,236,12,6.5,-.5,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=SK;c.beginPath();c.moveTo(140,184);c.lineTo(174,184);c.lineTo(190,206)
|
||||
for(let k=1;k<=4;k++)c.quadraticCurveTo(190-k*16+8,212,190-k*16,206)
|
||||
c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=SKD;c.lineWidth=4;c.beginPath();c.moveTo(150,190);c.lineTo(146,204);c.moveTo(164,190);c.lineTo(168,204);c.stroke();c.strokeStyle='#111'
|
||||
ds(c,17,10,TOP,()=>{c.moveTo(142,156);c.quadraticCurveTo(116,170,138,184)})
|
||||
c.lineWidth=6;c.fillStyle=TOP;c.beginPath();c.moveTo(144,148);c.lineTo(170,148);c.quadraticCurveTo(178,150,178,160);c.lineTo(174,186);c.lineTo(140,186);c.lineTo(136,160);c.quadraticCurveTo(136,150,144,148);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=4;c.beginPath();for(let k=0;k<10;k++){const a=-PI/2+k*PI/5,r=k%2?4:9;c.lineTo(157+r*cos(a),168+r*sin(a))}c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(140,184,8,7,0,0,T);c.fill();c.stroke()
|
||||
H(()=>{c.lineWidth=9
|
||||
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=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,150,x+15,142),c.stroke()}
|
||||
else eye(c,103,140,-1,lx),eye(c,153,140,1,lx)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle='#c92a2a';c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,184,128,184);c.quadraticCurveTo(114,184,112,164);c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle='#ff8fab';c.beginPath();c.ellipse(128,186,9,7,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=9;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.strokeStyle=HL;c.lineWidth=7;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=7
|
||||
for(const d of[-1,1]){c.save();c.translate(128+d*62,84);c.rotate(d*-.28+tr*3);for(const e of[-1,1])c.beginPath(),c.moveTo(0,0),c.quadraticCurveTo(e*20,-20,e*24,-2),c.quadraticCurveTo(e*18,10,0,0),c.fill(),c.stroke();c.beginPath();c.arc(0,0,8,0,T);c.fill();c.stroke();c.restore()}
|
||||
const sy=96+40*sd;if(t<.9){c.save();c.globalAlpha=min(1,t*8,(0.9-t)*10);c.fillStyle=SW;c.lineWidth=6;c.beginPath();c.moveTo(66,sy-20);c.quadraticCurveTo(80,sy,66,sy+7);c.quadraticCurveTo(52,sy,66,sy-20);c.fill();c.stroke();c.restore()}
|
||||
})
|
||||
ds(c,17,10,TOP,()=>{c.moveTo(172,156);c.quadraticCurveTo(190,130,206,98)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(208,94,9,9,0,0,T);c.fill();c.stroke()
|
||||
ds(c,10,5,SKIN,()=>{c.moveTo(211,88);c.lineTo(220,70)})
|
||||
c.restore()
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// sandy haired girl with a side braid flips a big hourglass over with both hands, then sways her head tick-tock and blinks while she watches the sand trickle down
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=100
|
||||
const SKIN='#ffe3d1',HAIR='#ecd2a2',HD='#c9a066',HL='#fdf6e8',EYE='#20c997',ED='#087f5b',SW='#d0bfff',BL='#ffa8a8',MO='#c92a2a',WD='#c0805a',WDD='#8d5a3a',GL='#e7f5ff',SA='#ffc078',SAD='#e8590c',RIB='#ff8787'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return x*x*(3-2*x)}
|
||||
const eye=(c,x,y,d,gy)=>{
|
||||
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,y+gy,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,y+gy-10,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+gy+1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y+gy-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+gy+7,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()
|
||||
}
|
||||
const G=c=>{c.beginPath();c.moveTo(-30,-48);c.bezierCurveTo(-34,-14,-6,-8,-5,0);c.bezierCurveTo(-6,8,-34,14,-30,48);c.lineTo(30,48);c.bezierCurveTo(34,14,6,8,5,0);c.bezierCurveTo(6,-8,34,-14,30,-48);c.closePath()}
|
||||
const glass=(c,p,fl)=>{
|
||||
G(c);c.fillStyle=GL;c.fill()
|
||||
c.save();G(c);c.clip();c.fillStyle=SA;c.lineWidth=4
|
||||
if(p<1){const y=-40*(1-p);c.beginPath();c.moveTo(-40,y);c.quadraticCurveTo(0,y+10*(1-p),40,y);c.lineTo(40,2);c.lineTo(-40,2);c.closePath();c.fill();c.stroke()}
|
||||
const h=4+40*p;c.beginPath();c.moveTo(-40,52);c.lineTo(-40,48-h*.3);c.quadraticCurveTo(-14,48-h*.5,0,48-h);c.quadraticCurveTo(14,48-h*.5,40,48-h*.3);c.lineTo(40,52);c.closePath();c.fill();c.stroke()
|
||||
if(fl){c.strokeStyle=SAD;c.lineWidth=3.5;c.beginPath();c.moveTo(0,0);c.lineTo(0,48-h);c.stroke();c.strokeStyle='#111'}
|
||||
c.restore()
|
||||
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(-22,-40);c.quadraticCurveTo(-24,-22,-12,-12);c.moveTo(-22,40);c.lineTo(-23,30);c.stroke();c.strokeStyle='#111'
|
||||
c.lineWidth=5;G(c);c.stroke()
|
||||
}
|
||||
export default(c,t,i)=>{
|
||||
const th=PI*ez(t,0,.19),fl=t>=.19,p=fl?ez(t,.19,.9)*.9+.1*min(1,max(0,(t-.19)/.71)):1,ly=-12*sin(th),ok=t>=.9
|
||||
const tl=fl?.07*sin(T*(t-.19)/.81*2):0,bk=i==8,gy=fl?5:-2
|
||||
const H=(f,a)=>{c.save();c.translate(128,144);c.rotate(a);c.scale(.8,.8);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,206,160);c.quadraticCurveTo(208,186,190,196);c.lineTo(66,196);c.quadraticCurveTo(48,186,50,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()},tl)
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=SW;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(102,190);c.quadraticCurveTo(110,214,128,208);c.quadraticCurveTo(146,214,154,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
},0)
|
||||
H(()=>{
|
||||
c.fillStyle=HAIR;c.lineWidth=8;for(let k=5;k>=0;k--)c.beginPath(),c.ellipse(54-k*1.5,168+k*19,14-k*.6,12,k%2?.5:-.5,0,T),c.fill(),c.stroke()
|
||||
c.fillStyle=RIB;c.lineWidth=6;c.beginPath();c.ellipse(46,286,12,8,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=8;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(!fl){c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,128),c.lineTo(128+d*18,140),c.lineTo(128+d*38,152),c.stroke()}
|
||||
else if(bk){c.lineWidth=7;for(const x of[103,153])c.beginPath(),c.moveTo(x-14,146),c.quadraticCurveTo(x,153,x+14,146),c.stroke()}
|
||||
else eye(c,103,140,-1,gy),eye(c,153,140,1,gy)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(!fl){c.beginPath();c.moveTo(116,164);c.lineTo(140,164);c.quadraticCurveTo(140,178,128,178);c.quadraticCurveTo(116,178,116,164);c.fill();c.stroke()}
|
||||
else if(ok){c.beginPath();c.moveTo(116,165);c.quadraticCurveTo(128,182,140,165);c.closePath();c.fill();c.stroke()}
|
||||
else{c.beginPath();c.moveTo(118,170);c.quadraticCurveTo(123,166,128,170);c.quadraticCurveTo(133,174,138,170);c.stroke()}
|
||||
c.lineWidth=8;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(186,118,178,102);c.quadraticCurveTo(168,98,160,108);c.quadraticCurveTo(152,90,140,84);c.quadraticCurveTo(136,102,124,110)
|
||||
c.quadraticCurveTo(118,96,108,92);c.quadraticCurveTo(102,104,94,108);c.quadraticCurveTo(90,98,84,96);c.quadraticCurveTo(80,108,78,112)
|
||||
c.quadraticCurveTo(70,124,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=RIB;c.lineWidth=6;for(const y of[70,86])c.beginPath(),c.roundRect(156,y-5,26,10,5),c.fill(),c.stroke()
|
||||
},tl)
|
||||
const X=128,Y=202+ly,S=.8
|
||||
for(const d of[-1,1])ds(c,22,13,SW,()=>{c.moveTo(128+d*52,176);c.quadraticCurveTo(128+d*72,Y+8,X+d*38,Y+4)})
|
||||
c.save();c.translate(X,Y);c.scale(S,S*(fl?1:cos(th)||.01))
|
||||
glass(c,fl?p:1,fl&&p<.98)
|
||||
for(const s of[-1,1]){ds(c,14,7,WD,()=>{c.moveTo(s*38,-50);c.lineTo(s*38,50)})}
|
||||
c.fillStyle=WD;c.lineWidth=6;for(const y of[-62,48])c.beginPath(),c.roundRect(-48,y,96,14,6),c.fill(),c.stroke()
|
||||
c.strokeStyle=WDD;c.lineWidth=3;for(const y of[-55,55])c.beginPath(),c.moveTo(-36,y),c.lineTo(36,y),c.stroke();c.strokeStyle='#111'
|
||||
c.restore()
|
||||
if(th>.2&&th<3)for(const d of[0,PI])ds(c,8,3.5,'#fff',()=>{c.ellipse(X,Y,62,48,0,d-.6,d+.6)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.ellipse(X+d*37,Y+2,11,13,0,0,T),c.fill(),c.stroke()
|
||||
if(ok){const q=(t-.9)/.1;c.fillStyle='#ffe066';c.lineWidth=3.5;for(const[x,y]of[[212,150],[44,140]]){const r=12*sin(PI*q);if(r>1){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()}}}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// smug platinum blonde ojou-sama with bouncy drill curls and a jeweled gold crown, eyes half-lidded then tilting back into an ohoho laugh behind her hand, a PRO badge bobs, the crown glints and gold coins spin
|
||||
const{sin,cos,PI,max,abs}=Math,T=2*PI
|
||||
export const frames=16,delay=95
|
||||
const SKIN='#ffe3d1',HAIR='#f8f0d4',HD='#d8c58f',EYE='#e64980',ED='#a61e4d',DR='#9775fa',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',GD='#ffd43b',GDD='#f59f00',RU='#ff6b6b',SA='#74c0fc',SP='#ffe066'
|
||||
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 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+3,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-7,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+4,y+4,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+1,y+1,4,0,T);c.fill();c.beginPath();c.arc(x+8,y+10,2,0,T);c.fill();c.restore()
|
||||
c.save();c.beginPath();c.rect(x-20,y-24,40,22);c.clip();c.fillStyle=SKIN;c.beginPath();c.ellipse(x,y,16,19,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(x-17,y-1);c.quadraticCurveTo(x,y-8,x+17,y-1);c.moveTo(x+d*16,y-2);c.lineTo(x+d*22,y-6);c.stroke()
|
||||
}
|
||||
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()}
|
||||
const drill=(c,x,y,d,s)=>{for(let k=3;k>=0;k--){const w=25-k*5,yy=y+k*27*s
|
||||
c.fillStyle=HAIR;c.lineWidth=8;c.beginPath();c.moveTo(x-w,yy-16);c.bezierCurveTo(x-w-6,yy+4,x-w*.4,yy+20,x+d*w*.2,yy+22);c.bezierCurveTo(x+w,yy+20,x+w+6,yy+4,x+w,yy-16);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(x-d*w*.6,yy-8);c.quadraticCurveTo(x,yy+12,x+d*w*.7,yy+2);c.stroke();c.strokeStyle='#111'}}
|
||||
const PRO=c=>{const P=x=>{c.moveTo(x,20);c.lineTo(x,0);c.lineTo(x+6,0);c.bezierCurveTo(x+14,0,x+14,11,x+6,11);c.lineTo(x,11)}
|
||||
P(0);P(19);c.moveTo(26,11);c.lineTo(32,20);c.moveTo(51,10);c.ellipse(45,10,6,10,0,0,T)}
|
||||
export default(c,t,i)=>{
|
||||
const lf=i>=8,b=lf?-4*abs(sin(PI*(t-.5)*6)):0,tl=lf?-.06:0,bo=sin(T*t),sx=1+.05*sin(T*t*2)
|
||||
c.save();c.translate(54,42+4*bo);c.rotate(-.12)
|
||||
c.fillStyle=GD;c.lineWidth=6;c.beginPath();c.roundRect(-44,-22,88,44,22);c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle='rgba(255,255,255,.7)';const g=-90+180*((t*1.5)%1);c.beginPath();c.moveTo(g,-30);c.lineTo(g+14,-30);c.lineTo(g-2,30);c.lineTo(g-16,30);c.fill();c.restore()
|
||||
c.translate(-27,-10);ds(c,10,5,'#fff',()=>PRO(c));c.restore()
|
||||
for(const[x,y,o]of[[222,74,0],[204,122,.4]]){const cs=cos(T*(t+o)),yy=y+5*sin(T*(t+o))
|
||||
c.save();c.translate(x,yy);c.scale(max(.12,abs(cs)),1);c.fillStyle=GDD;c.lineWidth=5;c.beginPath();c.arc(0,0,15,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=GD;c.lineWidth=3;c.beginPath();c.arc(0,0,10,0,T);c.fill();c.stroke()
|
||||
if(cs>0){c.strokeStyle=GDD;c.lineWidth=3.5;c.beginPath();c.moveTo(0,-6);c.lineTo(0,6);c.stroke()}c.restore()}
|
||||
const H=f=>{c.save();c.translate(124,184+b);c.rotate(tl);c.scale(.7,.7);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,216,100,210,170);c.lineTo(206,250);c.lineTo(50,250);c.lineTo(46,170);c.bezierCurveTo(40,100,56,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=DR;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.moveTo(96,192);for(let k=0;k<5;k++)c.quadraticCurveTo(100+k*16,214,112+k*16,198);c.lineTo(160,192);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=GD;c.beginPath();c.moveTo(128,206);c.lineTo(140,218);c.lineTo(128,232);c.lineTo(116,218);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,204,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,190);c.moveTo(142,168);c.lineTo(142,190);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(lf){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.arc(x,148,15,1.15*PI,1.85*PI),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,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(lf){c.beginPath();c.moveTo(116,163);c.quadraticCurveTo(134,166,150,160);c.quadraticCurveTo(150,186,134,186);c.quadraticCurveTo(118,186,116,163);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(134,188,9,7,0,0,T);c.fill();c.restore()}
|
||||
else{c.beginPath();c.moveTo(118,170);c.quadraticCurveTo(132,174,144,164);c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,150)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,190,150)
|
||||
c.quadraticCurveTo(186,118,178,100);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,152,90);c.quadraticCurveTo(146,102,138,108)
|
||||
c.quadraticCurveTo(134,96,128,86);c.quadraticCurveTo(122,96,118,108);c.quadraticCurveTo(110,102,104,90);c.quadraticCurveTo(96,104,92,112)
|
||||
c.quadraticCurveTo(86,104,78,100);c.quadraticCurveTo(70,120,66,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=6;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
if(!lf){c.lineWidth=5;c.beginPath();c.moveTo(88,112);c.quadraticCurveTo(100,104,114,110);c.moveTo(142,110);c.quadraticCurveTo(156,104,168,112);c.stroke()}
|
||||
for(const d of[-1,1]){c.save();c.translate(128+d*84,146);c.scale(1,sx);drill(c,0,0,d,1);c.restore()}
|
||||
c.save();c.translate(128,46);c.rotate(.1)
|
||||
const cr=()=>{c.beginPath();c.moveTo(-46,14);c.lineTo(-52,-30);c.lineTo(-24,-6);c.lineTo(0,-42);c.lineTo(24,-6);c.lineTo(52,-30);c.lineTo(46,14);c.closePath()}
|
||||
c.fillStyle=GD;c.lineWidth=8;cr();c.fill()
|
||||
c.save();c.clip();c.fillStyle='rgba(255,255,255,.8)';const gx=-120+240*((t*1.5+.3)%1);c.beginPath();c.moveTo(gx,-50);c.lineTo(gx+16,-50);c.lineTo(gx-4,20);c.lineTo(gx-20,20);c.fill();c.restore();cr();c.stroke()
|
||||
c.fillStyle=GDD;c.lineWidth=6;c.beginPath();c.roundRect(-48,4,96,16,6);c.fill();c.stroke()
|
||||
c.fillStyle=GD;c.lineWidth=5;for(const x of[-52,0,52])c.beginPath(),c.arc(x,x?-32:-44,6,0,T),c.fill(),c.stroke()
|
||||
c.fillStyle=RU;c.lineWidth=5;c.beginPath();c.moveTo(0,-20);c.lineTo(10,-8);c.lineTo(0,4);c.lineTo(-10,-8);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SA;for(const x of[-28,28])c.beginPath(),c.arc(x,12,5,0,T),c.fill(),c.stroke()
|
||||
c.restore()
|
||||
})
|
||||
ds(c,24,15,DR,()=>{c.moveTo(70,256);c.quadraticCurveTo(62,214,82,196+b)})
|
||||
c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.ellipse(82,200+b,13,7,-.9,0,T);c.fill();c.stroke()
|
||||
c.save();c.translate(92,186+b);c.rotate(-.45);c.scale(.85,.85);c.fillStyle=SKIN;c.lineWidth=5
|
||||
c.beginPath();c.moveTo(-10,10);c.quadraticCurveTo(-14,-8,-2,-10);c.lineTo(20,-10);c.quadraticCurveTo(26,-7,20,-4);c.lineTo(22,-3);c.quadraticCurveTo(28,1,21,4);c.lineTo(20,5);c.quadraticCurveTo(25,9,18,11);c.quadraticCurveTo(4,16,-10,10);c.fill();c.stroke()
|
||||
c.restore()
|
||||
c.fillStyle=SP;c.lineWidth=3.5;for(const[x,y,o]of[[30,110,0],[212,30,.3],[160,24,.65],[236,170,.5]]){const r=11*max(0,sin(T*(t*2+o)));if(r>2)spark(c,x,y,r)}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// chestnut haired office girl with a messy side bun and a pencil in it, her printer spits pages flying wildly then jams with a crumpled sheet, rattles and puffs smoke while she pats it all flustered
|
||||
const{sin,cos,PI,max,min,abs}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#9c5b35',HD='#663818',HL='#ecc9ac',EYE='#40c057',ED='#2b8a3e',CAR='#fcc2d7',CAD='#f06595',BL='#ffa8a8',MO='#c92a2a',PR='#e9ecef',PRD='#adb5bd',SLT='#343a40',SCR='#a5d8ff',PEN='#ffd43b',SM='#ced4da',SW='#a5d8ff',LN='#a5d8ff'
|
||||
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 cl=(t,a,b)=>min(1,max(0,(t-a)/(b-a)))
|
||||
const eye=(c,x,y,d,gx,gy)=>{
|
||||
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+gx,y+gy,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+gx,y+gy-10,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+1,4.5,6,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+7,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()
|
||||
}
|
||||
const sheet=(c,x,y,a,s)=>{c.save();c.translate(x,y);c.rotate(a);c.scale(s,1);c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.rect(-14,-18,28,36);c.fill();c.stroke()
|
||||
c.strokeStyle=LN;c.lineWidth=3;c.beginPath();for(const y of[-9,-2,5])c.moveTo(-8,y),c.lineTo(8,y);c.stroke();c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const jam=t>=.42,sh=jam&&t<.9?(i%2?2.5:-2.5):0,pt=jam&&t>=.46&&t<.92,ph=pt?8*abs(sin(3*PI*cl(t,.46,.92))):0,jo=jam?1-cl(t,.82,.96):0
|
||||
const H=f=>{c.save();c.translate(78,210);c.rotate(jam?-.06:0);c.scale(.7,.7);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.save();c.translate(70,46);c.rotate(-.6)
|
||||
c.beginPath();c.arc(0,0,30,0,T);c.fill();c.stroke()
|
||||
for(const[a,l]of[[-2.2,22],[-1.4,18],[-.4,20],[2.6,16]]){c.beginPath();c.moveTo(cos(a)*26,sin(a)*26);c.quadraticCurveTo(cos(a+.3)*(30+l),sin(a+.3)*(30+l),cos(a+.5)*(26+l),sin(a+.5)*(26+l));c.stroke()}
|
||||
c.strokeStyle=HL;c.lineWidth=6;c.beginPath();c.arc(0,0,18,PI*1.1,PI*1.5);c.stroke();c.strokeStyle='#111'
|
||||
ds(c,13,6,PEN,()=>{c.moveTo(-40,8);c.lineTo(36,-8)});c.fillStyle='#ff8787';c.lineWidth=5;c.beginPath();c.arc(-42,9,5,0,T);c.fill();c.stroke();c.restore()
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,206,160);c.quadraticCurveTo(208,186,190,196);c.lineTo(66,196);c.quadraticCurveTo(48,186,50,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=CAR;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.moveTo(128,206),c.lineTo(128+d*30,188),c.lineTo(128+d*36,214),c.closePath(),c.fill(),c.stroke()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(128,206);c.lineTo(128,330);c.stroke()
|
||||
c.fillStyle=CAD;for(const y of[236,268])c.beginPath(),c.arc(140,y,5,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(jam){c.lineWidth=7;for(const x of[103,153]){c.beginPath();for(let a=0;a<T*1.6;a+=.3){const r=2+a*1.6;a?c.lineTo(x+cos(a+i)*r,142+sin(a+i)*r):c.moveTo(x+cos(a+i)*r,142+sin(a+i)*r)}c.stroke()}}
|
||||
else eye(c,103,140,-1,5,-6),eye(c,153,140,1,5,-6)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,164,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,168),c.lineTo(128+d*44+k+2,160),c.stroke()
|
||||
c.lineWidth=5;c.fillStyle=MO
|
||||
if(jam){c.beginPath();c.moveTo(112,172);for(let k=1;k<=4;k++)c.lineTo(112+k*8,k%2?166:172);c.stroke()}
|
||||
else{c.beginPath();c.ellipse(128,172,7,8,0,0,T);c.fill();c.stroke()}
|
||||
c.lineWidth=8;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(186,118,180,104);c.quadraticCurveTo(170,100,164,112);c.quadraticCurveTo(160,96,146,90);c.quadraticCurveTo(142,104,132,110)
|
||||
c.quadraticCurveTo(128,96,118,88);c.quadraticCurveTo(112,104,102,108);c.quadraticCurveTo(98,94,88,92);c.quadraticCurveTo(84,106,80,110)
|
||||
c.quadraticCurveTo(70,126,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=6;for(const[x,y,a,b]of[[150,40,170,22],[176,62,198,52],[110,38,104,16]])c.beginPath(),c.moveTo(x,y),c.quadraticCurveTo((x+a)/2+6,(y+b)/2+4,a,b),c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
if(jam){c.fillStyle=SW;c.lineWidth=6;for(const[x,y]of[[200,100],[212,132]])c.beginPath(),c.moveTo(x,y-16),c.quadraticCurveTo(x+11,y,x,y+6),c.quadraticCurveTo(x-11,y,x,y-16),c.fill(),c.stroke()}
|
||||
})
|
||||
c.save();c.translate(sh,0)
|
||||
c.save();c.translate(178,104);c.rotate(-.08);c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.rect(-30,-22,60,40);c.fill();c.stroke()
|
||||
c.strokeStyle=LN;c.lineWidth=3;c.beginPath();for(const y of[-12,-4,4])c.moveTo(-20,y),c.lineTo(20,y);c.stroke();c.restore()
|
||||
c.fillStyle=PRD;c.lineWidth=6;c.beginPath();c.roundRect(122,116,114,26,8);c.fill();c.stroke()
|
||||
c.fillStyle=PR;c.beginPath();c.roundRect(112,134,134,74,12);c.fill();c.stroke()
|
||||
c.fillStyle=SCR;c.lineWidth=4;c.beginPath();c.roundRect(192,146,30,16,4);c.fill();c.stroke()
|
||||
c.fillStyle=jam?(i%2?'#ff6b6b':'#ffc9c9'):'#69db7c';c.beginPath();c.arc(232,154,5,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=SLT;c.lineWidth=5;c.beginPath();c.roundRect(130,176,98,10,5);c.fill();c.stroke()
|
||||
c.fillStyle=PRD;c.lineWidth=5;c.beginPath();c.moveTo(124,206);c.lineTo(234,206);c.lineTo(242,222);c.lineTo(116,222);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(122,152);c.lineTo(122,196);c.stroke();c.strokeStyle='#111'
|
||||
if(jo>.2){const h=40*jo,P=[[146,182],[150,182-h*.7],[160,182-h*.95],[168,182-h*.6],[178,182-h],[188,182-h*.55],[198,182-h*.9],[208,182-h*.65],[212,182]];c.fillStyle='#fff';c.lineWidth=5;c.beginPath();for(const[x,y]of P)c.lineTo(x,y);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=PRD;c.lineWidth=3;c.beginPath();for(const k of[2,4,6])c.moveTo(P[k][0],P[k][1]+4),c.lineTo(P[k][0]+(k%4?-4:4),180);c.stroke();c.strokeStyle='#111'}
|
||||
c.restore()
|
||||
if(jam){const q=cl(t,.42,1),z=sin(PI*min(1,q*1.25));if(z>.05){c.fillStyle=SM;c.lineWidth=5;c.beginPath();for(const[x,y,r]of[[150,104,13],[168,88,18],[192,94,14],[178,66,13]])c.moveTo(x+4*q+r*z,y-44*q),c.arc(x+4*q,y-44*q,r*z,0,T);c.stroke();c.fill()}}
|
||||
if(!jam)for(let k=0;k<5;k++){const p=cl(t,k*.07-.04,k*.07+.22);if(p>0&&p<1){const vx=[-80,70,-20,104,30][k];sheet(c,178+vx*p,176-240*p+60*p*p,(k%2?1:-1)*T*p*.8,cos(T*p*1.5))}}
|
||||
if(t>=.42&&t<.52)for(const[a,r]of[[-.4,48],[.3,48],[-1.1,44]])ds(c,7,3,'#ffd43b',()=>{c.moveTo(178+cos(a-PI/2)*r,190+sin(a-PI/2)*r*.9);c.lineTo(178+cos(a-PI/2)*(r+16),190+sin(a-PI/2)*(r+16)*.9)})
|
||||
const hx=132,hy=124-ph
|
||||
ds(c,22,13,CAR,()=>{c.moveTo(118,240);c.quadraticCurveTo(150,200,hx-2,hy+12)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy+4,13,10,-.2,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();for(const k of[-4,2,8])c.moveTo(hx+k,hy+9),c.lineTo(hx+k+2,hy+14);c.stroke()
|
||||
if(pt&&ph>5)ds(c,7,3,'#fff',()=>{c.moveTo(hx-14,hy-6);c.lineTo(hx-22,hy-12);c.moveTo(hx+8,hy-10);c.lineTo(hx+12,hy-20)})
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
// plum bob girl waiting in line with ticket 42, glancing up as the hanging counter dings 39 40 41, then it hits 42, the display turns green and she lights up waving her ticket
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=100
|
||||
const SKIN='#ffe3d1',HAIR='#b565bd',HD='#7e3a8c',HL='#f6e3f8',EYE='#fab005',ED='#e67700',CA='#96f2d7',CD='#20c997',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',TK='#ffc9c9',TKD='#fa5252',BOX='#495057',SCR='#212529',RD='#ff6b6b',GR='#69db7c',SP='#ffe066'
|
||||
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 SG=['abcdef','bc','abged','abgcd','fgbc','afgcd','afgedc','abc','abcdefg','abcdfg']
|
||||
const seg=(c,x,y,w,h,s)=>{const P={a:[0,0,w,0],b:[w,0,w,h],c:[w,h,w,2*h],d:[0,2*h,w,2*h],e:[0,h,0,2*h],f:[0,0,0,h],g:[0,h,w,h]};c.beginPath();for(const k of s){const[a,b,e,f]=P[k];c.moveTo(x+a,y+b);c.lineTo(x+e,y+f)}c.stroke()}
|
||||
const num=(c,x,y,w,h,n,g)=>{for(const[k,d]of[...String(n)].entries())seg(c,x+k*g,y,w,h,SG[d])}
|
||||
const eye=(c,x,y,d,gx,gy,lid)=>{
|
||||
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+gx,y+gy,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+gx,y+gy-10,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+7,2,0,T);c.fill()
|
||||
if(lid){c.fillStyle=SKIN;c.fillRect(x-16,y-20,32,lid);c.restore();c.lineWidth=7;c.beginPath();c.moveTo(x-16,y-20+lid);c.lineTo(x+16,y-20+lid);c.lineTo(x+d*21,y-24+lid);c.stroke();return}
|
||||
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()
|
||||
}
|
||||
const star=(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=i<3?39:i<6?40:i<9?41:42,win=n==42,fr=i==3||i==6||i==9,u=win?(i-9)/6:0
|
||||
const hop=win?-10*sin(PI*min(1,u*2.2)):2*sin(T*i/3),ty=win?-18:0,ta=win?-.2+.12*sin(T*u*2):-.12+.06*sin(T*i/3)
|
||||
c.lineWidth=5;c.beginPath();c.moveTo(42,0);c.lineTo(42,14);c.moveTo(112,0);c.lineTo(112,14);c.stroke()
|
||||
c.fillStyle=BOX;c.lineWidth=6;c.beginPath();c.roundRect(14,14,126,76,14);c.fill();c.stroke()
|
||||
c.fillStyle=SCR;c.lineWidth=4;c.beginPath();c.roundRect(26,25,102,54,8);c.fill();c.stroke()
|
||||
c.strokeStyle=win?'#2b5f34':'#5c2626';c.lineWidth=7;num(c,48,32,20,20,88,40)
|
||||
c.shadowColor=win?GR:RD;c.shadowBlur=8;c.strokeStyle=win?GR:RD;num(c,48,32,20,20,n,40);c.shadowBlur=0;c.strokeStyle='#111'
|
||||
if(fr||win&&i<12)for(const[x,y,a]of[[146,24,-.6],[148,52,0],[146,80,.6]])ds(c,7,3,SP,()=>{c.moveTo(x+cos(a)*2,y+sin(a)*2);c.lineTo(x+cos(a)*14,y+sin(a)*14)})
|
||||
const H=f=>{c.save();c.translate(176,212+hop);c.scale(.74,.74);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,216,100,210,170);c.quadraticCurveTo(210,186,196,188);c.lineTo(60,188);c.quadraticCurveTo(46,186,46,170);c.bezierCurveTo(40,100,56,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=CA;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(102,188);c.lineTo(128,250);c.lineTo(154,188);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=TG;c.lineWidth=6;c.beginPath();c.moveTo(128,206);c.lineTo(114,198);c.lineTo(114,214);c.closePath();c.moveTo(128,206);c.lineTo(142,198);c.lineTo(142,214);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=CD;for(const y of[262,290])c.beginPath(),c.arc(150,y,5,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(win){eye(c,103,140,-1,0,-1,0);eye(c,153,140,1,0,-1,0);c.fillStyle=SP;c.lineWidth=3;for(const x of[99,149])star(c,x,134,7)}
|
||||
else{const g=fr;eye(c,103,140,-1,-4,g?-6:-2,g?0:12);eye(c,153,140,1,-4,g?-6:-2,g?0:12)}
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,win?16:13,win?9:7,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(win){c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,188,128,188);c.quadraticCurveTo(114,188,112,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,190,9,7,0,0,T);c.fill();c.restore()}
|
||||
else if(fr){c.beginPath();c.ellipse(128,170,5,6,0,0,T);c.fill();c.stroke()}
|
||||
else{c.beginPath();c.moveTo(120,170);c.lineTo(136,169);c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(56,184)
|
||||
c.bezierCurveTo(36,74,86,36,128,36);c.bezierCurveTo(170,36,220,74,200,184);c.lineTo(178,184)
|
||||
c.quadraticCurveTo(184,130,178,104);c.lineTo(166,112);c.lineTo(158,96);c.lineTo(146,110);c.lineTo(136,94);c.lineTo(124,110);c.lineTo(112,94);c.lineTo(102,110);c.lineTo(92,96);c.lineTo(80,108)
|
||||
c.quadraticCurveTo(72,130,78,184);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,58,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=SP;c.lineWidth=6;c.save();c.translate(78,74);c.rotate(-.5);star(c,0,0,14);c.restore()
|
||||
})
|
||||
const hx=92,hy=204+ty+hop*.6
|
||||
ds(c,22,13,CA,()=>{c.moveTo(126,262);c.quadraticCurveTo(122,hy+30,hx+8,hy+12)})
|
||||
c.save();c.translate(hx-28,hy-4);c.rotate(ta)
|
||||
c.fillStyle=TK;c.lineWidth=6;c.beginPath();c.moveTo(-40,-24);c.lineTo(40,-24);c.arc(40,0,8,-PI/2,PI/2,true);c.lineTo(40,24);c.lineTo(-40,24);c.arc(-40,0,8,PI/2,-PI/2,true);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=TKD;c.lineWidth=3;c.setLineDash([5,5]);c.beginPath();c.moveTo(-24,-18);c.lineTo(-24,18);c.stroke();c.setLineDash([])
|
||||
c.lineWidth=7;c.strokeStyle='#111';num(c,-12,-15,12,15,42,24)
|
||||
c.restore()
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx+4,hy+6,12,13,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();c.moveTo(hx-2,hy);c.lineTo(hx+6,hy-2);c.moveTo(hx-2,hy+7);c.lineTo(hx+7,hy+5);c.stroke()
|
||||
if(win){c.fillStyle=SP;c.lineWidth=3.5;for(const[x,y,o]of[[30,150,0],[132,148,.2],[44,250,.35],[232,120,.1]]){const r=13*sin(PI*min(1,max(0,(u-o)/.6)));if(r>1)star(c,x,y,r)}}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
// golden blonde girl with twin buns tapping five rating stars one by one with alternating hands, each lights up gold with a pop, then she throws her arms up beaming as they shimmer before resetting
|
||||
const{sin,cos,PI}=Math,T=2*PI
|
||||
export const frames=20,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#ffe066',HD='#f0b429',HL='#fff9db',EYE='#9775fa',ED='#5f3dc4',TOP='#74c0fc',RB='#ff6b6b',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',ST='#fcc419',OFF='#e9ecef',SP='#ffe066'
|
||||
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 eye=(c,x,y,d,gx,gy)=>{
|
||||
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+gx,y+gy+2,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+gx,y+gy-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+8,2,0,T);c.fill();c.restore()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const star=(c,x,y,r,f)=>{c.fillStyle=f;c.beginPath();for(let k=0;k<10;k++){const a=-PI/2+k*PI/5,q=k%2?r*.48:r;c.lineTo(x+cos(a)*q,y+sin(a)*q)}c.closePath();c.fill();c.stroke()}
|
||||
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()}
|
||||
const SX=[38,83,128,173,218],SY=218
|
||||
const LH=[[38,178],[38,190],[60,172],[83,190],[106,172],[128,190],[86,194],[80,196],[80,196],[80,196]],RH=[[176,196],[176,196],[176,196],[176,196],[176,196],[176,196],[150,172],[173,190],[196,172],[218,190]]
|
||||
export default(c,t,i)=>{
|
||||
const bm=i>=10&&i<17,lit=k=>i>=17?i<19-(k>2?1:0)&&k<4-(i-17)*2:i>=1+2*k,up=bm?1:0
|
||||
const L=bm?[46,104]:i<10?LH[i]:[80,196],R=bm?[210,104]:i<10?RH[i]:[176,196],act=i<6?L:R
|
||||
const H=f=>{c.save();c.translate(128,160-4*up);c.scale(.74,.74);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,204,160);c.quadraticCurveTo(204,190,186,198);c.lineTo(70,198);c.quadraticCurveTo(52,190,52,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(98,190);c.lineTo(128,236);c.lineTo(158,190);c.lineTo(176,198);c.lineTo(128,262);c.lineTo(80,198);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle=RB;c.lineWidth=7;for(const d of[-1,1])c.beginPath(),c.moveTo(128,232),c.lineTo(128+d*22,220),c.lineTo(128+d*20,246),c.closePath(),c.fill(),c.stroke()
|
||||
c.beginPath();c.arc(128,233,7,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=9;for(const d of[-1,1]){c.fillStyle=HAIR;c.beginPath();c.arc(128+d*58,50,30,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.arc(128+d*58,50,18,PI*(d>0?1.1:1.6),PI*(d>0?1.6:2.1));c.stroke();c.strokeStyle='#111';c.lineWidth=9}
|
||||
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(bm){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,15,1.15*PI,1.85*PI),c.stroke()}
|
||||
else{const gx=i<17?(act[0]-128)/14:0,gy=i<17?5:0;eye(c,103,140,-1,gx,gy);eye(c,153,140,1,gx,gy)}
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(bm){c.beginPath();c.moveTo(110,163);c.quadraticCurveTo(128,168,146,163);c.quadraticCurveTo(144,190,128,190);c.quadraticCurveTo(112,190,110,163);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,192,10,8,0,0,T);c.fill();c.restore()}
|
||||
else{c.beginPath();c.moveTo(118,166);c.quadraticCurveTo(128,180,138,166);c.closePath();c.fill();c.stroke()}
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(70,150)
|
||||
c.bezierCurveTo(54,74,88,36,128,36);c.bezierCurveTo(168,36,202,74,186,150)
|
||||
c.quadraticCurveTo(186,118,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,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
})
|
||||
c.fillStyle='#fff';c.lineWidth=7;c.beginPath();c.roundRect(10,188,236,60,18);c.fill();c.stroke()
|
||||
for(let k=0;k<5;k++){const on=lit(k),p=i-1-2*k,s=on&&i<10?(p==0?1.35:p==1?1.12:1):bm?1+.08*sin(T*(t*3-k*.2)):1
|
||||
c.lineWidth=5;star(c,SX[k],SY,19*s,on?ST:OFF)
|
||||
if(on){c.strokeStyle='#fff';c.lineWidth=3.5;c.beginPath();c.moveTo(SX[k]-6*s,SY-6*s);c.lineTo(SX[k]-2*s,SY-11*s);c.stroke();c.strokeStyle='#111'}
|
||||
if(on&&i<10&&p==0)ds(c,7,3,SP,()=>{for(let j=0;j<6;j++){const a=-PI/2+j*PI/3+.5;c.moveTo(SX[k]+cos(a)*26,SY+sin(a)*26);c.lineTo(SX[k]+cos(a)*36,SY+sin(a)*36)}})}
|
||||
for(const[[x,y],sx,d]of[[L,92,-1],[R,164,1]]){ds(c,24,14,TOP,()=>{c.moveTo(sx,180-4*up);bm?c.quadraticCurveTo(sx+d*40,180,x,y+10):c.quadraticCurveTo(sx+d*26,200,x,y)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;if(!bm&&x==act[0]&&y==act[1]&&i<10)c.beginPath(),c.roundRect(x-4.5,y,9,17,4.5),c.fill(),c.stroke()
|
||||
c.beginPath();c.ellipse(x,y,12,12,0,0,T);c.fill();c.stroke()}
|
||||
if(bm){c.fillStyle=SP;c.lineWidth=3.5;for(const[x,y,o]of[[30,58,0],[226,52,.33],[214,140,.66],[44,150,.5]]){const r=10*(.6+.4*sin(T*(t*2+o)));spark(c,x,y,r)}}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
// cyan haired girl with a bouncy ahoge holds her phone up to a big qr code, a red laser line sweeps down it, then a green check pops and she cheers
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#3bc9db',HD='#0c8599',HL='#e3fafc',EYE='#f06595',ED='#a61e4d',HO='#ffe066',HOD='#fab005',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',PH='#b197fc',PS='#364fc7',LZ='#ff4d4d',OK='#51cf66',SP='#ffe066'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return x*x*(3-2*x)}
|
||||
const eye=(c,x,y,d,gx,gy)=>{
|
||||
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+gx,y+gy,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+gx,y+gy-10,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+1,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-6,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+7,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()
|
||||
}
|
||||
const star=(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()}
|
||||
const QX=14,QY=20,QS=100,N=11,M=[...Array(N*N)].map((_,k)=>{const v=sin(k%N*12.9898+(k/N|0)*78.233)*43758.5453;return v-Math.floor(v)>.48})
|
||||
export default(c,t,i)=>{
|
||||
const sc=t<.5,ly=QY+12+(QS-24)*(sc?ez(t,0,.48):1),ok=t>=.5&&t<.94,q=min(1,max(0,(t-.5)/.12)),pb=ok?(1+2.7*(q-1)**3+1.7*(q-1)**2)*(1-ez(t,.86,.94)):0
|
||||
const hop=ok?-6*sin(PI*min(1,(t-.5)/.2)):0,aw=sin(T*t*2)*.25
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.strokeStyle=ok?OK:'#111';c.beginPath();c.roundRect(QX,QY,QS,QS,12);c.fill();c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle='#212529';const m=(QS-20)/N
|
||||
for(let y=0;y<N;y++)for(let x=0;x<N;x++){const f=(x<4||x>6)&&y<4||x<4&&y>6;if(!f&&M[y*N+x])c.beginPath(),c.roundRect(QX+10+x*m,QY+10+y*m,m+.3,m+.3,1.5),c.fill()}
|
||||
for(const[x,y]of[[0,0],[8,0],[0,8]]){const X=QX+10+x*m,Y=QY+10+y*m;c.lineWidth=4.5;c.beginPath();c.roundRect(X+2.2,Y+2.2,3*m-4.4,3*m-4.4,4);c.stroke();c.beginPath();c.roundRect(X+m-.5,Y+m-.5,m+1,m+1,2);c.fill()}
|
||||
const px=132,py=126+hop,pa=-.35
|
||||
if(sc){c.fillStyle='rgba(255,77,77,.3)';c.beginPath();c.moveTo(px-18,py-26);c.lineTo(QX+6,ly);c.lineTo(QX+QS-6,ly);c.closePath();c.fill()
|
||||
ds(c,10,5,LZ,()=>{c.moveTo(QX+6,ly);c.lineTo(QX+QS-6,ly)})}
|
||||
const H=f=>{c.save();c.translate(188,218+hop);c.scale(.72,.72);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,206,160);c.quadraticCurveTo(208,186,190,196);c.lineTo(66,196);c.quadraticCurveTo(48,186,50,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=HO;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=HOD;c.beginPath();c.moveTo(84,196);c.quadraticCurveTo(128,176,172,196);c.lineTo(166,214);c.quadraticCurveTo(128,200,90,214);c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*14,212),c.lineTo(128+d*16,250),c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*16,254,5,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(ok){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else eye(c,103,140,-1,-5,-3),eye(c,153,140,1,-5,-3)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(ok){c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,188,128,188);c.quadraticCurveTo(114,188,112,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,190,9,7,0,0,T);c.fill();c.restore()}
|
||||
else{c.beginPath();c.moveTo(118,168);c.quadraticCurveTo(128,174,138,168);c.stroke();c.fillStyle=TG;c.lineWidth=4;c.beginPath();c.ellipse(122,174,5,6,.3,0,T);c.fill();c.stroke()}
|
||||
c.save();c.translate(130,40);c.rotate(aw);c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(-8,4);c.bezierCurveTo(-14,-30,24,-40,26,-18);c.bezierCurveTo(26,-6,12,-8,10,-16);c.bezierCurveTo(12,-24,4,-22,6,4);c.closePath();c.fill();c.stroke();c.restore()
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,160)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,190,160)
|
||||
c.quadraticCurveTo(188,120,178,100);c.quadraticCurveTo(168,106,160,114);c.quadraticCurveTo(154,96,142,90);c.quadraticCurveTo(138,104,130,112)
|
||||
c.quadraticCurveTo(124,96,112,90);c.quadraticCurveTo(108,104,100,110);c.quadraticCurveTo(94,98,86,98);c.quadraticCurveTo(82,108,80,112)
|
||||
c.quadraticCurveTo(70,128,66,160);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=PH;c.lineWidth=6;for(const[x,y]of[[172,82],[178,96]])c.beginPath(),c.arc(x,y,6,0,T),c.fill(),c.stroke()
|
||||
})
|
||||
ds(c,22,13,HO,()=>{c.moveTo(146,262);c.quadraticCurveTo(140,py+50,px+4,py+22)})
|
||||
c.save();c.translate(px,py);c.rotate(pa)
|
||||
c.fillStyle=PH;c.lineWidth=6;c.beginPath();c.roundRect(-20,-34,40,68,9);c.fill();c.stroke()
|
||||
c.fillStyle=ok?OK:PS;c.lineWidth=3.5;c.beginPath();c.roundRect(-14,-26,28,50,4);c.fill();c.stroke()
|
||||
if(ok){c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(-7,0);c.lineTo(-2,6);c.lineTo(8,-6);c.stroke()}
|
||||
else{c.strokeStyle='#fff';c.lineWidth=3;c.beginPath();for(const[a,b]of[[-1,-1],[1,-1],[-1,1],[1,1]])c.moveTo(a*8,b*9),c.lineTo(a*8,b*16),c.lineTo(a*2,b*16);c.stroke();c.strokeStyle=LZ;c.beginPath();c.moveTo(-9,-12+24*ez(t,0,.48));c.lineTo(9,-12+24*ez(t,0,.48));c.stroke()}
|
||||
c.strokeStyle='#111';c.restore()
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(px+6,py+20,12,11,pa,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();c.moveTo(px-2,py+16);c.lineTo(px+4,py+12);c.stroke()
|
||||
if(pb>.02){c.save();c.translate(QX+QS/2,QY+QS/2);c.scale(pb,pb);c.fillStyle=OK;c.lineWidth=6;c.beginPath();c.arc(0,0,30,0,T);c.fill();c.stroke()
|
||||
ds(c,14,7,'#fff',()=>{c.moveTo(-13,0);c.lineTo(-4,10);c.lineTo(14,-10)});c.restore()
|
||||
c.fillStyle=SP;c.lineWidth=3.5;for(const[x,y,o]of[[124,26,0],[18,136,.06],[118,104,.12]]){const r=12*sin(PI*min(1,max(0,(t-.52-o)/.3)));if(r>1)star(c,x,y,r)}}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// royal blue ponytailed girl in a little knight getup braces a big shield with a green check while grumpy bug viruses fly in, bonk off it with a star and tumble away dizzy
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=15,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#4c6ef5',HD='#2f44b8',HL='#dbe4ff',EYE='#fcc419',ED='#e67700',TOP='#ff8787',AR='#dee2e6',ARL='#f8f9fa',ARD='#adb5bd',BL='#ffa8a8',GD='#ffd43b',GDD='#f59f00',SH='#e9ecef',SHL='#f8f9fa',OK='#40c057',SP='#ffe066',BUG=['#b197fc','#69db7c','#ff8787']
|
||||
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 L=(a,b,u)=>a+(b-a)*u
|
||||
const eye=(c,x,y,d,lid)=>{
|
||||
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+2,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-8,13,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+4,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x,y-4,4.5,0,T);c.fill();c.beginPath();c.arc(x+9,y+9,2,0,T);c.fill()
|
||||
c.fillStyle=SKIN;c.fillRect(x-16,y-20,32,lid);c.restore()
|
||||
c.lineWidth=7;c.beginPath();c.moveTo(x-16,y-20+lid);c.quadraticCurveTo(x,y-24+lid,x+16,y-20+lid);c.lineTo(x+d*21,y-25+lid);c.stroke()
|
||||
}
|
||||
const star=(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()}
|
||||
const bug=(c,x,y,a,k,dz,s)=>{c.save();c.translate(x,y);c.rotate(a);k<2?c.scale(1.25/s,1.25*s):c.scale(1.25*s,1.25/s)
|
||||
c.fillStyle=BUG[k];c.lineWidth=4;for(let j=0;j<7;j++){const b=j*T/7;c.beginPath();c.moveTo(cos(b)*10,sin(b)*10);c.lineTo(cos(b)*17,sin(b)*17);c.stroke();c.beginPath();c.arc(cos(b)*17,sin(b)*17,3.5,0,T);c.fill();c.stroke()}
|
||||
c.lineWidth=4.5;c.beginPath();c.arc(0,0,12.5,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=2.5;if(dz)for(const d of[-1,1])c.beginPath(),c.moveTo(d*5-2.5,-4),c.lineTo(d*5+2.5,1),c.moveTo(d*5+2.5,-4),c.lineTo(d*5-2.5,1),c.stroke()
|
||||
else{c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(d*5,-1,2.6,0,T),c.fill();c.lineWidth=2.5;c.beginPath();c.moveTo(-9,-8);c.lineTo(-2,-5);c.moveTo(9,-8);c.lineTo(2,-5);c.stroke()}
|
||||
c.lineWidth=2.5;c.beginPath();c.arc(0,dz?7:9,4,PI*1.15,PI*1.85);c.stroke();c.restore()}
|
||||
const A=[[150,-26],[250,-24],[292,96]],C=[[160,94],[208,100],[230,148]],B=[[100,-30],[296,30],[296,200]]
|
||||
export default(c,t,i)=>{
|
||||
const ps=[0,1,2].map(k=>(i+5*k)%15/15),hit=ps.some(p=>p>=.4&&p<.44),rc=hit?-4:0
|
||||
const H=f=>{c.save();c.translate(78,200);c.scale(.7,.7);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
const sw=.12*sin(T*t)
|
||||
c.save();c.translate(90,40);c.rotate(sw);c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(4,-14);c.bezierCurveTo(-60,-34,-80,40,-66,110);c.bezierCurveTo(-58,150,-66,180,-52,214);c.quadraticCurveTo(-40,190,-34,170);c.bezierCurveTo(-34,120,-50,40,6,14);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=6;c.beginPath();c.moveTo(-36,-8);c.bezierCurveTo(-58,10,-60,60,-54,100);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=GD;c.lineWidth=7;c.beginPath();c.ellipse(0,0,13,17,-.6,0,T);c.fill();c.stroke();c.restore()
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(196,34,206,96,198,150);c.lineTo(58,150);c.bezierCurveTo(50,96,60,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=AR;c.beginPath();c.moveTo(80,206);c.quadraticCurveTo(128,196,176,206);c.lineTo(182,300);c.quadraticCurveTo(128,316,74,300);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=ARL;c.lineWidth=7;c.beginPath();c.moveTo(96,222);c.quadraticCurveTo(92,250,96,280);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=GD;c.lineWidth=6;c.beginPath();c.moveTo(128,236);c.lineTo(138,250);c.lineTo(128,264);c.lineTo(118,250);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=ARD;c.lineWidth=7;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*66,212,26,16,d*.3,PI*(d>0?1:1),PI*2+.01),c.ellipse(128+d*66,212,26,10,d*.3,0,PI),c.fill(),c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(hit){c.lineWidth=8;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,7),eye(c,153,140,1,7)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;if(hit){c.fillStyle='#fff';c.beginPath();c.roundRect(112,162,32,14,6);c.fill();c.stroke();c.beginPath();c.moveTo(114,169);c.lineTo(142,169);c.stroke()}
|
||||
else{c.beginPath();c.moveTo(114,166);c.quadraticCurveTo(130,174,142,162);c.stroke()}
|
||||
c.lineWidth=8;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(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,124,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';ds(c,16,8,ARD,()=>{c.ellipse(128,108,60,62,0,PI*1.15,PI*1.85)})
|
||||
c.fillStyle='#ff6b6b';c.lineWidth=6;c.beginPath();c.moveTo(128,36);c.lineTo(138,48);c.lineTo(128,60);c.lineTo(118,48);c.closePath();c.fill();c.stroke()
|
||||
})
|
||||
const SXc=180+rc,SYc=178
|
||||
c.save();c.translate(SXc,SYc);c.rotate(.18+(hit?-.05:0));c.scale(.92,.92)
|
||||
const sp=()=>{c.beginPath();c.moveTo(-50,-60);c.quadraticCurveTo(0,-70,50,-60);c.bezierCurveTo(54,0,40,40,0,66);c.bezierCurveTo(-40,40,-54,0,-50,-60);c.closePath()}
|
||||
sp();c.fillStyle=GD;c.lineWidth=7;c.fill();c.stroke()
|
||||
c.save();c.translate(0,2);c.scale(.82,.82);sp();c.fillStyle=SH;c.fill();c.clip();c.fillStyle=SHL;c.fillRect(0,-80,70,160);c.restore()
|
||||
c.save();c.translate(0,2);c.scale(.82,.82);sp();c.lineWidth=5;c.stroke();c.restore()
|
||||
c.strokeStyle=GDD;c.lineWidth=3;c.beginPath();c.moveTo(-40,-56);c.quadraticCurveTo(0,-64,40,-56);c.stroke()
|
||||
ds(c,24,13,OK,()=>{c.moveTo(-22,0);c.lineTo(-6,16);c.lineTo(24,-18)})
|
||||
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(-34,-38);c.quadraticCurveTo(-36,-10,-28,10);c.stroke();c.strokeStyle='#111'
|
||||
c.restore()
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(SXc-44,SYc+4,11,13,0,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();c.moveTo(SXc-48,SYc);c.lineTo(SXc-40,SYc-2);c.moveTo(SXc-48,SYc+7);c.lineTo(SXc-40,SYc+5);c.stroke()
|
||||
ps.forEach((p,k)=>{const[a,b]=A[k],[cx,cy]=C[k],[e,f]=B[k]
|
||||
if(p<.4){const u=(p/.4)**1.6;bug(c,L(a,cx,u),L(b,cy,u)+4*sin(T*p*6),0,k,0,1)}
|
||||
else{const u=(p-.4)/.6,sq=p<.44?.7:1;bug(c,L(cx,e,u)+(p<.44?-2:0),L(cy,f,u)-30*sin(PI*u),p<.44?0:-T*u*1.5,k,p>=.44,sq)
|
||||
if(p<.44){c.fillStyle=SP;c.lineWidth=4;star(c,cx-14,cy+16,15);for(const b of[-.6,.4,1.4])ds(c,7,3,SP,()=>{c.moveTo(cx-14+cos(b-PI/2)*20,cy+16+sin(b-PI/2)*20);c.lineTo(cx-14+cos(b-PI/2)*30,cy+16+sin(b-PI/2)*30)})}}})
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
// teal ponytailed girl in a yellow hoodie with her tongue out in concentration sliding the knob of a three slider settings panel, the other knobs bobbing like an equalizer and a little gear spinning on the corner
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#1fb5a5',HD='#0b7a6e',HL='#c3fae8',EYE='#9775fa',ED='#5f3dc4',HO='#ffe066',HOD='#fab005',BL='#ffa8a8',PN='#f8f9fa',GV='#495057',GR='#ced4da',KC=['#ff8fab','#ffd43b','#74c0fc'],TG='#ff8fab',CLIP='#ff8787',Z=.62
|
||||
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 eye=(c,x,y,d,b)=>{
|
||||
if(b){c.lineWidth=8;c.beginPath();c.moveTo(x-14,y+2);c.quadraticCurveTo(x,y+10,x+14,y+2);c.stroke();return}
|
||||
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,9,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x-4,y+5,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-8,y-2,4.5,0,T);c.fill();c.beginPath();c.arc(x+1,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 K=[142+36*sin(T*t*2+1),142+40*sin(T*t*2+3.6),142+46*sin(T*t)],X=[38,68,98],bk=i==6,sw=.12*sin(T*t*2)
|
||||
c.fillStyle=PN;c.lineWidth=6;c.beginPath();c.roundRect(10,44,116,194,16);c.fill();c.stroke()
|
||||
c.strokeStyle='#e9ecef';c.lineWidth=5;c.beginPath();c.moveTo(20,64);c.lineTo(20,222);c.stroke();c.strokeStyle='#111'
|
||||
K.forEach((y,k)=>{const x=X[k];ds(c,10,5,GV,()=>{c.moveTo(x,70);c.lineTo(x,214)});ds(c,10,5,KC[k],()=>{c.moveTo(x,y);c.lineTo(x,214)})
|
||||
c.fillStyle=KC[k];c.lineWidth=5;c.beginPath();c.roundRect(x-15,y-9,30,18,6);c.fill();c.stroke();c.strokeStyle='#fff';c.lineWidth=3;c.beginPath();c.moveTo(x-8,y-3);c.lineTo(x+2,y-3);c.stroke();c.strokeStyle='#111'})
|
||||
for(const[x,y,n,r,a]of[[154,42,8,24,T*t/4],[190,22,6,15,-T*t/3+.3]]){c.save();c.translate(x,y);c.rotate(a);c.fillStyle=GR;c.lineWidth=5;c.beginPath()
|
||||
for(let k=0;k<n;k++){const b=k*T/n,w=2.1/n;for(const[q,o]of[[r*.7,-w],[r,-w*.65],[r,w*.65],[r*.7,w]])c.lineTo(cos(b+o)*q,sin(b+o)*q)}
|
||||
c.closePath();c.fill();c.stroke();c.fillStyle=PN;c.beginPath();c.arc(0,0,r*.3,0,T);c.fill();c.stroke();c.restore()}
|
||||
const H=f=>{c.save();c.translate(186,188);c.scale(Z,Z);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=10;c.save();c.translate(166,42);c.rotate(sw)
|
||||
c.fillStyle=HAIR;c.beginPath();c.moveTo(-8,-4);c.bezierCurveTo(50,-24,70,40,56,124);c.quadraticCurveTo(50,150,30,158);c.quadraticCurveTo(46,104,30,64);c.quadraticCurveTo(18,30,-10,16);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=6;c.beginPath();c.moveTo(20,8);c.bezierCurveTo(40,30,50,80,46,120);c.stroke();c.strokeStyle=HL;c.lineWidth=8;c.beginPath();c.moveTo(32,4);c.quadraticCurveTo(48,18,56,44);c.stroke();c.strokeStyle='#111';c.lineWidth=10
|
||||
c.fillStyle=CLIP;c.beginPath();c.ellipse(0,4,14,19,.7,0,T);c.fill();c.stroke();c.restore()
|
||||
c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,210,96,202,150);c.lineTo(54,150);c.bezierCurveTo(46,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=HO;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,380);c.lineTo(216,380);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(70,206);c.quadraticCurveTo(128,262,186,206);c.quadraticCurveTo(160,226,128,228);c.quadraticCurveTo(96,226,70,206);c.fillStyle=HOD;c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.lineWidth=6;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*14,230),c.lineTo(128+d*16,276),c.stroke();c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*16,282,7,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=10;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()
|
||||
eye(c,103,140,-1,bk);eye(c,153,140,1,bk)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=7;c.beginPath();c.moveTo(114,168);c.quadraticCurveTo(126,174,140,166);c.stroke()
|
||||
c.fillStyle=TG;c.lineWidth=6;c.beginPath();c.moveTo(116,170);c.quadraticCurveTo(112,184,118,186);c.quadraticCurveTo(126,184,126,172);c.fill();c.stroke()
|
||||
c.lineWidth=10;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(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,124,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=9;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke();c.strokeStyle='#111'
|
||||
})
|
||||
const hy=K[2]
|
||||
ds(c,20,11,HO,()=>{c.moveTo(150,222);c.quadraticCurveTo(140,max(hy+40,196),124,hy+8)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(122,hy+3,11,12,0,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.ellipse(112,hy-6,5,8,-.6,0,T);c.fill();c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
// lemon haired girl with odango buns pumping her fist and cheerfully shouting into a red megaphone, sound arcs blast out toward a pulsing share icon badge
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=12,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#ffe066',HD='#f59f00',HL='#fff9db',TOP='#4dabf7',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',MG='#ff8787',MGD='#e03131',HN='#495057',BOW='#ff8fab',SH='#4dabf7',SC=['#ff8fab','#69db7c','#ffd43b']
|
||||
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'}
|
||||
export default(c,t,i)=>{
|
||||
const p=(t*2)%1,k=p<.5?sin(T*p):0,MX=102,MY=160,MA=-.1-.04*k,bs=1+.18*sin(PI*min(1,p/.4))*(p<.4?1:0)
|
||||
const H=f=>{c.save();c.translate(96,172-3*k);c.rotate(-.04*k);c.scale(.72,.72);c.translate(-128,-186);f();c.restore()}
|
||||
c.save();c.translate(206,54);c.scale(bs,bs);c.rotate(.12*sin(T*t))
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.arc(0,0,34,0,T);c.fill();c.stroke()
|
||||
ds(c,10,5,SH,()=>{c.moveTo(-14,0);c.lineTo(12,-14);c.moveTo(-14,0);c.lineTo(12,14)})
|
||||
c.lineWidth=4;for(const[n,[x,y]]of[[-14,0],[12,-14],[12,14]].entries()){const r=8*(1+.3*max(0,sin(PI*min(1,max(0,(p-n*.08)/.3)))));c.fillStyle=SC[n];c.beginPath();c.arc(x,y,r,0,T);c.fill();c.stroke()}
|
||||
c.restore()
|
||||
for(let n=0;n<3;n++){const q=(p+n/3)%1,r=26+40*q,w=1-q;if(w>.1)ds(c,9*w+2,5*w,'#fff',()=>{c.arc(MX+cos(MA)*86,MY+sin(MA)*86,r,MA-.6,MA+.6)})}
|
||||
ds(c,22,13,TOP,()=>{c.moveTo(52,222);c.quadraticCurveTo(20,190,26,130-10*k)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.save();c.translate(26,122-10*k);c.rotate(-.2+.2*k);c.beginPath();c.ellipse(0,0,13,14,0,0,T);c.fill();c.stroke();c.lineWidth=3;c.beginPath();c.moveTo(-6,-4);c.lineTo(6,-4);c.moveTo(-6,2);c.lineTo(6,2);c.stroke();c.restore()
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,96,204,176);c.lineTo(52,176);c.bezierCurveTo(44,96,58,34,128,34);c.fill();c.stroke()
|
||||
for(const d of[-1,1]){c.fillStyle=HAIR;c.beginPath();c.arc(128+d*54,44,28,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.arc(128+d*54,44,15,PI*(d<0?1.1:-.1),PI*(d<0?1.9:.7));c.stroke();c.strokeStyle='#111';c.lineWidth=9
|
||||
c.fillStyle=BOW;c.beginPath();c.moveTo(128+d*34,58);c.lineTo(128+d*26,40);c.lineTo(128+d*44,44);c.closePath();c.fill();c.stroke()}
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(96,191);c.lineTo(128,226);c.lineTo(160,191);c.lineTo(170,202);c.lineTo(128,246);c.lineTo(86,202);c.closePath();c.fill();c.lineWidth=7;c.stroke()
|
||||
c.fillStyle=SKIN;c.lineWidth=9;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,210,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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()
|
||||
c.lineWidth=9;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,128),c.lineTo(128+d*18,140),c.lineTo(128+d*38,152),c.stroke()
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,164,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,168),c.lineTo(128+d*44+k+2,160),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO;c.beginPath();c.moveTo(104,162);c.quadraticCurveTo(120,164,138,160);c.quadraticCurveTo(140,192,120,192);c.quadraticCurveTo(100,192,104,162);c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(118,194,10,8,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(64,176)
|
||||
c.bezierCurveTo(48,74,88,36,128,36);c.bezierCurveTo(168,36,208,74,192,176);c.quadraticCurveTo(184,166,178,174)
|
||||
c.quadraticCurveTo(184,124,178,104);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,152,92);c.quadraticCurveTo(144,104,136,110)
|
||||
c.quadraticCurveTo(132,96,124,88);c.quadraticCurveTo(118,102,110,108);c.quadraticCurveTo(104,96,94,94);c.quadraticCurveTo(90,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,130,78,174);c.quadraticCurveTo(72,166,64,176);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
})
|
||||
c.save();c.translate(MX-2*k,MY);c.rotate(MA)
|
||||
c.fillStyle=HN;c.lineWidth=5;c.beginPath();c.roundRect(22,4,13,30,4);c.fill();c.stroke()
|
||||
c.fillStyle=MG;c.lineWidth=6;c.beginPath();c.moveTo(0,-9);c.lineTo(84,-32);c.lineTo(84,32);c.lineTo(0,9);c.closePath();c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle='#fff';c.beginPath();c.rect(44,-40,13,80);c.fill();c.restore()
|
||||
c.strokeStyle=MGD;c.lineWidth=4;c.beginPath();c.moveTo(6,5);c.lineTo(82,26);c.stroke();c.strokeStyle='#111';c.lineWidth=6
|
||||
c.beginPath();c.moveTo(0,-9);c.lineTo(84,-32);c.lineTo(84,32);c.lineTo(0,9);c.closePath();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.roundRect(-8,-10,12,20,5);c.fill();c.stroke()
|
||||
c.beginPath();c.ellipse(84,0,11,33,0,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=MGD;c.lineWidth=4;c.beginPath();c.ellipse(86,0,5,25,0,0,T);c.fill();c.stroke()
|
||||
c.restore()
|
||||
const hx=MX+30*cos(MA)-26*sin(MA)-2*k,hy=MY+30*sin(MA)+26*cos(MA)
|
||||
ds(c,22,13,TOP,()=>{c.moveTo(150,262);c.quadraticCurveTo(152,222,hx+4,hy+10)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy,12,12,0,0,T);c.fill();c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
// aqua haired girl with twin buns sitting on an overstuffed storage box straining to squash the lid shut, it keeps bursting open and shooting files out while the red "FULL" bar flashes
|
||||
const{sin,cos,PI}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#3bc9db',HD='#0c8599',HL='#c5f6fa',EYE='#f76707',TE='#ff8fab',TED='#e64980',SHT='#4c6ef5',SHO='#ffd43b',BL='#ffa8a8',BX='#e8b07a',BXD='#c47f45',TP='#fff3bf',BR='#fa5252',BRL='#ff8787',SW='#a5d8ff',FC=[['#d0ebff','#339af0'],['#d3f9d8','#40c057'],['#fff3bf','#fab005'],['#f3d9fa','#be4bdb']]
|
||||
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 file=(c,x,y,a,[f,l],z=1)=>{c.save();c.translate(x,y);c.rotate(a);c.scale(z,z)
|
||||
c.fillStyle=f;c.lineWidth=5;c.beginPath();c.moveTo(-14,-18);c.lineTo(5,-18);c.lineTo(14,-9);c.lineTo(14,18);c.lineTo(-14,18);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(5,-18);c.lineTo(5,-9);c.lineTo(14,-9);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=l;c.lineWidth=4;c.beginPath();for(const[w,yy]of[[12,-2],[18,6],[14,13]])c.moveTo(-8,yy),c.lineTo(-8+w,yy);c.stroke();c.restore()}
|
||||
const eye=(c,x,y,d)=>{
|
||||
c.fillStyle='#fff';c.beginPath();c.ellipse(x,y,15,18,0,0,T);c.fill()
|
||||
c.save();c.beginPath();c.ellipse(x,y,15,18,0,0,T);c.clip();c.beginPath();c.ellipse(x,y+3,8.5,10,0,0,T);c.fillStyle=EYE;c.fill();c.lineWidth=2.5;c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.arc(x,y+4,4,0,T);c.fill();c.fillStyle='#fff';c.beginPath();c.arc(x-3,y,2.5,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y,15,18,0,0,T);c.stroke()
|
||||
c.lineWidth=7;c.beginPath();c.moveTo(x-17,y-8);c.quadraticCurveTo(x,y-22,x+17,y-8);c.moveTo(x+d*16,y-9);c.lineTo(x+d*22,y-14);c.stroke()
|
||||
}
|
||||
export default(c,t,i)=>{
|
||||
const j=i%8,cy=i>>3,h=[1,1,.8,.55,.3,.1,0,0][j],pop=j<2,rl=j==6,LY=162-24*h,X=128+(j==7?(i%2?2:-2):0),la=(cy?1:-1)*.06*h,sq=j>1&&j<6?.05:0
|
||||
c.fillStyle=BX;c.lineWidth=7;c.beginPath();c.rect(38,168,180,100);c.fill();c.stroke()
|
||||
c.strokeStyle=BXD;c.lineWidth=5;c.beginPath();c.moveTo(48,250);c.lineTo(48,184);c.moveTo(208,184);c.lineTo(208,250);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.roundRect(52,212,152,30,15);c.fill();c.stroke()
|
||||
c.fillStyle=i%2?BRL:BR;c.lineWidth=5;c.beginPath();c.roundRect(57,217,142,20,10);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.font='bold 17px DejaVu Sans';c.textAlign='center';c.fillText('FULL',128,234)
|
||||
c.strokeStyle='rgba(255,255,255,.6)';c.lineWidth=4;c.beginPath();c.moveTo(66,221);c.lineTo(90,221);c.stroke();c.strokeStyle='#111'
|
||||
c.save();c.beginPath();c.rect(0,0,256,168);c.clip();for(let k=0;k<5;k++)file(c,62+k*33,172-26*h+(k%2)*6,(k-2)*.22,FC[k%4],.8);c.restore()
|
||||
c.save();c.translate(X,LY+8);c.rotate(la);c.translate(-X,-LY-8)
|
||||
c.fillStyle=BX;c.lineWidth=7;c.beginPath();c.roundRect(28,LY,200,20,4);c.fill();c.stroke()
|
||||
c.fillStyle=TP;c.lineWidth=5;c.beginPath();c.rect(110,LY,36,20);c.fill();c.stroke()
|
||||
c.restore()
|
||||
const by=LY
|
||||
c.save();c.translate(X,by);c.scale(1+sq,1-sq);c.translate(-X,-by)
|
||||
for(const d of[-1,1]){const kk=pop?0:4*sin(T*t*8+d);ds(c,15,8,SKIN,()=>{c.moveTo(X+d*10,by-2);c.lineTo(X+d*12,by+30+kk)})
|
||||
c.fillStyle=SHO;c.lineWidth=5;c.beginPath();c.ellipse(X+d*14,by+36+kk,11,7,0,0,T);c.fill();c.stroke()}
|
||||
c.fillStyle=SHT;c.lineWidth=6;c.beginPath();c.moveTo(X-24,by-14);c.lineTo(X+24,by-14);c.lineTo(X+26,by+4);c.quadraticCurveTo(X,by+8,X-26,by+4);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=TE;c.beginPath();c.moveTo(X-14,by-50);c.lineTo(X+14,by-50);c.quadraticCurveTo(X+24,by-48,X+24,by-36);c.lineTo(X+22,by-12);c.lineTo(X-22,by-12);c.lineTo(X-24,by-36);c.quadraticCurveTo(X-24,by-48,X-14,by-50);c.fill();c.stroke()
|
||||
c.strokeStyle=TED;c.lineWidth=5;c.beginPath();c.moveTo(X-22,by-22);c.lineTo(X+22,by-22);c.stroke();c.strokeStyle='#111'
|
||||
for(const d of[-1,1])ds(c,16,9,TE,()=>{c.moveTo(X+d*18,by-44);c.quadraticCurveTo(X+d*34,by-36,X+d*40,by-6)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.ellipse(X+d*41,by-2,10,7,0,0,T),c.fill(),c.stroke()
|
||||
const H=f=>{c.save();c.translate(X,by-46);c.scale(.46,.46);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=10;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,210,96,202,150);c.lineTo(54,150);c.bezierCurveTo(46,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=HAIR;for(const d of[-1,1]){c.beginPath();c.arc(128+d*58,56,28,0,T);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.arc(128+d*58,56,17,PI*(d>0?1.2:1.3),PI*(d>0?1.7:1.8));c.stroke();c.strokeStyle='#111';c.lineWidth=10}
|
||||
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(pop){eye(c,103,140,-1);eye(c,153,140,1)}
|
||||
else if(rl){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else{c.lineWidth=9;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,128),c.lineTo(128+d*18,140),c.lineTo(128+d*38,152),c.stroke()}
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=7;c.fillStyle='#c92a2a'
|
||||
if(pop){c.beginPath();c.ellipse(128,172,9,11,0,0,T);c.fill();c.stroke()}
|
||||
else if(rl){c.beginPath();c.moveTo(114,166);c.quadraticCurveTo(128,184,142,166);c.closePath();c.fill();c.stroke()}
|
||||
else{c.fillStyle='#fff';c.beginPath();c.roundRect(108,162,40,18,7);c.fill();c.stroke();c.beginPath();c.moveTo(110,171);c.lineTo(146,171);c.stroke()}
|
||||
c.lineWidth=10;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(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,124,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;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=SW;c.lineWidth=8;for(const[x,y]of[[204,100],[220,136]])if(!rl)c.beginPath(),c.moveTo(x,y-20),c.quadraticCurveTo(x+13,y,x,y+8),c.quadraticCurveTo(x-13,y,x,y-20),c.fill(),c.stroke()
|
||||
})
|
||||
c.restore()
|
||||
for(const[k,t0,d]of[[0,0,-1],[1,.5,1]]){const u=((t-t0+1)%1)/.5;if(u<1)file(c,X+d*(52+96*u),150-210*u+180*u*u,d*(.3+4*u),FC[k*2+cy],.8+.3*sin(PI*u))}
|
||||
if(pop){const q=j/2;for(const a of[-2.7,-2.2,-.9,-.4])ds(c,7,3,'#fff',()=>{c.moveTo(X+cos(a)*(108+14*q),LY+10+sin(a)*(30+10*q));c.lineTo(X+cos(a)*(122+18*q),LY+10+sin(a)*(40+14*q))})}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
// short orange-red haired girl cradling a flickering flame in her palm as a streak badge pops in, its day counter rolls from 6 to 7 with a +1 and she fist pumps beaming while the flame flares up
|
||||
const{sin,cos,PI,max,min,abs}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#ff7043',HD='#d9480f',HL='#ffe8cc',EYE='#4dabf7',ED='#1864ab',JK='#20c997',JD='#087f5b',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',F1='#ff922b',F2='#ffd43b',F3='#fff9db',BG='#fff4e6',PIN='#74c0fc'
|
||||
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 eye=(c,x,y,d,gx,gy)=>{
|
||||
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+gx,y+gy+2,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+gx,y+gy-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+8,2,0,T);c.fill();c.restore()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const flame=(c,x,y,s,w)=>{c.save();c.translate(x,y);c.scale(s,s*(1+.08*w))
|
||||
for(const[k,f]of[[1,F1],[.62,F2],[.3,F3]]){c.save();c.translate(0,20*(1-k));c.scale(k,k);c.fillStyle=f;c.lineWidth=(k==1?6:4)/s/k;c.beginPath()
|
||||
c.moveTo(0,20);c.bezierCurveTo(-24,18,-26,-6,-10,-22);c.quadraticCurveTo(-8,-8,-1,-6);c.quadraticCurveTo(-2,-30,10+3*w,-44);c.quadraticCurveTo(8,-24,18,-14);c.bezierCurveTo(28,-2,24,18,0,20);c.fill();if(k>.5)c.stroke();c.restore()}
|
||||
c.restore()}
|
||||
const dig=(c,n,x,y)=>{if(n==6)c.moveTo(x+12,y+1),c.quadraticCurveTo(x+1,y+6,x+1,y+18),c.moveTo(x+13,y+19),c.ellipse(x+7,y+19,6,6.5,0,0,T);else c.moveTo(x,y),c.lineTo(x+13,y),c.lineTo(x+5,y+26)}
|
||||
export default(c,t,i)=>{
|
||||
const bs=i==0?.5:i==1?1.15:i<14?1:i==14?.6:.2,r=min(1,max(0,(i-6)/2)),pm=i>=8&&i<14,hp=pm,w=sin(T*t*4),fs=pm?1.25:1
|
||||
const H=f=>{c.save();c.translate(140,180-(pm?4:0));c.scale(.68,.68);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,96,200,150);c.quadraticCurveTo(196,170,182,176);c.lineTo(74,176);c.quadraticCurveTo(60,170,56,150);c.bezierCurveTo(44,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=JK;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(106,188);c.lineTo(128,230);c.lineTo(150,188);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=JD;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*24,186),c.lineTo(128+d*4,236),c.lineTo(128+d*44,214),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(hp){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,15,1.15*PI,1.85*PI),c.stroke()}
|
||||
else eye(c,103,140,-1,-4,3),eye(c,153,140,1,-4,3)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(hp){c.beginPath();c.moveTo(110,163);c.quadraticCurveTo(128,168,146,163);c.quadraticCurveTo(144,190,128,190);c.quadraticCurveTo(112,190,110,163);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,192,10,8,0,0,T);c.fill();c.restore()}
|
||||
else{c.beginPath();c.moveTo(116,166);c.quadraticCurveTo(128,180,140,166);c.closePath();c.fill();c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,158)
|
||||
c.bezierCurveTo(46,74,88,36,128,36);c.bezierCurveTo(168,36,212,74,192,158);c.lineTo(184,140);c.lineTo(180,106)
|
||||
c.quadraticCurveTo(172,104,166,114);c.quadraticCurveTo(162,96,150,88);c.quadraticCurveTo(146,104,136,110)
|
||||
c.quadraticCurveTo(130,94,118,86);c.quadraticCurveTo(116,102,106,110);c.quadraticCurveTo(100,96,92,94);c.quadraticCurveTo(90,106,84,112)
|
||||
c.quadraticCurveTo(78,104,76,104);c.lineTo(72,140);c.closePath();c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(118,40);c.quadraticCurveTo(112,14,138,10);c.quadraticCurveTo(124,22,132,38);c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=PIN;c.lineWidth=6;for(const a of[-.5,.5])c.save(),c.translate(168,84),c.rotate(a),c.beginPath(),c.roundRect(-16,-5,32,10,5),c.fill(),c.stroke(),c.restore()
|
||||
})
|
||||
const pf=pm?(i%2?160:130):0
|
||||
ds(c,24,15,JK,()=>{c.moveTo(108,206);c.quadraticCurveTo(76,236,70,214)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(74,206,20,10,-.15,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.ellipse(90,198,6,9,-.6,0,T);c.fill();c.stroke()
|
||||
flame(c,74,170-6*sin(T*t*2),fs,w)
|
||||
if(pm){ds(c,24,15,JK,()=>{c.moveTo(178,206);c.quadraticCurveTo(222,214,216,pf+14)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.roundRect(204,pf-12,24,24,9);c.fill();c.stroke();c.lineWidth=3;c.beginPath();for(const k of[-5,3])c.moveTo(204,pf+k),c.lineTo(212,pf+k);c.stroke()
|
||||
if(i%2==0)ds(c,7,3,'#fff',()=>{for(const a of[-2.4,-1.6,-.8]){c.moveTo(216+cos(a)*24,pf+sin(a)*24);c.lineTo(216+cos(a)*34,pf+sin(a)*34)}})}
|
||||
else{ds(c,24,15,JK,()=>{c.moveTo(176,208);c.quadraticCurveTo(150,240,104,214)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(100,210,13,11,0,0,T);c.fill();c.stroke()}
|
||||
if(bs>.3){c.save();c.translate(196,44);c.scale(bs,bs);c.rotate(-.06)
|
||||
c.fillStyle=BG;c.lineWidth=6;c.beginPath();c.roundRect(-46,-28,92,56,28);c.fill();c.stroke()
|
||||
flame(c,-20,4,.5,w)
|
||||
c.save();c.beginPath();c.rect(0,-24,40,48);c.clip()
|
||||
for(const[n,o]of[[6,-34*r],[7,34*(1-r)]])if(abs(o)<34)ds(c,11,5.5,F1,()=>dig(c,n,6,-13+o))
|
||||
c.restore();c.restore()}
|
||||
if(i>=7&&i<12){const q=(i-7)/5,y=96-26*q;ds(c,10,5,F2,()=>{c.moveTo(214,y);c.lineTo(230,y);c.moveTo(222,y-8);c.lineTo(222,y+8);c.moveTo(236,y-4);c.lineTo(241,y-8);c.lineTo(241,y+9)})}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// cherry red twintail girl winds up and slaps a big red play button, it squashes and flips to a gray subscribed check while a gold notification bell pops out swinging with a ding
|
||||
const{sin,cos,PI,max}=Math,T=2*PI
|
||||
export const frames=14,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#f03e3e',HD='#b02525',HL='#ffe3e3',EYE='#22b8cf',ED='#0b7285',TOP='#364fc7',TD='#748ffc',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',BT='#ff3b3b',BD='#a61e1e',GY='#adb5bd',GD='#495057',BE='#ffd43b',TIE='#ffd43b',SP='#ffe066'
|
||||
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 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-3,y+2,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-3,y-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x-3,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-7,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+2,y+8,2,0,T);c.fill();c.restore()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const HP=[[120,160],[116,130],[110,102],[104,84],[84,184],[84,180],[102,168],[120,160],[120,160],[120,160],[120,160],[120,160],[120,160],[120,160]],BS=[0,0,0,0,0,1.2,1,1,1,1,1,.6,.25,0]
|
||||
export default(c,t,i)=>{
|
||||
const wu=i<4,sl=i==4,hp=i>=5&&i<11,sub=i>=5&&i<12,pr=sl?1:i==5?.4:0,[hx,hy]=HP[i],bs=BS[i],ba=bs?.5*sin(i*2.1)*max(0,1-(i-5)/6):0
|
||||
const H=f=>{c.save();c.translate(176,170);c.scale(.66,.66);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
for(const d of[-1,1]){c.save();c.translate(128+d*66,66);c.rotate(d*.06*sin(T*t+.5))
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(0,0);c.bezierCurveTo(d*44,-6,d*60,70,d*40,140);c.quadraticCurveTo(d*34,170,d*18,184);c.quadraticCurveTo(d*30,150,d*20,110);c.bezierCurveTo(d*14,70,d*10,30,0,0);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(d*16,10);c.bezierCurveTo(d*36,40,d*42,90,d*32,140);c.stroke();c.strokeStyle='#111';c.restore()}
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,204,160);c.quadraticCurveTo(204,190,186,198);c.lineTo(70,198);c.quadraticCurveTo(52,190,52,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.moveTo(128,212),c.lineTo(128+d*30,188),c.lineTo(128+d*40,214),c.closePath(),c.fill(),c.stroke()
|
||||
c.strokeStyle=TD;c.lineWidth=5;c.beginPath();c.moveTo(128,214);c.lineTo(128,330);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=SKIN;c.lineWidth=9;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,208,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(sl){c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,128),c.lineTo(128+d*18,140),c.lineTo(128+d*38,152),c.stroke()}
|
||||
else if(hp){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,15,1.15*PI,1.85*PI),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,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(sl||hp){c.beginPath();c.moveTo(110,163);c.quadraticCurveTo(128,168,146,163);c.quadraticCurveTo(144,190,128,190);c.quadraticCurveTo(112,190,110,163);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,192,10,8,0,0,T);c.fill();c.restore()}
|
||||
else if(wu){c.fillStyle='#fff';c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,170,144,164);c.quadraticCurveTo(140,180,128,180);c.quadraticCurveTo(116,180,112,164);c.fill();c.stroke();c.beginPath();c.moveTo(114,170);c.lineTo(142,170);c.stroke()}
|
||||
else{c.beginPath();c.moveTo(116,166);c.quadraticCurveTo(128,180,140,166);c.closePath();c.fill();c.stroke()}
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(70,150)
|
||||
c.bezierCurveTo(54,74,88,36,128,36);c.bezierCurveTo(168,36,202,74,186,150)
|
||||
c.quadraticCurveTo(186,118,180,104);c.quadraticCurveTo(170,102,162,110);c.quadraticCurveTo(160,96,152,90);c.quadraticCurveTo(144,102,134,106)
|
||||
c.quadraticCurveTo(130,94,122,88);c.quadraticCurveTo(116,102,106,108);c.quadraticCurveTo(102,96,94,94);c.quadraticCurveTo(88,104,84,110)
|
||||
c.quadraticCurveTo(78,104,76,104);c.quadraticCurveTo(70,120,70,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
if(wu){c.lineWidth=6;c.beginPath();c.moveTo(86,108);c.lineTo(112,118);c.moveTo(144,118);c.lineTo(170,108);c.stroke()}
|
||||
c.fillStyle=TIE;c.lineWidth=7;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*66,66,10,15,d*.5,0,T),c.fill(),c.stroke()
|
||||
})
|
||||
ds(c,26,16,TOP,()=>{c.moveTo(140,200);wu?c.quadraticCurveTo(150,150,hx+6,hy+12):c.quadraticCurveTo(124,214,hx+8,hy+6)})
|
||||
const by=170+10*pr,on=!sub
|
||||
c.fillStyle=on?BD:GD;c.lineWidth=7;c.beginPath();c.roundRect(12,182,152,62,20);c.fill();c.stroke()
|
||||
c.fillStyle=on?BT:GY;c.beginPath();c.roundRect(12,by,152,60,20);c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.moveTo(28,by+16);c.quadraticCurveTo(28,by+10,36,by+9);c.stroke();c.strokeStyle='#111'
|
||||
if(on){c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.moveTo(74,by+14);c.lineTo(108,by+30);c.lineTo(74,by+46);c.closePath();c.fill();c.stroke()}
|
||||
else ds(c,14,7,'#fff',()=>{c.moveTo(70,by+30);c.lineTo(84,by+43);c.lineTo(108,by+16)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy,sl?16:13,sl?11:13,0,0,T);c.fill();c.stroke()
|
||||
if(sl){ds(c,8,4,SP,()=>{for(let k=0;k<5;k++){const a=-PI*.95+k*PI*.22;c.moveTo(hx+cos(a)*24,hy-4+sin(a)*24);c.lineTo(hx+cos(a)*38,hy-4+sin(a)*38)}})}
|
||||
if(bs){c.save();c.translate(76,72);c.scale(bs,bs)
|
||||
if(i>=5&&i<10)for(const d of[-1,1])ds(c,7,3,BE,()=>{for(const r of[32,42])c.moveTo(d*r*cos(.5),-4-r*sin(.5)),c.arc(0,-4,r,d>0?-.5:PI-.5,d>0?.5:PI+.5)})
|
||||
c.rotate(ba);c.lineWidth=6;c.fillStyle=BE
|
||||
c.beginPath();c.arc(0,26,7,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.arc(0,-26,6,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(-26,20);c.quadraticCurveTo(-18,16,-18,4);c.quadraticCurveTo(-18,-22,0,-22);c.quadraticCurveTo(18,-22,18,4);c.quadraticCurveTo(18,16,26,20);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(-10,0);c.quadraticCurveTo(-10,-12,-2,-14);c.stroke();c.restore()}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// cheerful support girl with light blue low twintails and a headset mic, nodding along as she talks with a hand on her earcup while a typing bubble bounces its dots and a pink heart bubble pops up
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#a5d8ff',HD='#5fa8ea',HL='#eef8ff',EYE='#9775fa',ED='#5f3dc4',PO='#748ffc',PD='#4c6ef5',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',HS='#e9ecef',HSD='#495057',PAD='#ff8fab',SC='#ffd43b',PK='#ff8fab',DOT=['#ff8787','#ffd43b','#69db7c']
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return 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+2,y+2,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+2,y-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+2,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-2,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+7,y+8,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()
|
||||
}
|
||||
const heart=(c,x,y,s)=>{c.beginPath();c.moveTo(x,y+s);c.bezierCurveTo(x-1.4*s,y-.1*s,x-.8*s,y-1.1*s,x,y-.45*s);c.bezierCurveTo(x+.8*s,y-1.1*s,x+1.4*s,y-.1*s,x,y+s);c.fill();c.stroke()}
|
||||
export default(c,t,i)=>{
|
||||
const nd=4*(1-cos(2*T*t)),tl=.04*sin(T*t),hp=t>=.42&&t<.88,tk=!hp&&i%2,bk=i==3
|
||||
const q=min(1,max(0,(t-.4)/.14)),pb=(1+2.7*(q-1)**3+1.7*(q-1)**2)*(1-ez(t,.86,.97))
|
||||
const X=106,Y=198,Z=.84
|
||||
const H=(f,m=1)=>{c.save();c.translate(X,Y+nd*m);c.rotate(tl*m);c.scale(Z,Z);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,206,160);c.quadraticCurveTo(208,186,190,196);c.lineTo(66,196);c.quadraticCurveTo(48,186,50,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()})
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=PO;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=PD;c.beginPath();c.roundRect(118,196,20,60,6);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';for(const y of[218,238])c.beginPath(),c.arc(128,y,4,0,T),c.fill(),c.stroke()
|
||||
for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*12,188),c.lineTo(128+d*42,198),c.lineTo(128+d*26,222),c.lineTo(128+d*6,200),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.roundRect(152,236,40,28,6);c.fill();c.stroke()
|
||||
c.fillStyle=PK;c.lineWidth=4;heart(c,172,250,9)
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.quadraticCurveTo(128,204,142,192);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,190);c.moveTo(142,168);c.lineTo(142,190);c.stroke()
|
||||
},0)
|
||||
H(()=>{
|
||||
const sw=6*sin(T*t)
|
||||
c.lineWidth=8;c.fillStyle=HAIR;for(const d of[-1,1]){c.beginPath();c.moveTo(128+d*56,180);c.bezierCurveTo(128+d*104,190,128+d*112+sw,262,128+d*86+sw,326);c.quadraticCurveTo(128+d*80+sw,300,128+d*66+sw,296);c.quadraticCurveTo(128+d*80+sw,250,128+d*62,202);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=5;c.beginPath();c.moveTo(128+d*80,206);c.quadraticCurveTo(128+d*96,236,128+d*90+sw,272);c.stroke();c.strokeStyle='#111';c.lineWidth=8}
|
||||
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(hp){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(bk){c.lineWidth=7;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*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(hp||tk){c.beginPath();c.moveTo(114,164);c.quadraticCurveTo(128,168,142,164);c.quadraticCurveTo(140,hp?188:180,128,hp?188:180);c.quadraticCurveTo(116,hp?188:180,114,164);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,hp?190:182,9,7,0,0,T);c.fill();c.restore()}
|
||||
else{c.beginPath();c.moveTo(116,166);c.quadraticCurveTo(128,176,140,166);c.stroke()}
|
||||
c.lineWidth=8;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(186,118,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(158,98,148,92);c.quadraticCurveTo(142,104,134,110)
|
||||
c.quadraticCurveTo(128,98,120,92);c.quadraticCurveTo(114,104,106,110);c.quadraticCurveTo(100,98,92,96);c.quadraticCurveTo(88,106,84,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,124,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=SC;c.lineWidth=6;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*62,192,10,13,d*.6,0,T),c.fill(),c.stroke()
|
||||
ds(c,17,8,HS,()=>{c.ellipse(128,120,78,86,0,PI*1.03,PI*1.97)})
|
||||
c.fillStyle=HS;c.lineWidth=7;for(const d of[-1,1])c.beginPath(),c.roundRect(d<0?36:192,98,28,48,12),c.fill(),c.stroke()
|
||||
c.fillStyle=PAD;c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.roundRect(d<0?44:200,108,12,28,6),c.fill(),c.stroke()
|
||||
ds(c,11,5,HSD,()=>{c.moveTo(48,142);c.quadraticCurveTo(52,184,98,180)})
|
||||
c.fillStyle=HSD;c.lineWidth=6;c.beginPath();c.ellipse(102,179,10,8,0,0,T);c.fill();c.stroke()
|
||||
})
|
||||
const hx=X+(206-128)*Z,hy=Y+nd+(124-186)*Z
|
||||
ds(c,24,14,PO,()=>{c.moveTo(172,262);c.quadraticCurveTo(210,214,hx+4,hy+16)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx+2,hy+4,11,13,.2,0,T);c.fill();c.stroke()
|
||||
c.lineWidth=3;c.beginPath();c.moveTo(hx-4,hy-2);c.lineTo(hx+4,hy-4);c.moveTo(hx-4,hy+5);c.lineTo(hx+5,hy+3);c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.roundRect(166,18,80,50,25);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(178,62);c.lineTo(166,84);c.lineTo(194,66);c.fill();c.stroke()
|
||||
c.beginPath();c.rect(180,58,18,8);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(188+k*18,43-8*h,6.5,0,T);c.fill();c.stroke()}
|
||||
if(pb>.02){c.save();c.translate(218,112);c.scale(pb,pb)
|
||||
c.fillStyle=PK;c.lineWidth=6;c.beginPath();c.arc(0,0,24,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(-16,16);c.lineTo(-28,30);c.lineTo(-6,22);c.fill();c.stroke();c.beginPath();c.arc(0,0,21,.6*PI,.95*PI);c.fill()
|
||||
c.fillStyle='#fff';c.lineWidth=4;heart(c,0,2,12);c.restore()}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// black hime cut girl in a sailor uniform between two speech bubbles that flip to swap "あ" and "A" while swap arrows spin overhead, eyes following the bubbles, finger raised like a tiny teacher
|
||||
const{sin,PI,max}=Math,T=2*PI
|
||||
export const frames=16,delay=95
|
||||
const SKIN='#ffe3d1',HAIR='#3d3b52',HD='#1f1d30',HL='#8f8bb3',EYE='#cc5de8',ED='#862e9c',SL='#364fc7',SC='#ff6b6b',BL='#ffa8a8',RB='#f03e3e',JP='#ff6b9d',EN='#4dabf7',AR='#ffd43b'
|
||||
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 ease=x=>x<=0?0:x>=1?1:x*x*(3-2*x)
|
||||
const eye=(c,x,y,d,gx,gy)=>{
|
||||
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+gx,y+gy+2,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+gx,y+gy-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+gx,y+gy+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x+gx-4,y+gy-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+gx+5,y+gy+8,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()
|
||||
}
|
||||
const ja=c=>{c.moveTo(-15,-12);c.lineTo(13,-15);c.moveTo(-3,-23);c.quadraticCurveTo(-7,0,-1,17);c.moveTo(9,-5);c.quadraticCurveTo(0,14,-12,13);c.bezierCurveTo(-21,12,-17,-3,0,-3);c.bezierCurveTo(21,-3,22,16,4,20)}
|
||||
const en=c=>{c.moveTo(-14,19);c.lineTo(0,-20);c.lineTo(14,19);c.moveTo(-8,6);c.lineTo(8,6)}
|
||||
const bub=(c,x,d,k,sx,pp)=>{c.save();c.translate(x,56);c.scale(pp,pp);c.save();c.scale(d,1)
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.moveTo(-16,-34);c.lineTo(16,-34);c.arcTo(38,-34,38,-12,22);c.lineTo(38,10);c.arcTo(38,32,16,32,22);c.lineTo(26,50);c.lineTo(2,32)
|
||||
c.lineTo(-16,32);c.arcTo(-38,32,-38,10,22);c.lineTo(-38,-12);c.arcTo(-38,-34,-16,-34,22);c.closePath();c.fill();c.stroke();c.restore()
|
||||
c.scale(max(.02,sx),1);ds(c,13,6.5,k?JP:EN,()=>(k?ja:en)(c));c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const ph=Math.floor(t*2)%2,g=t*2%1,sx=g<.25?ease(g/.25):g>.75?ease((1-g)/.25):1,gx=ph?4:-4,bk=i==5,fu=sin(T*t*2)
|
||||
bub(c,46,1,ph==0,sx,1+.06*(1-sx));bub(c,210,-1,ph==1,sx,1+.06*(1-sx))
|
||||
c.save();c.translate(128,48);c.rotate(T*t)
|
||||
for(const d of[0,PI])ds(c,14,7,AR,()=>{c.arc(0,0,20,d+.35,d+2.6)})
|
||||
c.fillStyle=AR;c.lineWidth=4;for(const d of[0,PI]){c.save();c.rotate(d+2.6);c.beginPath();c.moveTo(20,-11);c.lineTo(33,0);c.lineTo(10,4);c.closePath();c.restore();c.fill();c.stroke()}
|
||||
c.restore()
|
||||
const H=f=>{c.save();c.translate(124,200);c.scale(.64,.64);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(206,34,218,110,216,200);c.lineTo(222,400);c.lineTo(34,400);c.lineTo(40,200);c.bezierCurveTo(38,110,50,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,400);c.lineTo(216,400);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SL;c.beginPath();c.moveTo(98,190);c.quadraticCurveTo(60,196,52,214);c.lineTo(84,250);c.lineTo(128,290);c.lineTo(172,250);c.lineTo(204,214);c.quadraticCurveTo(196,196,158,190);c.lineTo(128,250);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.moveTo(66,214);c.lineTo(90,240);c.lineTo(128,274);c.lineTo(166,240);c.lineTo(190,214);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=SC;c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(128,262),c.lineTo(128+d*30,250),c.lineTo(128+d*24,282),c.closePath(),c.fill(),c.stroke()
|
||||
c.beginPath();c.moveTo(122,270);c.lineTo(110,316);c.lineTo(124,310);c.lineTo(128,272);c.lineTo(132,310);c.lineTo(146,316);c.lineTo(134,270);c.fill();c.stroke()
|
||||
c.beginPath();c.arc(128,264,9,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,196);c.quadraticCurveTo(128,208,142,196);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.moveTo(142,168);c.lineTo(142,194);c.stroke()
|
||||
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=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,150,x+15,142),c.stroke()}
|
||||
else eye(c,103,140,-1,gx,-3),eye(c,153,140,1,gx,-3)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle='#c92a2a';c.beginPath();c.moveTo(118,166);c.quadraticCurveTo(128,170,138,166);c.quadraticCurveTo(136,178,128,178);c.quadraticCurveTo(120,178,118,166);c.fill();c.stroke()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(56,188)
|
||||
c.bezierCurveTo(40,70,88,36,128,36);c.bezierCurveTo(168,36,216,70,200,188);c.lineTo(178,188);c.lineTo(180,112)
|
||||
c.lineTo(166,112);c.lineTo(162,104);c.lineTo(156,112);c.lineTo(110,112);c.lineTo(104,104);c.lineTo(98,112);c.lineTo(76,112)
|
||||
c.lineTo(78,188);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;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.lineWidth=5;for(const x of[66,190])c.beginPath(),c.moveTo(x,128),c.lineTo(x,170),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=RB;c.lineWidth=7;c.save();c.translate(186,64);c.rotate(.5);for(const e of[-1,1])c.beginPath(),c.moveTo(0,0),c.quadraticCurveTo(e*22,-22,e*26,-2),c.quadraticCurveTo(e*20,10,0,0),c.fill(),c.stroke()
|
||||
c.beginPath();c.arc(0,0,8,0,T);c.fill();c.stroke();c.restore()
|
||||
})
|
||||
const hy=176+3*fu
|
||||
ds(c,20,12,'#fff',()=>{c.moveTo(176,250);c.quadraticCurveTo(204,240,198,hy+14)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(198,hy+8,11,12,0,0,T);c.fill();c.stroke()
|
||||
ds(c,10,5,SKIN,()=>{c.moveTo(200,hy);c.lineTo(202,hy-16)})
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// silver bob haired girl in a polka dot headscarf humming as she sweeps, a crumpled paper ball drops in and her broom flicks it into a green trash can whose lid flips open and claps shut
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#ced4da',HD='#868e96',HL='#f8f9fa',EYE='#4dabf7',ED='#1864ab',SC='#ff8787',SH='#ffe066',AP='#74c0fc',APD='#1c7ed6',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',WD='#e8b07a',ST='#ffd43b',SD='#e67700',BD='#ff6b6b',CN='#8ce99a',CND='#37b24d',NT='#b197fc'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return 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+3,y+3,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x+3,y-7,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x+3,y+3,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+4,y+5,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-1,y-3,4.5,0,T);c.fill();c.beginPath();c.arc(x+8,y+10,2,0,T);c.fill()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const ball=(c,x,y,r,a)=>{c.save();c.translate(x,y);c.rotate(a);c.fillStyle='#fff';c.lineWidth=5;c.beginPath();for(let k=0;k<9;k++){const b=k*T/9,q=r*(k%2?.84:1);c.lineTo(cos(b)*q,sin(b)*q)}c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle='#adb5bd';c.lineWidth=3;c.beginPath();c.moveTo(-r*.5,-r*.2);c.lineTo(0,r*.1);c.lineTo(r*.4,-r*.4);c.moveTo(-r*.2,r*.5);c.lineTo(r*.3,r*.3);c.stroke();c.restore()}
|
||||
export default(c,t,i)=>{
|
||||
const sw=t>=.14&&t<.34,a=.5+(sw?.16*sin(T*(t-.14)/.1):0)-.2*ez(t,.34,.39)+.6*ez(t,.39,.44)-.4*ez(t,.5,.72),lo=ez(t,.38,.46)-ez(t,.72,.82),fl=t>=.42&&t<.7,hap=t>=.42&&t<.82
|
||||
const P=[98,184],dir=[sin(a),cos(a)],B=[P[0]+46*dir[0],P[1]+46*dir[1]],bx0=144+16*ez(t,.14,.34)
|
||||
const H=f=>{c.save();c.translate(84,128+2*sin(T*t*2));c.rotate(-.06+.04*sin(T*t*2));c.scale(.62,.62);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=10;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,96,206,196);c.lineTo(50,196);c.bezierCurveTo(44,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=SH;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(48,194,42,250);c.lineTo(38,400);c.lineTo(218,400);c.lineTo(214,250);c.quadraticCurveTo(208,194,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=AP;c.beginPath();c.moveTo(88,244);c.lineTo(168,244);c.lineTo(176,400);c.lineTo(80,400);c.closePath();c.fill();c.stroke()
|
||||
ds(c,18,8,AP,()=>{c.moveTo(94,246);c.lineTo(104,198);c.moveTo(162,246);c.lineTo(152,198)})
|
||||
c.fillStyle=APD;c.beginPath();c.roundRect(106,272,44,30,6);c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,208,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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(hap){c.lineWidth=10;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(i==14){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,149,x+15,142),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,162,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=7;c.fillStyle=MO;c.beginPath()
|
||||
if(hap)c.moveTo(112,163),c.quadraticCurveTo(128,168,144,163),c.quadraticCurveTo(142,188,128,188),c.quadraticCurveTo(114,188,112,163),c.fill(),c.stroke(),c.save(),c.clip(),c.fillStyle=TG,c.beginPath(),c.ellipse(128,189,8,6,0,0,T),c.fill(),c.restore()
|
||||
else c.moveTo(116,166),c.quadraticCurveTo(128,176,140,166),c.stroke()
|
||||
c.lineWidth=10;c.fillStyle=HAIR;c.beginPath();c.moveTo(56,196)
|
||||
c.bezierCurveTo(44,74,88,36,128,36);c.bezierCurveTo(168,36,212,74,200,196);c.lineTo(178,196)
|
||||
c.quadraticCurveTo(186,130,178,104);c.quadraticCurveTo(170,106,164,114);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110)
|
||||
c.quadraticCurveTo(132,96,124,88);c.quadraticCurveTo(118,102,110,108);c.quadraticCurveTo(104,96,94,94);c.quadraticCurveTo(90,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,130,78,196);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*62,126),c.quadraticCurveTo(128+d*66,150,128+d*62,176),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=SC;c.beginPath();c.moveTo(58,96);c.bezierCurveTo(56,20,200,20,198,96);c.quadraticCurveTo(128,72,58,96);c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle='#fff';for(const[x,y]of[[86,62],[118,44],[150,50],[176,70],[112,74],[146,78]])c.beginPath(),c.arc(x,y,6,0,T),c.fill();c.restore()
|
||||
c.fillStyle=SC;c.save();c.translate(198,84);for(const r of[-.5,.5])c.save(),c.rotate(r),c.beginPath(),c.ellipse(16,0,18,9,0,0,T),c.fill(),c.stroke(),c.restore();c.beginPath();c.arc(0,0,9,0,T);c.fill();c.stroke();c.restore()
|
||||
})
|
||||
const q=(t-.42)/.28,bx=160+40*q,by=230-64*q-440*q*(1-q)
|
||||
if(fl&&q>.85)ball(c,bx,by,17*(1-.2*q),q*8)
|
||||
c.fillStyle=CN;c.lineWidth=6;c.beginPath();c.roundRect(166,144,64,14,4);c.fill();c.stroke()
|
||||
c.beginPath();c.moveTo(164,154);c.lineTo(232,154);c.lineTo(226,252);c.lineTo(170,252);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=CND;c.lineWidth=6;for(const x of[184,198,212])c.beginPath(),c.moveTo(x,168),c.lineTo(x+(x-198)*.08,238),c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=CND;c.beginPath();c.roundRect(166,144,64,12,4);c.fill();c.stroke()
|
||||
c.save();c.translate(236,152);c.rotate(1.3*lo)
|
||||
c.fillStyle=CN;c.lineWidth=6;c.beginPath();c.roundRect(-80,-14,84,14,5);c.fill();c.stroke()
|
||||
c.beginPath();c.roundRect(-50,-22,24,9,4);c.fill();c.stroke();c.restore()
|
||||
if(t<.14){const p=t/.14;ball(c,144,-20+250*p*p,17,p*3)}
|
||||
else if(t<.42)ball(c,bx0,230-(t<.2?10*sin(PI*(t-.14)/.06):0),17,(bx0-144)/15+3)
|
||||
if(fl&&q<=.85)ball(c,bx,by,17*(1-.2*q),q*8)
|
||||
if(t>=.42&&t<.58){const p=(t-.42)/.16;c.fillStyle='#fff';c.lineWidth=4;for(const[dx,r]of[[-14,7],[0,10],[14,6]])c.beginPath(),c.arc(B[0]+dx+10*p,244-8*p,r*(1-p*.6),0,T),c.fill(),c.stroke()}
|
||||
ds(c,10,5,WD,()=>{c.moveTo(P[0]-44*dir[0],P[1]-44*dir[1]);c.lineTo(B[0],B[1])})
|
||||
c.save();c.translate(B[0],B[1]);c.rotate(-a)
|
||||
c.fillStyle=ST;c.lineWidth=5;c.beginPath();c.moveTo(-9,0);c.lineTo(9,0);c.quadraticCurveTo(24,16,22,28);c.lineTo(-22,28);c.quadraticCurveTo(-24,16,-9,0);c.fill();c.stroke()
|
||||
c.strokeStyle=SD;c.lineWidth=3;c.beginPath();for(const x of[-14,-5,4,13])c.moveTo(x*.6,8),c.lineTo(x,25);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=BD;c.lineWidth=4;c.beginPath();c.roundRect(-11,-2,22,9,3);c.fill();c.stroke();c.restore()
|
||||
for(const[k,s]of[[0,-26],[1,2]]){const x=P[0]+s*dir[0],y=P[1]+s*dir[1]
|
||||
ds(c,20,12,SH,()=>{k?(c.moveTo(116,152),c.quadraticCurveTo(132,190,x,y)):(c.moveTo(54,152),c.quadraticCurveTo(44,190,x,y))})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(x,y,10,11,0,0,T);c.fill();c.stroke()}
|
||||
if(!hap&&t>=.14){const p=(t*2)%1;c.save();c.translate(142-6*sin(T*p),62-30*p);c.rotate(.2);c.fillStyle=NT;c.lineWidth=4;c.beginPath();c.ellipse(0,0,7,5.5,-.4,0,T);c.fill();c.stroke();c.lineWidth=4;c.beginPath();c.moveTo(6,-2);c.lineTo(6,-22);c.quadraticCurveTo(12,-16,16,-14);c.stroke();c.restore()}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// dark brown haired teacher girl in glasses with a low ponytail guiding a cursor across a mini whiteboard with her pointer stick, tapping the OK button so it clicks with a ripple while she winks
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#6d4c41',HD='#3e2723',HL='#d7ccc8',EYE='#4dabf7',ED='#1864ab',CA='#ffc078',CD='#e8590c',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',BRD='#adb5bd',BT='#4dabf7',BTD='#1c7ed6',WD='#c47f45',TIP='#ff6b6b',RP='#ffd43b',SC='#ff8787'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return 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-4,y+2,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-8,13,10,0,0,T);c.fill()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x-5,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-8,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+1,y+8,2,0,T);c.fill();c.restore()
|
||||
c.lineWidth=6;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 go=ez(t,0,.4)-ez(t,.75,1),cx=34+62*go,cy=50+60*go,ck=i==7,rp=i>=7&&i<12,wk=i>=8&&i<12,pr=i==7||i==8
|
||||
const tx=cx+20-6*(ck?1:0),ty=cy+26-6*(ck?1:0),hx=146+(tx-110)*.2,hy=186+(ty-136)*.2
|
||||
for(const[a,b]of[[44,26],[112,130]])ds(c,12,6,WD,()=>{c.moveTo(a,140);c.lineTo(b,250)})
|
||||
c.fillStyle=BRD;c.lineWidth=7;c.beginPath();c.roundRect(6,22,144,122,12);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.roundRect(16,32,124,102,6);c.fill();c.stroke()
|
||||
c.strokeStyle='#dee2e6';c.lineWidth=5;c.beginPath();c.moveTo(28,46);c.lineTo(88,46);c.moveTo(28,60);c.lineTo(68,60);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=SC;c.lineWidth=3;for(const x of[112,124])c.beginPath(),c.arc(x,46,4,0,T),c.fill(),c.stroke()
|
||||
const by=pr?3:0
|
||||
if(!pr){c.fillStyle=BTD;c.lineWidth=5;c.beginPath();c.roundRect(52,96,68,30,10);c.fill();c.stroke()}
|
||||
c.fillStyle=pr?BTD:BT;c.lineWidth=5;c.beginPath();c.roundRect(52,93+by,68,30,10);c.fill();c.stroke()
|
||||
ds(c,8,4,'#fff',()=>{c.moveTo(80,108+by);c.ellipse(74,108+by,6,8,0,0,T);c.moveTo(86,100+by);c.lineTo(86,116+by);c.moveTo(97,100+by);c.lineTo(87,109+by);c.lineTo(97,116+by)})
|
||||
if(rp){const q=(i-7)/4;for(const k of[0,1]){const r=8+28*q-k*12;if(r>4)ds(c,9-4*q,5-2.5*q,RP,()=>c.arc(cx,cy,r,0,T))}}
|
||||
if(ck)ds(c,7,3,'#fff',()=>{for(const a of[-2.6,-2,-1.4]){c.moveTo(cx+cos(a)*12,cy+sin(a)*12);c.lineTo(cx+cos(a)*22,cy+sin(a)*22)}})
|
||||
c.save();c.translate(cx,cy);const cs=ck?.85:1;c.scale(cs,cs);c.fillStyle='#fff';c.lineWidth=4;c.beginPath();c.moveTo(0,0);c.lineTo(0,26);c.lineTo(7,20);c.lineTo(12,31);c.lineTo(17,29);c.lineTo(12,18);c.lineTo(21,18);c.closePath();c.fill();c.stroke();c.restore()
|
||||
const H=f=>{c.save();c.translate(192,182);c.scale(.66,.66);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,96,204,150);c.quadraticCurveTo(200,182,180,192);c.lineTo(76,192);c.quadraticCurveTo(56,182,52,150);c.bezierCurveTo(44,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,330);c.lineTo(216,330);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=CA;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*26,196),c.quadraticCurveTo(128+d*72,200,128+d*88,330),c.lineTo(128+d*10,330),c.lineTo(128+d*10,240),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=CD;c.lineWidth=5;for(const y of[262,296])c.beginPath(),c.arc(110,y,5,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=7;for(const d of[-1,1])c.beginPath(),c.moveTo(128,206),c.lineTo(128+d*28,190),c.lineTo(128+d*32,214),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.lineWidth=8;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(wk){c.lineWidth=8;c.beginPath();c.arc(153,148,14,1.15*PI,1.85*PI);c.stroke();eye(c,103,140,-1)}
|
||||
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*46,164,13,7,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*46+k-2,168),c.lineTo(128+d*46+k+2,160),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(wk||i%4<2){c.beginPath();c.moveTo(114,166);c.quadraticCurveTo(128,170,142,166);c.quadraticCurveTo(140,184,128,184);c.quadraticCurveTo(116,184,114,166);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,186,8,6,0,0,T);c.fill();c.restore()}
|
||||
else{c.beginPath();c.moveTo(118,168);c.quadraticCurveTo(128,176,138,168);c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,160)
|
||||
c.bezierCurveTo(48,74,88,36,128,36);c.bezierCurveTo(168,36,208,74,190,160);c.quadraticCurveTo(184,150,180,156)
|
||||
c.quadraticCurveTo(184,124,176,100);c.quadraticCurveTo(160,96,148,84);c.quadraticCurveTo(142,98,128,104)
|
||||
c.quadraticCurveTo(116,96,108,84);c.quadraticCurveTo(102,100,90,104);c.quadraticCurveTo(84,102,80,98)
|
||||
c.quadraticCurveTo(70,124,76,156);c.quadraticCurveTo(70,150,66,160);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.lineWidth=6;for(const x of[103,153])c.beginPath(),c.roundRect(x-22,120,44,40,12),c.stroke()
|
||||
c.beginPath();c.moveTo(125,136);c.quadraticCurveTo(128,132,131,136);c.moveTo(81,132);c.lineTo(74,128);c.moveTo(175,132);c.lineTo(182,128);c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=4;for(const x of[103,153])c.beginPath(),c.moveTo(x+8,126),c.lineTo(x+14,132),c.stroke();c.strokeStyle='#111'
|
||||
c.save();c.translate(188,192);c.rotate(.08);c.fillStyle=HAIR;c.lineWidth=8;c.beginPath();c.moveTo(-16,0);c.bezierCurveTo(-22,40,-8,80,6,104);c.quadraticCurveTo(14,88,14,70);c.quadraticCurveTo(22,30,16,0);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(0,14);c.quadraticCurveTo(-4,50,4,84);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=SC;c.lineWidth=7;c.beginPath();c.ellipse(0,4,20,11,0,0,T);c.fill();c.stroke();c.restore()
|
||||
})
|
||||
ds(c,10,5,WD,()=>{c.moveTo(hx+8,hy+4);c.lineTo(tx,ty)})
|
||||
c.fillStyle=TIP;c.lineWidth=4;c.beginPath();c.arc(tx,ty,5,0,T);c.fill();c.stroke()
|
||||
ds(c,24,15,CA,()=>{c.moveTo(166,214);c.quadraticCurveTo(146,224,hx+6,hy+10)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy,12,12,0,0,T);c.fill();c.stroke()
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// magenta twintailed chibi girl crouches and jumps to stomp a giant Z key next to a little Ctrl key, both keys clunk down and a big orange undo arrow swings back around
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#e64fc0',HD='#a61e8d',HL='#fde4f7',EYE='#7950f2',ED='#4c2a9e',TEE='#63e6be',TD='#0ca678',SHO='#5c7cfa',SN='#ff6b6b',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',KT='#f3f0ff',KB='#b197fc',KC='#f1f3f5',KCB='#adb5bd',AR='#ffa94d',SP='#ffd43b'
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return 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+4,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-6,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+4,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+6,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-2,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+11,2,0,T);c.fill()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
const key=(c,x,y,w,h,p,f,b,g)=>{c.fillStyle=b;c.lineWidth=6;c.beginPath();c.roundRect(x-4,y+6,w+8,h+6,14);c.fill();c.stroke()
|
||||
c.fillStyle=f;c.beginPath();c.roundRect(x,y+p*7-6,w,h-4,11);c.fill();c.stroke();g(y+p*7-6)}
|
||||
export default(c,t,i)=>{
|
||||
const cr=ez(t,.02,.14)*(1-ez(t,.16,.2))+ez(t,.45,.48)*(1-ez(t,.5,.58)),air=t>=.2&&t<.46,jy=air?-38*sin(PI*(t-.2)/.26):0,kp=ez(t,.44,.47)*(1-ez(t,.62,.7))
|
||||
const u=(t-.46)/.42,ang=u>0&&u<1?-1.1*sin(PI*u)*(1-.25*u)-.15*sin(3*PI*u)*(1-u):0,hap=t>=.48&&t<.9
|
||||
ds(c,22,13,AR,()=>{c.save();c.translate(70,82);c.rotate(ang);c.arc(0,0,36,.5,PI,true);c.restore()})
|
||||
c.save();c.translate(70,82);c.rotate(ang);c.fillStyle=AR;c.lineWidth=6;c.beginPath();c.moveTo(-58,-6);c.lineTo(-14,-6);c.lineTo(-36,22);c.closePath();c.fill();c.stroke();c.restore()
|
||||
if(u>0&&u<.6)for(const k of[0,1])ds(c,6,2.5,'#fff',()=>{const r=48+k*9,b=-PI/2+ang*.5;c.arc(70,82,r,b-.1,b+.6)})
|
||||
key(c,14,198,78,44,kp*.8,KC,KCB,y=>{c.strokeStyle='#495057';c.lineWidth=5;c.beginPath();c.arc(32,y+20,8,.8,T-.8);c.moveTo(46,y+10);c.lineTo(46,y+28);c.lineTo(50,y+28);c.moveTo(42,y+15);c.lineTo(51,y+15);c.moveTo(57,y+16);c.lineTo(57,y+28);c.moveTo(57,y+20);c.quadraticCurveTo(59,y+15,65,y+16);c.moveTo(71,y+8);c.lineTo(71,y+28);c.stroke();c.strokeStyle='#111'})
|
||||
ds(c,9,4,'#fff',()=>{c.moveTo(102,212);c.lineTo(102,228);c.moveTo(94,220);c.lineTo(110,220)})
|
||||
key(c,114,170,122,70,kp,KT,KB,y=>{ds(c,18,10,'#7950f2',()=>{c.moveTo(152,y+30);c.lineTo(198,y+30);c.lineTo(152,y+56);c.lineTo(198,y+56)})})
|
||||
if(kp>.5&&t<.62){c.lineWidth=5;for(const[x1,y1,x2,y2]of[[110,168,98,158],[106,186,92,184],[240,168,252,158],[244,186,254,184]])ds(c,6,3,SP,()=>{c.moveTo(x1,y1);c.lineTo(x2,y2)})}
|
||||
const gx=176,gy=184+kp*7+jy,sq=1-.18*cr,hy=gy-34*sq-34*sq
|
||||
for(const d of[-1,1]){ds(c,15,8,SKIN,()=>{c.moveTo(gx+d*7,gy-30*sq);c.quadraticCurveTo(gx+d*(10+10*cr+(air?6:0)),gy-16*sq,gx+d*9,gy-6)})
|
||||
c.fillStyle=SN;c.lineWidth=5;c.beginPath();c.ellipse(gx+d*12,gy-4,11,7,d*(air?.3:0),0,T);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=3;c.beginPath();c.rect(gx+d*12-9,gy-6,18,3);c.fill()}
|
||||
c.fillStyle=SHO;c.lineWidth=5;c.beginPath();c.moveTo(gx-15,gy-48*sq);c.lineTo(gx+15,gy-48*sq);c.lineTo(gx+19,gy-28*sq);c.lineTo(gx+2,gy-28*sq);c.lineTo(gx,gy-34*sq);c.lineTo(gx-2,gy-28*sq);c.lineTo(gx-19,gy-28*sq);c.closePath();c.fill();c.stroke()
|
||||
const ay=air?-1:hap?-.6:cr>.3?.6:.2
|
||||
for(const d of[-1,1]){const hx=gx+d*(hap?30:air?24:26),hhy=hy+16+(ay<0?-34*(-ay):24*ay)
|
||||
ds(c,14,8,TEE,()=>{c.moveTo(gx+d*12,hy+10);c.lineTo(gx+d*16,hy+16)})
|
||||
ds(c,13,7,SKIN,()=>{c.moveTo(gx+d*15,hy+14);c.lineTo(hx,hhy)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.arc(hx,hhy,7,0,T);c.fill();c.stroke()}
|
||||
c.fillStyle=TEE;c.lineWidth=5;c.beginPath();c.moveTo(gx-12,hy+6);c.quadraticCurveTo(gx-18,hy+8,gx-17,gy-44*sq);c.lineTo(gx+17,gy-44*sq);c.quadraticCurveTo(gx+18,hy+8,gx+12,hy+6);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=TD;c.lineWidth=3.5;c.beginPath();for(let k=0;k<10;k++){const r=k%2?3:7,b=k*PI/5-PI/2;c.lineTo(gx+cos(b)*r,hy+20*sq+sin(b)*r)}c.closePath();c.fill();c.stroke()
|
||||
c.save();c.translate(gx,hy+8);c.rotate(air?-.06:hap?.05*sin(T*t*3):0);c.scale(.46,.46);c.translate(-128,-186);c.lineWidth=11
|
||||
for(const d of[-1,1]){c.save();c.translate(128+d*62,82);c.rotate(d*(air?.45:-.05+.12*sin(T*t*2+d)))
|
||||
c.fillStyle=HAIR;c.beginPath();c.moveTo(0,0);c.bezierCurveTo(d*44,0,d*52,60,d*34,110);c.quadraticCurveTo(d*26,128,d*8,124);c.bezierCurveTo(d*24,80,d*8,36,0,0);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=6;c.beginPath();c.moveTo(d*14,18);c.bezierCurveTo(d*30,42,d*34,74,d*26,104);c.stroke();c.strokeStyle='#111';c.lineWidth=11
|
||||
c.fillStyle=SP;c.beginPath();c.arc(0,0,14,0,T);c.fill();c.stroke();c.restore()}
|
||||
c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(196,34,206,96,198,150);c.lineTo(58,150);c.bezierCurveTo(50,96,60,34,128,34);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(hap){c.lineWidth=11;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(air||cr>.5){c.lineWidth=10;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*38,128),c.lineTo(128+d*18,140),c.lineTo(128+d*38,152),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*46,164,15,8,0,0,T),c.fill()
|
||||
c.lineWidth=5;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*46+k-2,168),c.lineTo(128+d*46+k+2,160),c.stroke()
|
||||
c.lineWidth=7;c.fillStyle=MO;c.beginPath()
|
||||
if(hap||air)c.moveTo(110,163),c.quadraticCurveTo(128,168,146,163),c.quadraticCurveTo(144,190,128,190),c.quadraticCurveTo(112,190,110,163)
|
||||
else c.moveTo(118,166),c.quadraticCurveTo(128,170,138,166),c.quadraticCurveTo(136,178,128,178),c.quadraticCurveTo(120,178,118,166)
|
||||
c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,hap||air?191:179,9,7,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=11;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.beginPath();c.moveTo(126,38);c.quadraticCurveTo(120,6,154,10);c.quadraticCurveTo(130,20,138,38);c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=8;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.restore()
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
// sky blue bob haired girl in a party hat hugging a pink present that rattles, the lid pops off and a big green update arrow bursts out in sparkles, then sinks back as the lid drops on
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#74c0fc',HD='#339af0',HL='#e7f5ff',EYE='#f06595',ED='#a61e4d',SW='#d0bfff',SWD='#9775fa',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',HAT='#ffd43b',HS='#ff6b6b',BOX='#fcc2d7',BXD='#f783ac',RIB='#ffd43b',GR='#51cf66',GRL='#b2f2bb',SP=['#ffd43b','#74c0fc','#ff8fab','#ffd43b','#b197fc']
|
||||
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 ez=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)));return x*x*(3-2*x)}
|
||||
const bk=(t,a,b)=>{const x=min(1,max(0,(t-a)/(b-a)))-1;return 1+2.7*x**3+1.7*x**2}
|
||||
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+2,y+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x+2,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x+2,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x+3,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-2,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+7,y+8,2,0,T);c.fill()
|
||||
c.lineWidth=6;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()
|
||||
}
|
||||
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 sh=.06*sin(T*t*11)*ez(t,.04,.12)*(1-ez(t,.24,.3)),a=bk(t,.3,.44)*(1-ez(t,.78,.9)),out=t>=.3&&t<.86
|
||||
const lf=t<.28?0:t<.42?(-300*((t-.28)/.14)**2):t<.8?-300:t<.94?-300*(1-((t-.8)/.14)**2):0,lr=t<.28||t>=.94?0:t<.42?1.2*(t-.28)/.14:t<.8?1.2:1.2*(1-(t-.8)/.14)
|
||||
const sq=t>=.94?sin(PI*(t-.94)/.06)*.08:0,hap=t>=.33&&t<.86,BX=180,BY=252
|
||||
const H=f=>{c.save();c.translate(80,160+(hap?-3*sin(T*t*3):0));c.rotate(hap?-.05:sh*.5);c.scale(.7,.7);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{
|
||||
c.lineWidth=9;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,214,100,206,180);c.quadraticCurveTo(204,200,190,204);c.lineTo(66,204);c.quadraticCurveTo(52,200,50,180);c.bezierCurveTo(42,100,56,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=SW;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(52,198,40,340);c.lineTo(216,340);c.quadraticCurveTo(204,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SWD;c.beginPath();c.moveTo(98,190);c.quadraticCurveTo(128,222,158,190);c.lineTo(160,204);c.quadraticCurveTo(128,236,96,204);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,208,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);c.stroke()
|
||||
c.lineWidth=9;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(hap){c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()}
|
||||
else if(i==1){c.lineWidth=8;for(const x of[103,153])c.beginPath(),c.moveTo(x-15,142),c.quadraticCurveTo(x,149,x+15,142),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,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO;c.beginPath()
|
||||
if(hap)c.moveTo(110,163),c.quadraticCurveTo(128,168,146,163),c.quadraticCurveTo(144,190,128,190),c.quadraticCurveTo(112,190,110,163)
|
||||
else c.ellipse(128,172,8,9,0,0,T)
|
||||
c.fill();c.stroke();if(hap){c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,191,9,7,0,0,T);c.fill();c.restore()}
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(62,200)
|
||||
c.bezierCurveTo(46,74,88,36,128,36);c.bezierCurveTo(168,36,210,74,194,200);c.quadraticCurveTo(186,190,180,198)
|
||||
c.quadraticCurveTo(186,130,178,104);c.quadraticCurveTo(170,106,164,114);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110)
|
||||
c.quadraticCurveTo(132,96,124,88);c.quadraticCurveTo(118,102,110,108);c.quadraticCurveTo(104,96,94,94);c.quadraticCurveTo(90,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,130,76,198);c.quadraticCurveTo(70,190,62,200);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=HAT;c.lineWidth=7;c.beginPath();for(let k=0;k<10;k++){const r=k%2?7:15,b=k*PI/5-PI/2;c.lineTo(170+cos(b)*r,82+sin(b)*r)}c.closePath();c.fill();c.stroke()
|
||||
c.save();c.translate(104,46);c.rotate(-.35)
|
||||
c.fillStyle=HAT;c.lineWidth=8;c.beginPath();c.moveTo(-30,0);c.lineTo(0,-74);c.lineTo(30,0);c.closePath();c.fill();c.stroke()
|
||||
c.save();c.clip();c.strokeStyle=HS;c.lineWidth=8;for(const y of[-14,-38,-62])c.beginPath(),c.moveTo(-40,y+10),c.lineTo(40,y-10),c.stroke();c.restore()
|
||||
c.strokeStyle='#111';c.beginPath();c.moveTo(-30,0);c.lineTo(0,-74);c.lineTo(30,0);c.closePath();c.stroke()
|
||||
c.fillStyle=HS;c.beginPath();c.arc(0,-78,11,0,T);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=7;c.beginPath();c.ellipse(0,2,36,9,0,0,T);c.fill();c.stroke();c.restore()
|
||||
})
|
||||
c.save();c.translate(BX,BY);c.rotate(sh);c.translate(-BX,-BY)
|
||||
c.fillStyle='#5f3dc4';c.lineWidth=6;c.beginPath();c.roundRect(134,162,92,20,6);c.fill();c.stroke()
|
||||
if(a>.01){const y=166-128*a;c.save();c.beginPath();c.rect(0,0,256,176);c.clip()
|
||||
c.fillStyle=GR;c.lineWidth=7;c.beginPath();c.moveTo(BX,y);c.lineTo(BX+44,y+46);c.lineTo(BX+19,y+46);c.lineTo(BX+19,y+150);c.lineTo(BX-19,y+150);c.lineTo(BX-19,y+46);c.lineTo(BX-44,y+46);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=GRL;c.lineWidth=6;c.beginPath();c.moveTo(BX-8,y+60);c.lineTo(BX-8,y+120);c.moveTo(BX-26,y+38);c.lineTo(BX-8,y+18);c.stroke();c.strokeStyle='#111';c.restore()}
|
||||
c.fillStyle=BOX;c.lineWidth=7;c.beginPath();c.roundRect(132,172,96,88,6);c.fill();c.stroke()
|
||||
c.fillStyle=BXD;c.lineWidth=0;c.beginPath();c.rect(135,175,8,82);c.fill()
|
||||
c.fillStyle=RIB;c.lineWidth=6;c.beginPath();c.rect(BX-12,172,24,88);c.fill();c.stroke()
|
||||
c.restore()
|
||||
for(const[x,y,s]of[[132,200,-1],[228,198,1]]){if(s<0)ds(c,22,13,SW,()=>{c.moveTo(96,262);c.quadraticCurveTo(108,222,x-4,y+8)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(x+sh*40,y,11,13,0,0,T);c.fill();c.stroke()}
|
||||
if(lf>-280){c.save();c.translate(BX,170+lf);c.rotate(sh+lr);c.scale(1+sq,1-sq)
|
||||
c.fillStyle=BOX;c.lineWidth=7;c.beginPath();c.roundRect(-56,-24,112,26,6);c.fill();c.stroke()
|
||||
c.fillStyle=RIB;c.lineWidth=6;c.beginPath();c.rect(-12,-24,24,26);c.fill();c.stroke()
|
||||
for(const d of[-1,1])c.beginPath(),c.moveTo(0,-26),c.bezierCurveTo(d*34,-56,d*44,-26,d*4,-24),c.closePath(),c.fill(),c.stroke()
|
||||
c.beginPath();c.ellipse(0,-27,8,7,0,0,T);c.fill();c.stroke();c.restore()}
|
||||
if(out){const q=(t-.3)/.56
|
||||
if(q<.3)for(let k=0;k<7;k++){const b=-PI+k*PI/6,r=60+90*q;ds(c,7,3,SP[k%5],()=>{c.moveTo(BX+cos(b)*r,96+sin(b)*r*.8);c.lineTo(BX+cos(b)*(r+16),96+sin(b)*(r+16)*.8)})}
|
||||
c.lineWidth=3.5;for(const[k,[x,y,o]]of[[134,36,0],[236,58,.2],[230,130,.45],[142,112,.3],[214,20,.6]].entries()){const r=sin(PI*min(1,max(0,(q-o)*2.2)));if(r>.1)c.fillStyle=SP[k],spark(c,x,y,13*r)}}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// long hot pink haired girl in big mint headphones bobbing her head to the beat with eyes closed, a speaker icon blasts pulsing sound waves, eq bars bounce and music notes float up
|
||||
const{sin,cos,PI,min,abs}=Math,T=2*PI
|
||||
export const frames=16,delay=85
|
||||
const SKIN='#ffe3d1',HAIR='#f06595',HD='#c2255c',HL='#ffdeeb',TEE='#d0bfff',TD='#9775fa',BL='#ff8fab',MO='#c92a2a',TG='#ff8fab',MN='#63e6be',MD='#12b886',CU='#495057',NT=['#f783ac','#b197fc','#4dabf7'],EQ=['#ff8fab','#ffa94d','#ffd43b','#8ce99a','#74c0fc']
|
||||
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 note=(c,x,y,s,col,two)=>{c.save();c.translate(x,y);c.scale(s,s);c.fillStyle=col;c.lineWidth=4
|
||||
if(two){c.beginPath();c.moveTo(-4,-28);c.lineTo(22,-34);c.lineTo(22,-24);c.lineTo(-4,-18);c.closePath();c.fill();c.stroke();ds(c,10,4,col,()=>{c.moveTo(-4,0);c.lineTo(-4,-26);c.moveTo(22,-6);c.lineTo(22,-32)});for(const[px,py]of[[-10,0],[16,-6]])c.beginPath(),c.ellipse(px,py,9,7,-.4,0,T),c.fill(),c.stroke()}
|
||||
else{ds(c,10,4,col,()=>{c.moveTo(4,0);c.lineTo(4,-30);c.quadraticCurveTo(10,-20,18,-18)});c.beginPath();c.ellipse(-2,0,9,7,-.4,0,T);c.fill();c.stroke()}
|
||||
c.restore()}
|
||||
export default(c,t)=>{
|
||||
const p=t*4%1,by=-8*sin(PI*p),a=.12*sin(T*t*2),sw=.4*a,X=108,Y=198
|
||||
const G=(x,y)=>{const u=(x-128)*.72,v=(y-186)*.72;return[X+u*cos(a)-v*sin(a),Y+by+u*sin(a)+v*cos(a)]}
|
||||
for(let k=0;k<5;k++){const h=12+36*abs(sin(T*t*2+k*1.2)),x=199+k*11;c.fillStyle=EQ[k];c.lineWidth=4.5;c.beginPath();c.roundRect(x,240-h,9,h,3);c.fill();c.stroke()}
|
||||
c.save();c.translate(196,58);const s=1+.1*(1-p);c.scale(s,s)
|
||||
c.fillStyle='#fff';c.lineWidth=6;c.beginPath();c.moveTo(-30,-11);c.lineTo(-16,-11);c.lineTo(2,-27);c.lineTo(2,27);c.lineTo(-16,11);c.lineTo(-30,11);c.closePath();c.fill();c.stroke()
|
||||
for(let k=0;k<3;k++)ds(c,11,5,k<3-p*3?HAIR:'#dee2e6',()=>{c.arc(4,0,14+k*12,-.75,.75)})
|
||||
c.restore()
|
||||
for(let k=0;k<3;k++){const q=(t+k/3)%1,x=[30,62,142][k]+10*sin(T*q+k),y=[170,150,96][k]-100*q,sc=sin(PI*q);if(sc>.05)note(c,x,y,.8*min(1,sc*2),NT[k],k==1)}
|
||||
const H=f=>{c.save();c.translate(X,Y+by);c.rotate(a);c.scale(.72,.72);c.translate(-128,-186);f();c.restore()}
|
||||
H(()=>{c.lineWidth=8;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(200,34,218,100,214,170);c.quadraticCurveTo(220,226,226,262);c.lineTo(30,262);c.quadraticCurveTo(36,226,42,170);c.bezierCurveTo(38,100,56,34,128,34);c.fill();c.stroke()})
|
||||
c.save();c.translate(X,Y+by*.5);c.rotate(sw);c.scale(.72,.72);c.translate(-128,-186)
|
||||
c.lineWidth=8;c.fillStyle=TEE;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(48,198,36,330);c.lineTo(220,330);c.quadraticCurveTo(208,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(106,190);c.quadraticCurveTo(128,212,150,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=TD;c.lineWidth=6;c.beginPath();c.moveTo(128,250);c.bezierCurveTo(100,226,108,206,128,222);c.bezierCurveTo(148,206,156,226,128,250);c.fill();c.stroke()
|
||||
c.restore()
|
||||
c.save();c.translate(X,Y+by);c.rotate(a);c.scale(.72,.72);c.translate(-128,-186)
|
||||
c.lineWidth=8;c.fillStyle=SKIN;c.beginPath();c.moveTo(114,168);c.lineTo(114,194);c.quadraticCurveTo(128,206,142,194);c.lineTo(142,168);c.fill();c.beginPath();c.moveTo(114,168);c.lineTo(114,192);c.moveTo(142,168);c.lineTo(142,192);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()
|
||||
c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,15,1.15*PI,1.85*PI),c.stroke()
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,14,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO
|
||||
if(p<.5){c.beginPath();c.ellipse(128,172,10,12,0,0,T);c.fill();c.stroke();c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,184,8,6,0,0,T);c.fill();c.restore()}
|
||||
else{c.beginPath();c.moveTo(114,164);c.quadraticCurveTo(128,184,142,164);c.closePath();c.fill();c.stroke()}
|
||||
c.lineWidth=8;c.fillStyle=HAIR;c.beginPath();c.moveTo(66,170)
|
||||
c.bezierCurveTo(48,74,88,36,128,36);c.bezierCurveTo(168,36,208,74,190,170);c.quadraticCurveTo(184,160,180,168)
|
||||
c.quadraticCurveTo(186,124,178,104);c.quadraticCurveTo(172,106,166,114);c.quadraticCurveTo(162,98,152,90);c.quadraticCurveTo(146,104,136,110)
|
||||
c.quadraticCurveTo(132,96,124,88);c.quadraticCurveTo(118,102,108,110);c.quadraticCurveTo(104,96,96,92);c.quadraticCurveTo(90,104,84,110)
|
||||
c.quadraticCurveTo(80,104,78,104);c.quadraticCurveTo(70,128,76,168);c.quadraticCurveTo(70,160,66,170);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[s,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*s,PI*e),c.stroke()
|
||||
ds(c,26,15,MN,()=>{c.moveTo(48,128);c.bezierCurveTo(40,10,216,10,208,128)})
|
||||
c.strokeStyle=MD;c.lineWidth=4;c.beginPath();c.moveTo(70,60);c.bezierCurveTo(100,30,156,30,186,60);c.stroke();c.strokeStyle='#111'
|
||||
for(const d of[-1,1]){const x=128+d*84
|
||||
c.fillStyle=CU;c.lineWidth=7;c.beginPath();c.roundRect(x-(d>0?16:4),104,20,58,8);c.fill();c.stroke()
|
||||
c.fillStyle=MN;c.beginPath();c.roundRect(x+(d>0?0:-24)+d*4,96,24,74,12);c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.ellipse(x+d*16,133,5,18,0,0,T);c.fill();c.stroke()}
|
||||
c.restore()
|
||||
const[hx,hy]=G(220,150)
|
||||
ds(c,24,15,TEE,()=>{c.moveTo(180,226);c.quadraticCurveTo(204,200,hx,hy+12)})
|
||||
c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(hx,hy,12,14,a,0,T);c.fill();c.stroke()
|
||||
}
|
||||
Reference in New Issue
Block a user