mirror of
https://github.com/direct-img/vibegif.direct-img.link.git
synced 2026-10-29 03:34:51 +00:00
37 lines
2.8 KiB
JavaScript
37 lines
2.8 KiB
JavaScript
// cheshire cat: it vanishes bit by bit, tail first, then body, then head, until only the grin floats there, then it comes back
|
|
const{sin,cos,PI,min,max}=Math,T=2*PI
|
|
export const frames=24,delay=85,rim=3,rimColor='#111'
|
|
const ss=x=>x<0?0:x>1?1:x*x*(3-2*x),k=(t,a,b,c,d)=>t<.5?1-ss((t-a)/(b-a)):ss((t-c)/(d-c))
|
|
export default(c,t)=>{
|
|
const tl=k(t,.06,.18,.86,.96),bd=k(t,.16,.3,.74,.88),hd=k(t,.28,.42,.6,.76),bl=t>.04&&t<.08
|
|
c.fillStyle=c.strokeStyle='#fff';c.lineWidth=6
|
|
const shape=f=>{c.beginPath();f();c.fill();c.stroke()},at=(x,y,z,f)=>{c.save();c.translate(x,y);c.scale(z,z);c.translate(-x,-y);f();c.restore()}
|
|
c.translate(128,128);c.scale(.94,.94);c.translate(-128,-124+4*sin(T*t))
|
|
if(tl>0){c.lineWidth=16;c.setLineDash([150*tl,400]);c.beginPath();c.moveTo(170,206);c.quadraticCurveTo(150,226,90,220);c.quadraticCurveTo(60,218,52,200+5*sin(T*t*2));c.stroke();c.setLineDash([])
|
|
c.fillStyle=c.strokeStyle='#111';c.lineWidth=4;for(const[i,x]of[138,108,78].entries())if(tl>.2+i*.25)c.beginPath(),c.moveTo(x,211+(x-108)*.03),c.lineTo(x+4,225),c.stroke()}
|
|
if(bd>0)at(128,104,bd,()=>{
|
|
c.fillStyle=c.strokeStyle='#fff';c.lineWidth=6
|
|
shape(()=>{c.moveTo(128,104);c.bezierCurveTo(186,104,192,222,128,222);c.bezierCurveTo(64,222,70,104,128,104)})
|
|
c.fillStyle=c.strokeStyle='#111';c.lineWidth=4
|
|
for(const d of[-1,1])for(const y of[140,162])c.beginPath(),c.moveTo(128+d*41,y),c.quadraticCurveTo(128+d*35,y+4,128+d*31,y+10),c.stroke()
|
|
for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*22,214),c.lineTo(128+d*22,222),c.stroke()
|
|
})
|
|
if(tl>.9&&bd>.99){c.strokeStyle='#111';c.lineWidth=3.5;c.beginPath();c.moveTo(96,206);c.quadraticCurveTo(130,212,168,204);c.stroke()}
|
|
if(hd>0)at(128,108,hd,()=>{
|
|
c.fillStyle=c.strokeStyle='#fff';c.lineWidth=6
|
|
for(const d of[-1,1])shape(()=>{c.moveTo(128+d*24,48);c.lineTo(128+d*44,12);c.lineTo(128+d*50,60)})
|
|
shape(()=>c.ellipse(128,80,52,42,0,0,T))
|
|
c.fillStyle=c.strokeStyle='#111';c.lineWidth=4
|
|
for(const x of[112,128,144])c.beginPath(),c.moveTo(x,40+(x==128?-2:2)),c.lineTo(x,54+(x==128?2:0)),c.stroke()
|
|
for(const d of[-1,1])for(const y of[70,82])c.beginPath(),c.moveTo(128+d*50,y),c.lineTo(128+d*38,y+3),c.stroke()
|
|
c.lineWidth=3.5;for(const d of[-1,1])if(bl)c.beginPath(),c.arc(128+d*20,70,7,.15*PI,.85*PI),c.stroke()
|
|
else c.beginPath(),c.ellipse(128+d*20,72,7,9,0,0,T),c.fill()
|
|
c.beginPath();c.moveTo(122,86);c.lineTo(134,86);c.lineTo(128,92);c.closePath();c.fill()
|
|
})
|
|
const y=(x,k)=>96+k*2*((x-84)/88)*(1-(x-84)/88)
|
|
c.fillStyle='#fff';c.strokeStyle='#111';c.lineWidth=3.5
|
|
c.beginPath();c.moveTo(84,96);c.quadraticCurveTo(128,112,172,96);c.quadraticCurveTo(128,154,84,96);c.fill();c.stroke()
|
|
c.lineWidth=2;c.beginPath();c.moveTo(88,99);c.quadraticCurveTo(128,130,168,99);c.stroke()
|
|
for(let x=96;x<170;x+=12)c.beginPath(),c.moveTo(x,y(x,16)+1),c.lineTo(x,y(x,58)-1),c.stroke()
|
|
}
|