Trim the minimalist section to 4 and show the real tile count

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-23 14:17:30 +00:00
co-authored by Claude Opus 5.5
parent 461a39caa2
commit b9200e390f
144 changed files with 10 additions and 1207 deletions
-32
View File
@@ -1,32 +0,0 @@
// anglerfish drifting in the dark: its glowing lure bobs and pulses on the stalk, the jaw opens a little to show its teeth
const{sin,cos,PI,max}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const s=sin(T*t),k=sin(T*t-1.2),o=t>.35&&t<.85?sin(PI*(t-.35)/.5):0,pu=.5+.5*sin(T*t*2)
const lx=212+8*sin(T*t-1),ly=62+5*cos(T*t-1)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(128,128+6*s);c.rotate(.03*cos(T*t));c.scale(.92,.92);c.translate(-137,-124)
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
shape(66,140,.18*k,()=>{
c.moveTo(4,-16);c.quadraticCurveTo(-18,-30,-36,-32);c.quadraticCurveTo(-28,0,-36,32);c.quadraticCurveTo(-18,30,4,16)})
shape(0,0,0,()=>{
c.moveTo(66,124);c.bezierCurveTo(80,82,140,70,178,96);c.bezierCurveTo(196,108,204,124,204,136)
c.bezierCurveTo(206,160,190,186,150,192);c.bezierCurveTo(110,198,76,176,66,156)})
shape(106,82,-.2+.1*k,()=>{c.moveTo(-14,8);c.lineTo(-2,-16);c.lineTo(14,6)})
shape(122,188,-.5-.3*sin(T*t*2),()=>c.ellipse(-16,8,18,8,0,0,T))
c.lineWidth=4;c.beginPath();c.moveTo(156,86);c.quadraticCurveTo(192,22,lx,ly);c.stroke()
c.beginPath();c.arc(lx,ly,10,0,T);c.fill()
c.lineWidth=3;for(let i=0;i<8;i++){
const a=i*PI/4+T*t/8;c.beginPath();c.moveTo(lx+15*cos(a),ly+15*sin(a));c.lineTo(lx+(18+5*pu)*cos(a),ly+(18+5*pu)*sin(a));c.stroke()
}
c.fillStyle=c.strokeStyle='#fff'
c.beginPath();c.arc(lx,ly,3.5+1.5*pu,0,T);c.fill()
c.beginPath();c.arc(170,118,6,0,T);c.fill()
// mouth: white rim with teeth, the lower lip drops as the jaw opens
const q=(a,b,e,u)=>[(1-u)**2*a[0]+2*u*(1-u)*b[0]+u*u*e[0],(1-u)**2*a[1]+2*u*(1-u)*b[1]+u*u*e[1]]
const M=[150,150],U=[[178,148],[198,136]],L=[[176,156+12*o],[197,140+10*o]]
c.lineWidth=3.5;c.beginPath();c.moveTo(...M);c.quadraticCurveTo(...U[0],...U[1]);c.lineTo(...L[1]);c.quadraticCurveTo(...L[0],...M);c.closePath();c.stroke()
for(const[E,u,d]of[[U,.35,1],[U,.6,1],[U,.84,1],[L,.48,-1],[L,.74,-1]]){
const[x,y]=q(M,...E,u);c.beginPath();c.moveTo(x-3.5,y);c.lineTo(x+3.5,y);c.lineTo(x,y+7*d);c.fill()
}
}
-27
View File
@@ -1,27 +0,0 @@
// ant carrying a leaf twice its size: six legs walk in a tripod gait, the leaf sways overhead, antennae bob
const{sin,cos,PI,max,abs}=Math,T=2*PI
export const frames=24,delay=70,rim=3
export default(c,t)=>{
const p=T*t*2,b=2*abs(sin(p)),sw=.05*sin(p-1)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=5
const shape=f=>{c.beginPath();f();c.fill();c.stroke()}
for(const[k,hx,fo]of[[0,142,26],[1,130,2],[0,118,-24]]){
const q=p+k*PI,fx=hx+fo+9*sin(q),fy=212-6*max(0,cos(q))
c.beginPath();c.moveTo(hx,174);c.lineTo((hx+fx)/2+fo*.35,188-b);c.lineTo(fx,fy);c.stroke()
}
c.translate(0,-b);c.lineWidth=6
c.save();c.translate(74,170);c.rotate(-.2);shape(()=>c.ellipse(0,0,32,23,0,0,T));c.restore()
shape(()=>c.arc(106,172,7,0,T))
c.save();c.translate(130,168);c.rotate(-.15);shape(()=>c.ellipse(0,0,21,11,0,0,T));c.restore()
shape(()=>c.arc(162,156,16,0,T))
c.lineWidth=4;for(const o of[0,6]){c.beginPath();c.moveTo(168+o,146);c.lineTo(184+o,130+2*sin(p+o));c.lineTo(202+o,136+3*sin(p+o));c.stroke()}
c.lineWidth=5;c.beginPath();c.moveTo(174,166);c.quadraticCurveTo(184,170,178,178);c.stroke()
c.save();c.translate(174,164);c.rotate(sw)
c.lineWidth=6;c.beginPath();c.moveTo(0,0);c.lineTo(-24,-52);c.stroke()
c.translate(-24,-52);c.rotate(-2.6)
shape(()=>{c.moveTo(0,0);c.quadraticCurveTo(64,-30,130,0);c.quadraticCurveTo(64,30,0,0)})
c.strokeStyle='#fff';c.lineWidth=3;c.beginPath();c.moveTo(8,0);c.lineTo(118,0)
for(const x of[34,62,90])c.moveTo(x,0),c.lineTo(x+14,-11),c.moveTo(x,0),c.lineTo(x+14,11)
c.stroke();c.restore()
c.fillStyle='#fff';c.beginPath();c.arc(168,152,3.5,0,T);c.fill()
}
-25
View File
@@ -1,25 +0,0 @@
// giant anteater: the thin tongue flicks out of its long snout three times, the huge bushy tail sways, it blinks
const{sin,PI,max}=Math,T=2*PI
export const frames=24,delay=75,rim=3
export default(c,t)=>{
const L=36*max(0,sin(3*T*t)),nod=.04*sin(3*T*t),sw=.08*sin(T*t),bl=t>.9&&t<.96
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
c.translate(128,170);c.scale(.88,.88);c.translate(-122,-170)
shape(78,122,sw,()=>{c.moveTo(6,-16);c.bezierCurveTo(-16,-42,-54,-48,-72,-26);c.quadraticCurveTo(-76,-6,-60,4);c.quadraticCurveTo(-54,16,-40,14);c.quadraticCurveTo(-30,24,-18,16);c.quadraticCurveTo(-6,20,6,14)})
c.lineWidth=14
for(const[x0,x1]of[[82,80],[98,100],[136,132],[152,156]])c.beginPath(),c.moveTo(x0,140),c.lineTo(x1,204),c.stroke()
c.lineWidth=6
for(const x of[80,100,132,156])shape(x+4,206,0,()=>c.ellipse(0,0,10,4,0,0,T))
shape(112,128,0,()=>c.ellipse(0,0,52,30,0,0,T))
shape(138,118,0,()=>c.ellipse(0,0,34,28,0,0,T))
c.save();c.translate(160,114);c.rotate(nod);c.translate(-160,-114)
if(L>1)c.lineWidth=2.5,c.beginPath(),c.moveTo(224,144),c.quadraticCurveTo(226+L*.4,148+L*.5+3*sin(T*t*9),226+L*.6,146+L*.9),c.stroke(),c.lineWidth=6
shape(162,104,0,()=>c.ellipse(0,0,6,5,0,0,T))
shape(170,118,0,()=>{c.ellipse(0,0,16,14,0,0,T);c.moveTo(4,-12);c.quadraticCurveTo(30,-4,58,22);c.quadraticCurveTo(52,28,44,24);c.quadraticCurveTo(26,16,0,12)})
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=2.5,c.beginPath(),c.arc(176,112,3,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(176,114,2.8,0,T),c.fill()
c.restore();c.strokeStyle='#fff';c.lineWidth=4
c.beginPath();c.moveTo(152,104);c.quadraticCurveTo(140,124,118,138);c.stroke()
}
-31
View File
@@ -1,31 +0,0 @@
// armadillo trots in place, curls up into a banded ball, rocks a little, then unrolls and trots on
const{sin,cos,PI}=Math,T=2*PI
export const frames=32,delay=70,rim=3
const ease=x=>x<0?0:x>1?1:x*x*(3-2*x)
export default(c,t)=>{
const k=t<.5?ease((t-.3)/.15):1-ease((t-.75)/.15),rock=t>.45&&t<.75?.5*sin(PI*(t-.45)/.3):0
const span=PI*(1.15+.85*k),R=58-14*k,gy=210,leg=18*(1-k),cx=128+R*rock,cy=gy-leg+R*cos(span/2)
const a0=-PI/2-span/2+rock,a1=-PI/2+span/2+rock,w=sin(T*t*4)*(1-k),bl=t>.12&&t<.17
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,s,f)=>{c.save();c.translate(x,y);c.rotate(r);c.scale(s,s);c.beginPath();f();c.fill();c.stroke();c.restore()}
if(leg>1){c.lineWidth=13;for(const[x,ph]of[[-.55,0],[-.35,PI],[.35,PI],[.55,0]]){
const lx=cx+R*x,a=.35*sin(T*t*4+ph)*(1-k)
c.beginPath();c.moveTo(lx,gy-leg-6);c.lineTo(lx-(leg+6)*sin(a),gy-leg-6+(leg+6)*cos(a)-6);c.stroke()}c.lineWidth=6}
const s=1-k
if(s>.02){
shape(cx+R*cos(a0),cy+R*sin(a0),a0-.25,s,()=>{c.moveTo(-2,-9);c.quadraticCurveTo(22,-4,44,2);c.quadraticCurveTo(22,5,-2,9)})
c.save();c.translate(cx+R*cos(a1)-2,cy+R*sin(a1)-4+1.5*w);c.rotate(a1+.15);c.scale(s,s)
c.beginPath();c.ellipse(8,0,17,13,0,0,T);c.moveTo(14,-9);c.lineTo(40,2);c.lineTo(14,9);c.fill();c.stroke()
c.beginPath();c.ellipse(2,-13,5,8,-.5,0,T);c.fill();c.stroke()
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=2.5,c.beginPath(),c.arc(12,-4,3,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(12,-3,2.8,0,T),c.fill()
c.restore();c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
}
c.beginPath();c.arc(cx,cy,R,a0,a1);c.closePath();c.fill();c.stroke()
// bands: parallel white stripes kept inside a shrunken copy of the shell, they turn with the ball when it rocks
c.save();c.beginPath();c.arc(cx,cy,R-9,a0,a1);c.closePath();c.clip()
c.translate(cx,cy);c.rotate(rock);c.strokeStyle='#fff';c.lineWidth=3.5
for(let j=-2;j<=2;j++)c.beginPath(),c.moveTo(j*R*.28,-R),c.lineTo(j*R*.28,R),c.stroke()
c.restore()
}
-27
View File
@@ -1,27 +0,0 @@
// camel walking in place: two humps, long legs stepping in diagonal pairs, the head bobs on its curved neck, tail swishes
const{sin,cos,PI,max}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const b=2.5*sin(2*T*t),hb=3*sin(2*T*t-1),bl=t>.55&&t<.61
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
c.translate(-12,-4)
for(const[x,ph]of[[84,0],[100,PI],[150,PI],[166,0]]){
const a=.3*sin(T*t+ph),lift=max(0,-cos(T*t+ph)),y=136+b
const kx=x-36*sin(a),ky=y+36*cos(a),a2=a+.5*lift,fx=kx-38*sin(a2),fy=ky+38*cos(a2)
c.lineWidth=9;c.beginPath();c.moveTo(x,y-10);c.lineTo(kx,ky);c.lineTo(fx,fy);c.stroke()
shape(fx+3,fy,0,()=>c.ellipse(0,0,6,3,0,0,T))
}
c.lineWidth=5;c.beginPath();c.moveTo(68,112+b);c.quadraticCurveTo(58,126+b,60+4*sin(T*t),142+b);c.stroke()
shape(60+4*sin(T*t),146+b,0,()=>c.ellipse(0,0,4,7,0,0,T))
shape(124,118+b,0,()=>c.ellipse(0,0,58,28,0,0,T))
shape(100,96+b,0,()=>c.ellipse(0,0,24,24,0,0,T))
shape(148,96+b,0,()=>c.ellipse(0,0,24,24,0,0,T))
c.lineWidth=18;c.beginPath();c.moveTo(166,108+b);c.bezierCurveTo(196,118+b,206,104+hb,206,80+hb);c.stroke();c.lineWidth=6
shape(198,58+hb,-.6,()=>c.ellipse(0,0,4,7,0,0,T))
shape(206,68+hb,0,()=>c.ellipse(0,0,13,11,0,0,T))
shape(218,74+hb,.3,()=>c.ellipse(0,0,18,10,0,0,T))
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3,c.beginPath(),c.arc(208,65+hb,3.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(208,67+hb,3.2,0,T),c.fill()
}
-24
View File
@@ -1,24 +0,0 @@
// cat with bat wings hovering in place: two slow flaps per loop, the body bobs with each beat, tail swishes, slit eyes blink, one tiny fang
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=70,rim=3
export default(c,t)=>{
const a=.5*sin(2*T*t),bl=t>.76&&t<.84,s=sin(T*t)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(0,6*sin(2*T*t)-4)
const shape=g=>{c.beginPath();g();c.fill();c.stroke()}
for(const d of[-1,1]){
c.save();c.translate(128+d*16,134);c.scale(d*.92,.92);c.rotate(-a)
shape(()=>{c.moveTo(0,-10);c.quadraticCurveTo(40,-48,88,-40);c.quadraticCurveTo(72,-16,78,6);c.quadraticCurveTo(60,-4,52,18);c.quadraticCurveTo(36,4,26,22);c.quadraticCurveTo(14,8,0,14);c.closePath()})
c.restore()
}
c.lineWidth=7;c.beginPath();c.moveTo(142,162);c.bezierCurveTo(160,198,184+10*s,204,186+12*s,186);c.stroke();c.lineWidth=6
shape(()=>c.ellipse(128,150,22,26,0,0,T))
for(const d of[-1,1])shape(()=>c.arc(128+d*10,176,6,0,T))
shape(()=>c.arc(128,104,36,0,T))
for(const d of[-1,1])shape(()=>{c.moveTo(128+d*32,92);c.lineTo(128+d*32,56);c.lineTo(128+d*6,72);c.closePath()})
c.fillStyle=c.strokeStyle='#fff'
for(const d of[-1,1])if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(128+d*14,100,7,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.ellipse(128+d*14,102,8,9,0,0,T),c.fill(),c.fillStyle='#111',c.beginPath(),c.ellipse(128+d*14,102,2.2,6.5,0,0,T),c.fill(),c.fillStyle='#fff'
c.lineWidth=2.5;for(const d of[-1,1])c.beginPath(),c.arc(128+d*4,114,4,0,PI),c.stroke()
c.beginPath();c.moveTo(131,117);c.lineTo(137,117);c.lineTo(134,124);c.fill()
}
-24
View File
@@ -1,24 +0,0 @@
// sheep whose body is a little rain cloud: it floats and bobs, the puffs breathe, tiny legs dangle, raindrops fall from underneath
const{sin,PI,min}=Math,T=2*PI
export const frames=24,delay=80,rim=3,invert=true
const P=[[78,112,28],[106,90,32],[142,88,32],[170,108,26],[96,130,28],[132,132,30],[160,128,24],[62,130,20]]
export default(c,t)=>{
const y=5*sin(T*t),bl=t>.5&&t<.56
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
for(const[x,y0,o]of[[70,146,0],[70,146,.5],[128,158,.25],[128,158,.75],[184,128,.4],[184,128,.9]]){
const u=(t+o)%1,z=min(1,(1-u)*4),yy=y0+(232-y0)*u
c.save();c.translate(x,yy);c.scale(z,z);c.beginPath();c.moveTo(0,-9);c.bezierCurveTo(6,-2,6,6,0,6);c.bezierCurveTo(-6,6,-6,-2,0,-9);c.fill();c.restore()
}
c.translate(0,y)
c.lineWidth=8;for(const[i,x]of[92,108,148,164].entries())c.beginPath(),c.moveTo(x,150),c.lineTo(x+3*sin(T*t+i*1.7),176),c.stroke()
c.lineWidth=6
P.forEach(([x,y,r],i)=>{c.beginPath();c.arc(x,y,r+1.5*sin(T*t+i*1.3),0,T);c.fill()})
c.beginPath();c.ellipse(216,100,13,5.5,-.35,0,T);c.fill();c.stroke()
c.save();c.translate(204,124);c.rotate(-.6+.06*sin(T*t))
c.beginPath();c.ellipse(0,0,15,23,0,0,T);c.fill();c.stroke()
c.beginPath();c.arc(-2,-18,12,0,T);c.fill()
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3,c.beginPath(),c.arc(5,-3,4.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(5,-1,4,0,T),c.fill()
c.restore()
}
-20
View File
@@ -1,20 +0,0 @@
// dragonfly hovering, seen from above: four wings buzz between two poses every frame, a long banded tail, a slow figure-eight drift
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=70,rim=3
export default(c,t,i)=>{
const z=i%2
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(128+5*sin(T*t),128+5*sin(T*t*2));c.rotate(.05*sin(T*t));c.translate(-128,-128)
for(const[x,a]of[[166,.36],[144,-.42]])for(const d of[-1,1]){
const l=z?66:80
c.save();c.translate(x,128);c.scale(1,d);c.rotate(a+(z?.06:-.06))
c.beginPath();c.ellipse(0,-l/2-4,11,l/2,0,0,T);c.fill();c.stroke()
c.strokeStyle='#fff';c.lineWidth=2.5;c.beginPath();c.moveTo(0,-12);c.lineTo(0,-l+6);c.stroke()
c.restore()
}
c.beginPath();c.moveTo(148,121);c.lineTo(40,125);c.lineTo(40,131);c.lineTo(148,135);c.closePath();c.fill();c.stroke()
c.beginPath();c.ellipse(158,128,20,13,0,0,T);c.fill();c.stroke()
for(const d of[-1,1])c.beginPath(),c.arc(184,128+d*10,11,0,T),c.fill(),c.stroke()
c.strokeStyle='#fff';c.lineWidth=2.5;for(const x of[66,88,110,130])c.beginPath(),c.moveTo(x,124),c.lineTo(x,132),c.stroke()
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(188,128+d*12,3.5,0,T),c.fill()
}
-20
View File
@@ -1,20 +0,0 @@
// dust bunny hopping: a fuzzy ball on tiny stick legs, big eyes that look up as it jumps, little dust puffs when it lands
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=70,rim=3
export default(c,t)=>{
const air=t<.5,e=air?sin(PI*t/.5):0,h=36*e,v=air?cos(PI*t/.5):0,sq=t>.5&&t<.68?.14*sin(PI*(t-.5)/.18):0
const sx=1+sq,sy=1-sq+.04*e*e,R=52,LL=14*(1-sq),cx=128,cy=220-5-LL-R*sy-h,bl=t>.8&&t<.86
c.fillStyle=c.strokeStyle='#111';c.lineWidth=5
for(const d of[-1,1]){
const fx=cx+d*(18+4*e),fy=cy+R*sy+LL
c.beginPath();c.moveTo(cx+d*18,cy+R*sy-6);c.lineTo(fx,fy);c.stroke()
c.beginPath();c.ellipse(fx+d*4,fy+1,8,4.5,0,0,T);c.fill()
}
if(t>.5&&t<.8){const q=(t-.5)/.3;for(const d of[-1,1])for(const[a,b,r]of[[70,34,9],[56,26,6]])c.beginPath(),c.arc(cx+d*(a+b*q),214-8*q-(r<9?6:0),r*(1-q),0,T),c.fill()}
c.lineWidth=4;c.beginPath()
for(let k=0;k<72;k++){const a=k*PI/36,rr=k%2?R+13+5*sin(k*2.39):R;c.lineTo(cx+rr*cos(a)*sx,cy+rr*sin(a)*sy)}
c.closePath();c.fill();c.stroke()
c.fillStyle=c.strokeStyle='#fff'
for(const d of[-1,1])if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(cx+d*21,cy-10*sy,9,.15*PI,.85*PI),c.stroke()
else{c.beginPath();c.arc(cx+d*21,cy-8*sy,12,0,T);c.fill();c.fillStyle='#111';c.beginPath();c.arc(cx+d*19,cy-8*sy-3*v*e+1,5.5,0,T);c.fill();c.fillStyle='#fff'}
}
-25
View File
@@ -1,25 +0,0 @@
// fawn standing still: big ears with one flicking, the short tail flicks twice, white spots on its back, it blinks
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const br=sin(T*t),ef=t>.2&&t<.32?.6*sin(PI*(t-.2)/.12):0,tf=t>.55&&t<.8?.5*sin(T*(t-.55)/.125):0,hd=.06*sin(T*t),bl=t>.86&&t<.92
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
c.translate(-6,0);c.lineWidth=7
for(const l of[[86,136,78,176,84,212],[100,138,100,176,102,212],[146,138,146,176,144,212],[160,136,162,176,166,212]])
c.beginPath(),c.moveTo(l[0],l[1]),c.lineTo(l[2],l[3]),c.lineTo(l[4],l[5]),c.stroke()
c.lineWidth=6
shape(76,114,-.3-tf,()=>c.ellipse(-4,-8,6,11,-.4,0,T))
shape(122,126,0,()=>c.ellipse(0,br,50,24+br*.5,0,0,T))
c.lineWidth=20;c.beginPath();c.moveTo(156,118);c.lineTo(172,82);c.stroke();c.lineWidth=6
c.save();c.translate(172,84);c.rotate(hd);c.translate(-172,-84)
shape(166,64,-1,()=>c.ellipse(0,-13,6.5,15,0,0,T))
shape(179,60,.15-ef,()=>c.ellipse(0,-13,6.5,15,0,0,T))
shape(178,72,0,()=>c.ellipse(0,0,16,14,0,0,T))
shape(194,80,.3,()=>c.ellipse(0,0,12,8,0,0,T))
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3,c.beginPath(),c.arc(182,68,4,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(182,70,3.6,0,T),c.fill()
c.restore();c.fillStyle='#fff'
for(const[x,y,r]of[[96,116,3.4],[112,112,3.6],[128,111,3.4],[144,114,3.2],[104,127,3],[122,124,3.2],[138,126,3]])c.beginPath(),c.arc(x,y+br,r,0,T),c.fill()
}
-25
View File
@@ -1,25 +0,0 @@
// firefly drifting: wings flutter every frame, the bulb in its tail lights up white with pulsing rays, then goes dark again
const{sin,cos,PI,max}=Math,T=2*PI
export const frames=24,delay=80,rim=3
const W=[[-.45,-.95],[-.2,-1.25]]
export default(c,t,i)=>{
const g=t<.6?sin(PI*t/.6):0
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
c.translate(128+4*sin(T*t*2),128+8*sin(T*t));c.rotate(.05*cos(T*t));c.translate(-128,-128)
for(const a of W[i%2])shape(148,112,a,()=>c.ellipse(0,-34,12,34,0,0,T))
shape(106,142,.35,()=>c.ellipse(0,0,46,23,0,0,T))
shape(148,124,0,()=>c.ellipse(0,0,18,15,0,0,T))
shape(170,114,0,()=>c.arc(0,0,13,0,T))
c.lineWidth=3;for(const[x,y]of[[200,84],[190,78]])c.beginPath(),c.moveTo(174,104),c.quadraticCurveTo(x-6,y+14,x,y),c.stroke()
if(g>.15){
c.lineWidth=5;for(const a of[.6,.8,1,1.2]){
const r=36,R=r+6+14*g,x=cos(a*PI),y=sin(a*PI)
c.beginPath();c.moveTo(86+x*r,150+y*r);c.lineTo(86+x*R,150+y*R);c.stroke()
}
}
c.fillStyle=c.strokeStyle='#fff';c.lineWidth=2.5;c.save();c.translate(86,150);c.rotate(.35);c.beginPath()
if(g>.15)c.ellipse(0,0,10+4*g,8+3*g,0,0,T),c.fill();else c.ellipse(0,0,10,8,0,0,T),c.stroke()
c.restore()
c.fillStyle='#fff';c.beginPath();c.arc(174,110,3.5,0,T);c.fill()
}
-23
View File
@@ -1,23 +0,0 @@
// fish with bird wings flying in a gentle arc: beats its wings twice per loop, tilts into the climb and dive, tail swishes
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=70,rim=3
export default(c,t)=>{
const w=cos(2*T*t),bl=t>.6&&t<.66
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(128,136+14*sin(T*t));c.rotate(.2*cos(T*t));c.scale(1.1,1.1);c.translate(-122,-130)
const shape=g=>{c.beginPath();g();c.fill();c.stroke()}
const wing=(x,y,k,s)=>{c.save();c.translate(x,y);c.scale(k,s*k)
shape(()=>{c.moveTo(10,0);c.quadraticCurveTo(22,-50,-36,-80);c.quadraticCurveTo(-46,-60,-40,-52);c.quadraticCurveTo(-50,-40,-40,-32);c.quadraticCurveTo(-46,-20,-34,-14);c.quadraticCurveTo(-34,-4,-16,2);c.closePath()})
c.restore()}
wing(140,104,.75,cos(2*T*t-.5))
c.save();c.translate(76,130);c.rotate(.25*sin(2*T*t))
shape(()=>{c.moveTo(4,0);c.lineTo(-34,-26);c.quadraticCurveTo(-24,0,-34,26);c.closePath()});c.restore()
shape(()=>{c.moveTo(200,128);c.bezierCurveTo(186,98,110,98,72,126);c.lineTo(72,134);c.bezierCurveTo(110,160,186,158,200,128)})
shape(()=>{c.moveTo(146,148);c.lineTo(132,166);c.lineTo(158,150);c.closePath()})
wing(126,106,1,w)
c.fillStyle=c.strokeStyle='#fff';c.lineWidth=3
c.beginPath();c.arc(150,128,20,-.9,.9);c.stroke()
c.beginPath();c.moveTo(198,132);c.lineTo(188,134);c.stroke()
if(bl)c.beginPath(),c.arc(178,118,5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(178,120,5.5,0,T),c.fill()
}
-33
View File
@@ -1,33 +0,0 @@
// fox-moth hovering: fox face with a white cheek mask, big moth wings with eyespots beating slowly, feathery antennae
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const f=.5+.5*cos(T*t),bl=t>.7&&t<.78
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(0,7*sin(T*t)+4)
const shape=g=>{c.beginPath();g();c.fill();c.stroke()}
for(const d of[-1,1]){
c.save();c.translate(128+d*8,136);c.scale(d*(.45+.55*f),1)
shape(()=>{c.moveTo(0,-8);c.bezierCurveTo(28,-76,98,-86,94,-32);c.bezierCurveTo(92,0,52,14,0,8)})
shape(()=>{c.moveTo(0,6);c.bezierCurveTo(42,8,76,42,60,72);c.bezierCurveTo(46,94,10,64,0,22)})
c.fillStyle=c.strokeStyle='#fff';c.lineWidth=4
c.beginPath();c.arc(60,-36,11,0,T);c.stroke()
c.beginPath();c.arc(40,48,5,0,T);c.fill()
c.restore()
}
c.save();c.translate(128,160);c.rotate(.14*sin(T*t-1))
shape(()=>{c.moveTo(-9,0);c.bezierCurveTo(-30,26,-18,64,4,68);c.bezierCurveTo(24,66,22,30,9,0);c.closePath()});c.restore()
shape(()=>c.ellipse(128,148,17,28,0,0,T))
shape(()=>{c.moveTo(88,102);c.lineTo(94,58);c.lineTo(116,84);c.lineTo(140,84);c.lineTo(162,58);c.lineTo(168,102);c.quadraticCurveTo(160,122,128,142);c.quadraticCurveTo(96,122,88,102);c.closePath()})
c.lineWidth=3
for(const d of[-1,1]){
c.save();c.translate(128+d*6,88);c.rotate(d*.06*sin(2*T*t))
c.beginPath();c.moveTo(0,0);c.quadraticCurveTo(-d*2,-34,d*12,-58);c.stroke()
c.beginPath();c.ellipse(d*13,-56,4.5,12,d*.3,0,T);c.fill();c.restore()
}
c.fillStyle=c.strokeStyle='#fff'
c.beginPath();c.moveTo(96,110);c.quadraticCurveTo(114,108,128,120);c.quadraticCurveTo(142,108,160,110);c.quadraticCurveTo(152,126,128,136);c.quadraticCurveTo(104,126,96,110);c.fill()
c.fillStyle='#111';c.beginPath();c.ellipse(128,130,6,4.5,0,0,T);c.fill();c.fillStyle='#fff'
for(const d of[-1,1])if(bl)c.beginPath(),c.moveTo(128+d*9,100),c.lineTo(128+d*23,95),c.stroke()
else c.beginPath(),c.ellipse(128+d*16,98,7.5,4.5,-d*.35,0,T),c.fill()
}
-18
View File
@@ -1,18 +0,0 @@
// rock golem stomping in place: stacked boulders, glowing slit eyes, each stomp gives a little bounce
const{sin,cos,PI,min}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const sd=t<.5?-1:1,u=(t*2)%1,lift=u<.55?22*sin(PI*u/.55):0,bo=u>.55?5*sin(PI*min(1,(u-.55)/.3)):0
const bx=128-sd*4*sin(PI*min(1,u/.55)),by=134+bo
c.fillStyle=c.strokeStyle='#111';c.lineWidth=8
const rock=(x,y,rx,ry,s)=>{c.beginPath()
for(let k=0;k<8;k++){const a=k*T/8+.2*sin(s*3+k),q=1+.1*sin(s*5+k*2.1);c.lineTo(x+rx*q*cos(a),y+ry*q*sin(a))}
c.closePath();c.fill();c.stroke()}
rock(106,200-(sd<0?lift:0),18,22,1);rock(150,200-(sd>0?lift:0),18,22,2)
rock(bx,by,50,44,3);rock(bx,by-58,26,22,4)
for(const d of[-1,1]){const sw=d*sd*3*sin(PI*u)
rock(bx+d*58,by-28,20,16,5+d);rock(bx+d*78,by+2+sw,15,20,8+d);rock(bx+d*80,by+36+sw,20,18,11+d)}
c.strokeStyle='#fff';c.lineWidth=5
for(const d of[-1,1])c.beginPath(),c.moveTo(bx+d*5,by-58),c.lineTo(bx+d*15,by-61),c.stroke()
c.lineWidth=3.5;c.beginPath();c.moveTo(bx-6,by-14);c.lineTo(bx+4,by-4);c.lineTo(bx-4,by+6);c.lineTo(bx+6,by+16);c.stroke()
}
-30
View File
@@ -1,30 +0,0 @@
// griffin sitting: eagle front, lion back, both wings beating up and down while the tufted tail swishes and it blinks
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=75,rim=3
export default(c,t)=>{
const f=sin(T*t),bl=t>.78&&t<.84,sw=sin(T*t-1)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,g)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();g();c.fill();c.stroke();c.restore()}
const wing=(x,y,r,s)=>{c.save();c.translate(x,y);c.rotate(r);c.scale(s,-s);c.beginPath()
c.moveTo(0,-10);c.quadraticCurveTo(46,-52,100,-46);c.lineTo(80,-26);c.lineTo(88,-12);c.lineTo(66,-8);c.lineTo(70,8)
c.lineTo(48,4);c.lineTo(48,18);c.lineTo(28,10);c.lineTo(4,14);c.closePath();c.fill();c.stroke();c.restore()}
c.lineWidth=9;c.beginPath();c.moveTo(70,204);c.bezierCurveTo(40,210,26,190,30+6*sw,160);c.stroke();c.lineWidth=6
shape(30+6*sw,160,.3*sw,()=>c.ellipse(0,-8,9,14,0,0,T))
wing(142,132,-2.45+.5*f,.8)
shape(0,0,0,()=>c.ellipse(90,186,40,36,0,0,T))
shape(0,0,0,()=>c.ellipse(96,218,26,8,0,0,T))
shape(128,168,-.35,()=>c.ellipse(0,0,50,32,0,0,T))
shape(158,150,0,()=>c.ellipse(0,0,26,36,0,0,T))
for(const x of[152,170]){
c.lineWidth=11;c.beginPath();c.moveTo(x,170);c.lineTo(x+2,216);c.stroke()
c.lineWidth=5;c.beginPath();for(const[dx,dy]of[[14,4],[8,7],[-9,4]])c.moveTo(x+2,218),c.lineTo(x+2+dx,218+dy);c.stroke()
}
c.lineWidth=34;c.beginPath();c.moveTo(160,140);c.lineTo(172,102);c.stroke();c.lineWidth=6
shape(0,0,0,()=>c.arc(178,92,21,0,T))
shape(0,0,0,()=>{c.moveTo(162,80);c.lineTo(142,72);c.lineTo(158,90);c.lineTo(144,98);c.lineTo(164,102)})
shape(0,0,0,()=>{c.moveTo(194,82);c.quadraticCurveTo(216,82,214,106);c.quadraticCurveTo(206,96,194,100)})
wing(130,138,-2.15+.5*f,.95)
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3,c.beginPath(),c.moveTo(179,89),c.lineTo(189,89),c.stroke()
else c.beginPath(),c.arc(184,88,4.2,0,T),c.fill()
}
-25
View File
@@ -1,25 +0,0 @@
// heron standing on one leg: S-curved neck and long beak, it tilts its head, the plume feathers sway, it blinks
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=85,rim=3,invert=true
export default(c,t)=>{
const hd=t>.25&&t<.65?.18*sin(PI*(t-.25)/.4):0,br=sin(T*t),pl=.08*sin(T*t-1),bl=t>.8&&t<.86
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
const path=(w,f)=>{c.lineWidth=w;c.beginPath();f();c.stroke();c.lineWidth=6}
c.translate(-10,0)
path(5,()=>{c.moveTo(118,136);c.lineTo(120,214)})
path(4,()=>{c.moveTo(120,214);c.lineTo(140,215);c.moveTo(120,214);c.lineTo(102,215);c.moveTo(120,214);c.lineTo(128,210)})
path(5,()=>{c.moveTo(110,136);c.lineTo(102,154);c.lineTo(112,164)})
shape(0,br*.6,0,()=>{c.moveTo(78,122);c.lineTo(54,146);c.lineTo(84,134)})
shape(112,116+br*.6,-.3,()=>c.ellipse(0,0,46,22,0,0,T))
path(12,()=>{c.moveTo(142,102+br*.6);c.bezierCurveTo(170,92,136,68,160,52)})
c.save();c.translate(160,52);c.rotate(-hd);c.translate(-160,-52)
c.lineWidth=3;c.save();c.translate(158,44);c.rotate(pl)
c.beginPath();c.moveTo(0,-2);c.quadraticCurveTo(-14,-10,-30,-8);c.moveTo(0,2);c.quadraticCurveTo(-12,0,-26,4);c.stroke();c.restore()
c.lineWidth=4;c.beginPath();c.moveTo(174,40);c.lineTo(226,50);c.lineTo(174,52);c.closePath();c.fill();c.stroke();c.lineWidth=6
shape(166,46,0,()=>c.ellipse(0,0,13,10,0,0,T))
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=2.5,c.beginPath(),c.arc(169,42,3,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(169,44,2.8,0,T),c.fill()
c.restore()
}
-35
View File
@@ -1,35 +0,0 @@
// hippo with a huge slow yawn: the head tips back and the jaws open wide to show white tusks, eyes squeeze shut, then the ears wiggle
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=85,rim=3
export default(c,t)=>{
const y=t>.1&&t<.7?sin(PI*(t-.1)/.6):0,th=Math.min(1,y*3),a=.6*y,w=t>.74&&t<.96?.35*sin(T*3*(t-.74)/.22):0,H=[172,142]
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
const at=(r,f)=>{c.save();c.translate(...H);c.rotate(r);c.translate(-H[0],-H[1]);f();c.restore()}
const rot=(r,x,y)=>[H[0]+(x-H[0])*cos(r)-(y-H[1])*sin(r),H[1]+(x-H[0])*sin(r)+(y-H[1])*cos(r)]
c.translate(-10,0)
for(const x of[70,92,136,158])shape(x,190,0,()=>c.roundRect(-11,-20,22,42,9))
shape(110,150,0,()=>c.ellipse(0,0,68,46*(1+.02*y),0,0,T))
at(.25*a,()=>shape(204,152,0,()=>c.ellipse(0,0,32,15,0,0,T)))
shape(0,0,0,()=>{c.moveTo(...rot(-a,180,141));c.lineTo(...rot(-a,232,140));c.lineTo(...rot(.25*a,232,141));c.closePath()})
at(-a,()=>{
shape(154,96,-.4+w,()=>c.ellipse(0,-4,6,9,0,0,T))
shape(170,92,.2-w,()=>c.ellipse(0,-4,6,9,0,0,T))
shape(170,118,0,()=>c.ellipse(0,0,30,26,0,0,T))
shape(206,128,0,()=>c.ellipse(0,0,32,18,0,0,T))
shape(182,100,0,()=>c.arc(0,0,9,0,T))
shape(226,116,0,()=>c.arc(0,0,7,0,T))
})
c.fillStyle=c.strokeStyle='#fff';c.lineWidth=3
at(.25*a,()=>{
c.beginPath();c.moveTo(184,141);c.lineTo(230,141);c.stroke()
if(th>0)for(const x of[210,222])c.beginPath(),c.moveTo(x-3,141),c.lineTo(x+3,141),c.lineTo(x,141-11*th),c.closePath(),c.fill()
})
at(-a,()=>{
c.beginPath();c.moveTo(184,141);c.lineTo(230,140);c.stroke()
if(th>0)c.beginPath(),c.moveTo(214,140),c.lineTo(219,140),c.lineTo(216.5,140+7*th),c.closePath(),c.fill()
c.beginPath();c.ellipse(228,113,2.5,1.8,0,0,T);c.fill()
if(y>.35)c.beginPath(),c.arc(183,97,4,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(183,99,3.6,0,T),c.fill()
})
}
-18
View File
@@ -1,18 +0,0 @@
// hummingbird hovering: the wing flicks through four blur poses every frame, long beak, a gentle bob and tilt, a blink
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=70,rim=3
const W=[-.1,-.75,-1.4,-.75]
export default(c,t,i)=>{
const s=sin(T*t),bl=t>.7&&t<.78
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
c.translate(122,130+8*s);c.rotate(.06*cos(T*t));c.scale(1.25,1.25);c.translate(-128,-124)
shape(94,154,.15*sin(T*t*2),()=>{c.moveTo(4,-8);c.lineTo(-26,14);c.lineTo(-14,16);c.lineTo(-20,30);c.lineTo(8,8)})
shape(122,132,-.6,()=>c.ellipse(0,0,36,19,0,0,T))
shape(150,104,0,()=>c.arc(0,0,18,0,T))
c.lineWidth=4;c.beginPath();c.moveTo(164,101);c.lineTo(210,92);c.stroke()
c.lineWidth=6;shape(124,116,W[i%4],()=>c.ellipse(0,-32,10,32,0,0,T))
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=2.5,c.beginPath(),c.arc(155,99,4,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(155,101,4.5,0,T),c.fill()
}
-19
View File
@@ -1,19 +0,0 @@
// three-headed hydra: the heads bob out of step on long necks, each flicks its forked tongue in turn, the tail tip sways
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const ts=6*sin(T*t)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.beginPath();c.moveTo(48,222);c.bezierCurveTo(52,168,196,164,204,222);c.closePath();c.fill();c.stroke()
c.beginPath();c.moveTo(192,196);c.quadraticCurveTo(222,200,234,178+ts);c.quadraticCurveTo(240,220,196,218);c.closePath();c.fill();c.stroke()
for(const[i,[bx,by,X,Y,d]]of[[100,190,78,100,-1],[128,186,130,64,1],[156,190,180,100,1]].entries()){
const ph=i*2.1,hx=X+5*sin(T*t+ph),hy=Y+9*sin(T*t+ph),q=((t-i/3)%1+1)%1,s=q<.2?sin(PI*q/.2):0
c.lineWidth=20;c.beginPath();c.moveTo(bx,by);c.bezierCurveTo(bx+(hx-bx)*.1,by-60,hx-d*24,hy+40,hx-d*6,hy+4);c.stroke()
c.save();c.translate(hx,hy);c.scale(d,1);c.rotate(-.15+.1*sin(T*t+ph))
c.lineWidth=6;c.beginPath();c.moveTo(-16,-10);c.quadraticCurveTo(10,-20,30,-6);c.quadraticCurveTo(36,0,30,6);c.quadraticCurveTo(10,16,-16,10);c.closePath();c.fill();c.stroke()
c.beginPath();c.moveTo(-12,-10);c.lineTo(-26,-22);c.lineTo(-4,-14);c.closePath();c.fill();c.stroke()
if(s)c.lineWidth=3.5,c.beginPath(),c.moveTo(32,2),c.lineTo(32+12*s,2),c.lineTo(38+12*s,-2*s),c.moveTo(32+12*s,2),c.lineTo(38+12*s,6*s),c.stroke()
c.fillStyle='#fff';c.beginPath();c.arc(8,-6,3.8,0,T);c.fill();c.fillStyle='#111'
c.restore()
}
}
-19
View File
@@ -1,19 +0,0 @@
// inchworm inching along: the back end catches up into a tall loop, then the front stretches out flat again, ground dashes slide back
const{sin,cos,PI,sqrt,max,min}=Math,T=2*PI
export const frames=24,delay=80,rim=3
const L=170,G=100,Y=164
export default(c,t)=>{
const A=t<.5,u=A?t/.5:(t-.5)/.5,e=(1-cos(PI*u))/2,o=43-G*t
const tx=o+(A?G*e:G),hx=o+(A?L:L+G*e),ty=Y-(A?14*sin(PI*u):0),hy=Y-(A?0:16*sin(PI*u)),d=hx-tx
const H=1.35*sqrt(max(0,(L/2)**2-(d/2)**2)),k=(L-d)*.12
c.fillStyle=c.strokeStyle='#111';c.lineWidth=4
for(let n=0;n<4;n++){
const x=20+n*G-G*t+G*.5,l=8*min(1,max(0,(x-20)/24),max(0,(236-x)/24))
if(l>.5)c.beginPath(),c.moveTo(x-l,Y+30),c.lineTo(x+l,Y+30),c.stroke()
}
c.lineWidth=5
for(const[x,y]of[[tx-4,ty],[tx+6,ty],[hx-14,hy],[hx-4,hy]])c.beginPath(),c.moveTo(x,y),c.lineTo(x,y+15),c.stroke()
c.lineWidth=24;c.beginPath();c.moveTo(tx,ty);c.bezierCurveTo(tx-k,ty-H,hx+k,hy-H,hx,hy);c.stroke()
c.lineWidth=6;c.beginPath();c.arc(hx+6,hy-6,15,0,T);c.fill();c.stroke()
c.fillStyle='#fff';c.beginPath();c.arc(hx+11,hy-10,3.5,0,T);c.fill()
}
-28
View File
@@ -1,28 +0,0 @@
// kangaroo hopping in place: big hind feet push off, the tail swings up for balance, a joey peeks out of the pouch
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=75,rim=3
export default(c,t)=>{
const air=t<.6,p=t/.6,h=air?30*sin(PI*p):0,sq=air?0:sin(PI*(t-.6)/.4),jb=-4*sin(T*t),bl=t>.82&&t<.88,tw=t>.66&&t<.74?.3:0
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
const line=(w,x0,y0,x1,y1)=>{c.lineWidth=w;c.beginPath();c.moveTo(x0,y0);c.lineTo(x1,y1);c.stroke();c.lineWidth=6}
c.translate(128,214);c.scale(.92,.92);c.translate(-112,-214);c.translate(0,-h)
shape(96,206,air?.5*sin(PI*p):0,()=>c.ellipse(26,0,30,7,0,0,T))
line(16,110,186+8*sq,98,204)
c.translate(0,8*sq);c.translate(116,176);c.rotate(air?.12*sin(PI*p):-.05*sq);c.translate(-116,-176)
shape(102,184,air?.3*sin(PI*p):.08*sq,()=>{c.moveTo(4,-12);c.quadraticCurveTo(-40,0,-78,22);c.quadraticCurveTo(-40,12,4,12)})
shape(116,168,-.3,()=>c.ellipse(0,0,32,36,0,0,T))
shape(142,128,.4,()=>c.ellipse(0,0,32,48,0,0,T))
line(18,154,96,168,76)
shape(164,60,-.35,()=>c.ellipse(0,-10,6,15,0,0,T))
shape(173,58,.05+tw,()=>c.ellipse(0,-10,6,15,0,0,T))
shape(172,72,.15,()=>{c.ellipse(0,0,17,14,0,0,T);c.ellipse(16,6,13,8,.35,0,T)})
line(9,162,118,178,134)
c.strokeStyle='#fff';c.lineWidth=3;c.beginPath();c.moveTo(138,162);c.quadraticCurveTo(150,164,160,156);c.stroke();c.strokeStyle='#111';c.lineWidth=6
shape(160,136+jb,-.4,()=>c.ellipse(0,-6,4,9,0,0,T))
shape(166,147+jb,0,()=>{c.arc(0,0,10,0,T);c.ellipse(9,3,7,5,.3,0,T)})
c.fillStyle=c.strokeStyle='#fff'
c.beginPath();c.arc(169,144+jb,2.4,0,T);c.fill()
if(bl)c.lineWidth=3,c.beginPath(),c.arc(178,66,4,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(178,68,3.4,0,T),c.fill()
}
-36
View File
@@ -1,36 +0,0 @@
// fox spirit sitting side-on, three white-tipped tails fanned out behind it swaying one after another,
// a fox-fire flame flickering beside its nose, an ear twitches and it blinks
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3,invert=true
export default(c,t)=>{
const bl=t>.7&&t<.77,tw=t>.36&&t<.44?.3:0,hr=.04*sin(T*t),f=k=>3*sin(T*t*2+k)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6;c.translate(122,218);c.scale(.88,.88);c.translate(-138,-218)
const shape=(x,y,r,g)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();g();c.fill();c.stroke();c.restore()}
// tails: plump, curled tip, white tip cut out by clipping a circle to the tail's own outline
// tails: narrow at the root, bushy in the middle, pointed curling tip; the white tip is a circle clipped to the tail
for(const[i,a]of[-.05,.8,1.65].entries()){
const r=a+.1*sin(T*t-i*.9),L=[],R=[];let x=160,y=194
for(let j=0;j<=20;j++){const s=j/20,th=r+.5*s*s,w=2.5+15*sin(PI*s**1.4);L.push([x-cos(th)*w,y-sin(th)*w]);R.push([x+cos(th)*w,y+sin(th)*w]);x+=sin(th)*5;y-=cos(th)*5}
c.save();c.beginPath();for(const p of[...L,...R.reverse()])c.lineTo(...p);c.closePath();c.fill();c.stroke();c.clip()
c.fillStyle='#fff';c.beginPath();c.arc(x,y,24,0,T);c.fill();c.restore()
}
shape(0,0,0,()=>c.ellipse(136,186,36,32,0,0,T))
shape(0,0,0,()=>c.ellipse(136,218,20,6,0,0,T))
shape(0,0,0,()=>{c.moveTo(86,178);c.bezierCurveTo(70,160,68,132,80,112);c.lineTo(108,104);c.bezierCurveTo(116,130,140,148,158,180);c.lineTo(108,190);c.closePath()})
c.lineWidth=13;c.beginPath();c.moveTo(92,172);c.lineTo(90,213);c.stroke()
c.lineWidth=6;shape(0,0,0,()=>c.ellipse(85,217,11,5.5,0,0,T))
// fox-fire: round base with three flickering tongues
c.save();c.translate(38,64+6*sin(T*t));c.scale(1.15,1.15)
shape(0,0,.08*sin(T*t*2),()=>{c.moveTo(-11,6);c.arc(0,6,11,PI,0,true);c.quadraticCurveTo(14,0,16+f(1),-12);c.quadraticCurveTo(10,-7,7,-7)
c.quadraticCurveTo(10,-22,2+f(2),-38);c.quadraticCurveTo(-9,-22,-6,-9);c.quadraticCurveTo(-11,-9,-15+f(3),-16);c.quadraticCurveTo(-15,-2,-11,6)})
c.restore()
c.translate(96,108);c.rotate(hr);c.translate(-96,-108)
shape(0,0,0,()=>c.ellipse(94,92,20,18,0,0,T))
shape(0,0,0,()=>{c.moveTo(100,82);c.lineTo(56,99);c.quadraticCurveTo(48,103,56,107);c.lineTo(98,110)})
shape(0,0,0,()=>{c.moveTo(102,100);c.lineTo(116,116);c.lineTo(92,110)})
shape(0,0,0,()=>{c.moveTo(82,82);c.lineTo(86,44);c.lineTo(100,76)})
shape(106,80,tw,()=>{c.moveTo(-8,-2);c.lineTo(4,-36);c.lineTo(8,6)})
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=2.5,c.beginPath(),c.moveTo(77,90),c.lineTo(90,87),c.stroke()
else c.beginPath(),c.ellipse(84,89,6.5,3.2,-.3,0,T),c.fill()
}
-21
View File
@@ -1,21 +0,0 @@
// kiwi waddling in place: round body rocking side to side, a long curved beak, little legs stepping, a blink
const{sin,cos,PI,max,abs}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const s=sin(T*t),b=abs(s),bl=t>.4&&t<.47
c.fillStyle=c.strokeStyle='#111';c.lineWidth=7
const shape=f=>{c.beginPath();f();c.fill();c.stroke()}
for(const k of[0,1]){
const p=T*t+k*PI,hx=100+k*36,fx=hx+12*sin(p),fy=210-9*max(0,cos(p))
c.beginPath();c.moveTo(hx,162);c.lineTo(fx,fy);c.stroke()
c.lineWidth=5;c.beginPath();c.moveTo(fx-8,fy);c.lineTo(fx+12,fy);c.moveTo(fx,fy);c.lineTo(fx+10,fy-6);c.stroke();c.lineWidth=7
}
c.translate(122,206);c.rotate(.05*s);c.translate(-122,-206-4*b)
c.lineWidth=6
shape(()=>c.ellipse(112,124,66,50,-.08,0,T))
shape(()=>c.arc(172,110,24,0,T))
c.beginPath();c.moveTo(188,112);c.quadraticCurveTo(222,122,234,168);c.stroke()
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=2.5,c.beginPath(),c.arc(178,102,3.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(178,104,3.5,0,T),c.fill()
}
-23
View File
@@ -1,23 +0,0 @@
// kraken surfacing: four tentacles rise out of a rolling wave line and curl, one big eye peeks over the water and looks around
const{sin,cos,PI,max}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const W=174,wy=x=>W+4*sin(x/17-T*t),hy=W+3*sin(T*t),bl=t>.55&&t<.61
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.beginPath();c.ellipse(128,hy+8,48,68,0,PI,2*PI);c.closePath();c.fill();c.stroke()
for(const[i,[x,d,L,b0,b1]]of[[72,-1,72,2,.55],[104,-1,128,1.2,.6],[152,1,128,1.2,.6],[184,1,72,2,.55]].entries()){
const B=d*(b0+b1*sin(T*t+i*1.7)),N=26,P=[];let px=x,py=wy(x)+6
for(let j=0;j<=N;j++){const s=j/N,th=-PI/2+d*(L<99?.45:.08)+B*s*s;P.push([px,py,th,13*(1-s)+2.5]);px+=cos(th)*L/N;py+=sin(th)*L/N}
c.lineWidth=4;c.beginPath()
for(const[x,y,th,w]of P)c.lineTo(x-sin(th)*w,y+cos(th)*w)
for(const[x,y,th,w]of P.reverse())c.lineTo(x+sin(th)*w,y-cos(th)*w)
c.closePath();c.fill();c.stroke();P.reverse()
c.fillStyle='#fff'
for(const j of[6,11,16]){const[x,y,th,w]=P[j];c.beginPath();c.arc(x-d*sin(th)*w*.45,y+d*cos(th)*w*.45,max(1.6,w*.2),0,T);c.fill()}
c.fillStyle='#111'
}
c.lineWidth=7;c.beginPath();for(let x=56;x<=200;x+=4)c.lineTo(x,wy(x));c.stroke()
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3.5,c.beginPath(),c.moveTo(115,hy-26),c.quadraticCurveTo(128,hy-20,141,hy-26),c.stroke()
else{c.beginPath();c.ellipse(128,hy-28,16,10,0,0,T);c.fill();c.fillStyle='#111';c.beginPath();c.arc(128+7*sin(T*t),hy-28,5.5,0,T);c.fill()}
}
-18
View File
@@ -1,18 +0,0 @@
// manta ray seen from above: its wide wings ripple in a slow wave, the thin tail trails and sways, it rises and sinks gently
const{sin,cos,abs,PI}=Math,T=2*PI
export const frames=24,delay=85,rim=3
export default(c,t)=>{
const w=sin(T*t),w2=sin(T*t-1.1),tx=128+(100-6*abs(w)),ty=116+20*w
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(0,-6*sin(T*t+1.2))
c.lineWidth=4;c.beginPath();c.moveTo(128,170);c.quadraticCurveTo(128-10*sin(T*t-1),204,128+12*sin(T*t-2),232);c.stroke();c.lineWidth=6
c.beginPath();c.moveTo(128,94)
for(const d of[-1,1]){
const x=v=>128+d*(v-128)
if(d<0)c.lineTo(108,86),c.quadraticCurveTo(68,88+8*w,x(tx),ty),c.quadraticCurveTo(62,140+12*w2,102,162),c.quadraticCurveTo(116,176,128,178)
else c.quadraticCurveTo(140,176,154,162),c.quadraticCurveTo(194,140+12*w2,tx,ty),c.quadraticCurveTo(188,88+8*w,148,86),c.lineTo(128,94)
}
c.fill();c.stroke()
for(const d of[-1,1]){c.save();c.translate(128+d*16,82);c.rotate(d*(-.12+.08*sin(T*t*2)));c.beginPath();c.ellipse(0,-9,4.5,12,0,0,T);c.fill();c.stroke();c.restore()}
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*22,100,4.5,0,T),c.fill()
}
+1 -1
View File
@@ -1,6 +1,6 @@
// praying mantis: it sways, tilts its triangle head side to side, and gives its folded forearms a little pump // praying mantis: it sways, tilts its triangle head side to side, and gives its folded forearms a little pump
const{sin,cos,PI,max}=Math,T=2*PI const{sin,cos,PI,max}=Math,T=2*PI
export const frames=24,delay=85,rim=3 export const frames=24,delay=85,rim=3,invert=true
export default(c,t)=>{ export default(c,t)=>{
const s=sin(T*t),pm=t>.3&&t<.6?sin(PI*(t-.3)/.3):0,ht=.3*sin(T*t+1) const s=sin(T*t),pm=t>.3&&t<.6?sin(PI*(t-.3)/.3):0,ht=.3*sin(T*t+1)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=4 c.fillStyle=c.strokeStyle='#111';c.lineWidth=4
-25
View File
@@ -1,25 +0,0 @@
// mimic: a treasure chest that chomps twice, white teeth snapping, tongue lolling out the side, eyes on the lid
const{sin,max}=Math,T=2*Math.PI
export const frames=24,delay=70,rim=3
export default(c,t)=>{
const o=max(0,sin(T*t*2)),O=34*o,w=6*sin(T*t*2+1),bl=t>.86&&t<.92
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(0,4-4*o)
const tx=222+w*.4,ty=188+w
c.beginPath();c.moveTo(184,132-O*.5);c.bezierCurveTo(214,128-O*.5,236,150,tx+10,ty-6);c.arc(tx,ty-4,10,.2,Math.PI*.9)
c.bezierCurveTo(212,174,206,156,186,150-O*.3);c.closePath();c.fill();c.stroke()
c.beginPath();c.roundRect(52,138,152,76,8);c.fill();c.stroke()
c.fillRect(58,136-O,140,O+4)
c.save();c.translate(128,140-O);c.rotate(-.05*o);c.translate(-128,-140)
c.beginPath();c.moveTo(52,140);c.lineTo(52,108);c.quadraticCurveTo(128,72,204,108);c.lineTo(204,140);c.closePath();c.fill();c.stroke()
c.fillStyle=c.strokeStyle='#fff'
for(let x=64;x<192;x+=16)c.beginPath(),c.moveTo(x,140),c.lineTo(x+16,140),c.lineTo(x+8,152),c.fill()
c.lineWidth=3.5;for(const x of[82,174])c.beginPath(),c.moveTo(x,101),c.lineTo(x,124),c.stroke()
for(const d of[-1,1])if(bl)c.beginPath(),c.moveTo(128+d*14,114),c.lineTo(128+d*32,110),c.stroke()
else{c.beginPath();c.ellipse(128+d*23,112,10,7,d*.3,0,T);c.fill();c.fillStyle='#111';c.beginPath();c.arc(128+d*19,113,4,0,T);c.fill();c.fillStyle='#fff'}
c.restore();c.fillStyle=c.strokeStyle='#fff'
c.lineWidth=3;c.beginPath();c.moveTo(204,142-O*.4);c.quadraticCurveTo(222,154,tx-1,ty-10);c.stroke()
for(let x=72;x<184;x+=16)c.beginPath(),c.moveTo(x,140),c.lineTo(x+16,140),c.lineTo(x+8,128),c.fill()
c.lineWidth=3.5;for(const x of[82,174])c.beginPath(),c.moveTo(x,152),c.lineTo(x,206),c.stroke()
c.beginPath();c.arc(128,166,7,0,T);c.fill();c.beginPath();c.moveTo(123,168);c.lineTo(133,168);c.lineTo(128,186);c.fill()
}
-33
View File
@@ -1,33 +0,0 @@
// mole popping out of a dirt mound with a puff of dirt: it sniffs with its nose and whiskers, then ducks back down
const{sin,PI,max,min}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const up=x=>sin(x*PI*.6)/sin(PI*.6),u=t<.2?up(t/.2):t<.66?1:t<.8?1-sin(PI/2*(t-.66)/.14):0
const cy=240-90*u,sn=t>.24&&t<.62?sin(T*(t-.24)/.38):0,nx=1.5*sin(T*t*6)*(t>.24&&t<.62),tl=.07*sn,pw=min(1,max(0,(u-.5)/.5))
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
c.save();c.beginPath();c.rect(0,0,256,196);c.clip()
c.translate(128,196);c.rotate(tl);c.translate(-128,-196)
shape(128,cy,0,()=>c.ellipse(0,0,37,45,0,0,T))
if(cy<176){
c.lineWidth=2.5
for(const d of[-1,1])for(const e of[-5,6])c.beginPath(),c.moveTo(128+d*20,cy+6),c.lineTo(128+d*46,cy+6+e+2*sn*d),c.stroke()
c.lineWidth=6
}
c.restore()
if(pw>0)for(const d of[-1,1])shape(128+d*37,190-8*pw,d*.25,()=>c.ellipse(0,0,15,8,0,0,T))
shape(128,216,0,()=>{c.ellipse(0,0,92,30,0,PI,T);c.closePath()})
if(t>.02&&t<.27){
const p=(t-.02)/.25
for(const[d,s]of[[-1,1],[1,1],[-1,.6],[1,.6]])c.beginPath(),c.arc(128+d*(26+34*p*s),180-34*p*s+44*p*p,4.5*(1-.5*p),0,T),c.fill()
}
c.fillStyle=c.strokeStyle='#fff';c.lineWidth=3
c.beginPath();c.ellipse(128,190,30,7,0,.1*PI,.9*PI);c.stroke()
if(pw>0)for(const d of[-1,1])for(const k of[-1,0,1])c.beginPath(),c.moveTo(128+d*(41+k*5),186-8*pw),c.lineTo(128+d*(45+k*6),182-8*pw),c.stroke()
if(cy<176){
c.save();c.translate(128,196);c.rotate(tl);c.translate(-128,-196)
for(const d of[-1,1])c.beginPath(),c.arc(128+d*12,cy-12,2.8,0,T),c.fill()
c.beginPath();c.ellipse(128+nx,cy+3-Math.abs(nx),6.5,4.8,0,0,T);c.fill()
c.restore()
}
}
-38
View File
@@ -1,38 +0,0 @@
// owl nestled in a crescent moon: the moon's curve is its back and left wing, the lower tip is the perch it grips; big ringed eyes blink, the head tilts, a star twinkles
const{sin,cos,PI,atan2,sqrt,hypot}=Math,T=2*PI
export const frames=24,delay=85,rim=3,invert=true
// crescent edges are circles through tips B and A, bulging s px toward the lower left
const B=[84,60],A=[204,214],M=[(B[0]+A[0])/2,(B[1]+A[1])/2],L=hypot(A[0]-B[0],A[1]-B[1]),n=[(B[1]-A[1])/L,(A[0]-B[0])/L]
const circ=s=>{const r=(L*L/4+s*s)/(2*s);return[M[0]-(r-s)*n[0],M[1]-(r-s)*n[1],r]}
const[ox,oy,R]=circ(72),[ix,iy,r]=circ(34),an=(x,y,P)=>atan2(P[1]-y,P[0]-x),top=x=>iy+sqrt(r*r-(x-ix)**2)
export default(c,t)=>{
const bl=(t>.3&&t<.36)||(t>.44&&t<.5),k=.5+.5*sin(2*T*t)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(8,0)
const shape=g=>{c.beginPath();g();c.fill();c.stroke()}
c.save();c.translate(42,40);c.scale(.55+.45*k,.55+.45*k);c.beginPath()
for(let i=0;i<8;i++){const a=i*PI/4-PI/2,q=i%2?4:15;c.lineTo(q*cos(a),q*sin(a))}
c.closePath();c.fill();c.restore()
shape(()=>{c.arc(ox,oy,R,an(ox,oy,B),an(ox,oy,A),true);c.arc(ix,iy,r,an(ix,iy,A),an(ix,iy,B));c.closePath()})
for(const x of[143,163]){
const y=top(x);c.lineWidth=9;c.beginPath();c.moveTo(x,160);c.lineTo(x,y);c.stroke();c.lineWidth=6
for(const d of[-7,0,7])c.beginPath(),c.arc(x+d,y-1-(d?0:1),4.5,0,T),c.fill()
}
c.translate(0,-10)
shape(()=>c.ellipse(182,142,12,32,-.2,0,T))
shape(()=>c.ellipse(144,138,42,48,0,0,T))
c.strokeStyle='#fff';c.lineWidth=2.5
for(const[x,y]of[[134,140],[154,140],[144,156]])c.beginPath(),c.moveTo(x-5,y-3),c.lineTo(x,y+2),c.lineTo(x+5,y-3),c.stroke()
c.strokeStyle='#111';c.lineWidth=6
c.translate(144,112);c.rotate(.12*sin(T*t));c.translate(-144,-112)
shape(()=>{c.ellipse(144,82,42,36,0,0,T)})
for(const d of[-1,1])shape(()=>{c.moveTo(144+d*38,70);c.lineTo(144+d*44,38);c.lineTo(144+d*16,58);c.closePath()})
c.fillStyle=c.strokeStyle='#fff'
for(const d of[-1,1]){
const x=144+d*18,y=84
c.lineWidth=3;c.beginPath();c.arc(x,y,15,0,T);c.stroke()
if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(x,y-3,8,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(x,y,10,0,T),c.fill(),c.fillStyle='#111',c.beginPath(),c.arc(x,y,5,0,T),c.fill(),c.fillStyle='#fff'
}
c.beginPath();c.moveTo(139,98);c.lineTo(149,98);c.lineTo(144,110);c.closePath();c.fill()
}
-24
View File
@@ -1,24 +0,0 @@
// moray eel peeking out of a hole in a rock: sways, slowly opens and closes its mouth
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=85,rim=3
export default(c,t)=>{
const sw=8*sin(T*t),sw2=12*sin(T*t-.6),m=t>.2&&t<.7?.45*sin(PI*(t-.2)/.5):0,bl=t>.84&&t<.9
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.beginPath();c.moveTo(36,226);c.bezierCurveTo(28,192,56,160,98,158);c.bezierCurveTo(120,146,164,148,182,160)
c.bezierCurveTo(216,166,234,198,222,226);c.quadraticCurveTo(128,236,36,226);c.fill();c.stroke()
c.globalCompositeOperation='destination-out';c.beginPath();c.ellipse(114,186,32,15,0,0,T);c.fill();c.globalCompositeOperation='source-over'
const nx=132+sw2,ny=94
// body tapers from the hole up to the head
const B=[[114,194],[108,160],[118+sw,124],[nx,ny]],P=u=>[0,1].map(j=>(1-u)**3*B[0][j]+3*u*(1-u)**2*B[1][j]+3*u*u*(1-u)*B[2][j]+u**3*B[3][j])
for(let i=1;i<=24;i++)c.lineWidth=31-9*i/24,c.beginPath(),c.moveTo(...P((i-1)/24)),c.lineTo(...P(i/24)),c.stroke()
// front lip of the hole passing in front of the body
c.strokeStyle='#fff';c.lineWidth=3.5;c.beginPath();c.ellipse(114,186,32,15,0,.08*PI,.92*PI);c.stroke();c.strokeStyle='#111'
c.save();c.translate(nx,ny);c.rotate(-.15+.05*sin(T*t-1))
c.lineWidth=6;c.beginPath();c.ellipse(16,-8,32,13,0,0,T);c.fill();c.stroke()
c.save();c.translate(-6,2);c.rotate(m);c.beginPath();c.ellipse(24,5,26,7,0,0,T);c.fill();c.stroke();c.restore()
c.fillStyle=c.strokeStyle='#fff'
if(m<.1)c.lineWidth=3,c.beginPath(),c.moveTo(4,3),c.quadraticCurveTo(24,4,40,1),c.stroke()
if(bl)c.lineWidth=3,c.beginPath(),c.arc(24,-13,4.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(24,-12,4.5,0,T),c.fill()
c.restore()
}
-27
View File
@@ -1,27 +0,0 @@
// narwhal swimming along: bobs, flicks its tail, and the white spiral on its long tusk keeps twirling toward the tip
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3,invert=true
export default(c,t)=>{
const s=sin(T*t),k=sin(T*t-1.4),bl=t>.8&&t<.86
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(128,128+7*s);c.rotate(.04*cos(T*t));c.scale(.88,.88);c.translate(-134,-128)
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
shape(38,127,.3*k,()=>{
c.moveTo(6,-5);c.quadraticCurveTo(-8,-10,-22,-28);c.quadraticCurveTo(-16,-10,-12,0)
c.quadraticCurveTo(-16,10,-22,28);c.quadraticCurveTo(-8,10,6,5)})
shape(0,0,0,()=>{
c.moveTo(40,122);c.bezierCurveTo(64,116,84,96,124,96);c.bezierCurveTo(164,96,194,110,196,132)
c.bezierCurveTo(198,154,172,166,132,166);c.bezierCurveTo(92,166,66,142,40,132)})
shape(142,162,-.6-.35*sin(T*t-2),()=>c.ellipse(-18,0,20,8,0,0,T))
// tusk, with slanted white marks sliding from base to tip so the spiral looks like it turns
c.save();c.translate(190,116);c.rotate(-.3)
const tusk=()=>{c.beginPath();c.moveTo(0,-5);c.lineTo(70,-1.5);c.lineTo(70,1.5);c.lineTo(0,5);c.closePath()}
c.lineWidth=2;tusk();c.fill();c.stroke();c.clip()
c.strokeStyle='#fff';for(let i=-1;i<7;i++){const x=6+(i+t)*10,h=5-3.5*x/70;c.beginPath();c.moveTo(x-h*.8,-h);c.lineTo(x+h*.8,h);c.stroke()}
c.restore()
c.fillStyle=c.strokeStyle='#fff'
for(const[x,y,r]of[[86,112,2.2],[102,104,2.6],[120,101,2.2],[138,103,2.6],[110,114,2]])c.beginPath(),c.arc(x,y,r,0,T),c.fill()
if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(170,122,5.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(170,124,5.5,0,T),c.fill()
c.lineWidth=3;c.beginPath();c.moveTo(189,144);c.quadraticCurveTo(182,150,174,148);c.stroke()
}
-20
View File
@@ -1,20 +0,0 @@
// loch ness monster gliding through the water: head on a long neck and two humps bob above a wavy water line
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=85,rim=3
export default(c,t)=>{
const wy=x=>180+3.5*sin(x*.075+T*t),bl=t>.6&&t<.66,hb=4*sin(T*t-.5)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.save();c.beginPath();c.moveTo(0,0);c.lineTo(256,0);for(let x=256;x>=0;x-=4)c.lineTo(x,wy(x)+1);c.closePath();c.clip()
c.lineWidth=22;c.beginPath();c.moveTo(176,196);c.bezierCurveTo(168,140,184,104,198,88+hb);c.stroke()
c.lineWidth=6
c.save();c.translate(204,84+hb);c.rotate(.12+.05*sin(T*t-1.5));c.beginPath();c.ellipse(6,0,24,14,0,0,T);c.fill();c.stroke()
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3,c.beginPath(),c.arc(10,-5,4.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(10,-4,4.5,0,T),c.fill()
c.lineWidth=3;c.beginPath();c.moveTo(27,4);c.quadraticCurveTo(22,8,16,7);c.stroke()
c.restore()
for(const[x,rx,ry,p]of[[122,32,28,1],[68,24,20,2.2]])c.beginPath(),c.ellipse(x,184,rx,ry+4*sin(T*t-p),0,0,T),c.fill(),c.stroke()
c.beginPath();c.moveTo(42,186);c.quadraticCurveTo(28,176,22,158+3*sin(T*t-3));c.quadraticCurveTo(34,166,52,186);c.fill();c.stroke()
c.restore()
c.lineWidth=4;c.beginPath();for(let x=16;x<=240;x+=4)c.lineTo(x,wy(x));c.stroke()
}
-28
View File
@@ -1,28 +0,0 @@
// phoenix rising: big wingbeats lift it, the flame crest and tail feathers flicker
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=70,rim=3,invert=true
export default(c,t)=>{
const f=sin(T*t)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,g)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();g();c.fill();c.stroke();c.restore()}
c.translate(0,6*f)
// tail: three flame tongues, the side ones curling outward, all flickering
for(const[i,a]of[-.5,0,.5].entries()){
const L=[70,90,70][i]+6*sin(T*t*2+i*1.3),s=5*sin(T*t*2+i*2),o=[1,0,-1][i]*10
shape(128,132,a,()=>{c.moveTo(-12,0);c.bezierCurveTo(-24,L*.4,-6+o,L*.62,o+s,L);c.quadraticCurveTo(2+o/2,L*.78,4,L*.62)
c.quadraticCurveTo(10,L*.75,8+s/2,L*.86);c.bezierCurveTo(20,L*.6,16,L*.3,12,0)})
}
for(const d of[-1,1]){
c.save();c.translate(128+d*12,96);c.scale(d*.88,.88);c.rotate(-.55*f);c.beginPath()
c.moveTo(0,-10);c.quadraticCurveTo(46,-52,100,-46);c.lineTo(80,-26);c.lineTo(88,-12);c.lineTo(66,-8);c.lineTo(70,8)
c.lineTo(48,4);c.lineTo(48,18);c.lineTo(28,10);c.lineTo(4,14);c.closePath();c.fill();c.stroke();c.restore()
}
shape(0,0,0,()=>c.ellipse(128,104,22,36,0,0,T))
shape(0,0,0,()=>c.arc(128,62,17,0,T))
shape(0,0,0,()=>{c.moveTo(140,56);c.quadraticCurveTo(156,56,158,72);c.quadraticCurveTo(150,66,140,70)})
for(const[j,a]of[-.6,-.25,.1].entries()){
const L=[22,28,20][j]+3*sin(T*t*2+j*2)
shape(118+j*6,50,a+.08*sin(T*t*2+j),()=>{c.moveTo(-5,0);c.quadraticCurveTo(-6,-L*.55,0,-L);c.quadraticCurveTo(6,-L*.55,5,0)})
}
c.fillStyle='#fff';c.beginPath();c.arc(134,60,3.8,0,T);c.fill()
}
-29
View File
@@ -1,29 +0,0 @@
// pufferfish: rests, puffs up into a round spiky ball with a surprised look, wobbles, then lets the air out
const{sin,cos,PI,abs,hypot}=Math,T=2*PI
export const frames=24,delay=80,rim=3,invert=true
const sm=x=>x<0?0:x>1?1:x*x*(3-2*x)
export default(c,t)=>{
const g=sm((t-.1)/.25)-sm((t-.6)/.25),cx=134,cy=128+4*sin(T*t),rx=56+24*g+2*g*sin(T*t*4),ry=42+38*g,bl=t>.9&&t<.96
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
const at=a=>[cx+rx*cos(a),cy+ry*sin(a)]
shape(cx-rx+4,cy,.25*sin(T*t*3),()=>{
c.moveTo(4,-12);c.quadraticCurveTo(-14,-24,-26,-22);c.quadraticCurveTo(-20,0,-26,22);c.quadraticCurveTo(-14,24,4,12)})
for(const d of[-1,1])shape(...at(d*2.15),d*(-2.15+PI/2)+.3*sin(T*t*3+d),()=>{c.moveTo(-9,4);c.quadraticCurveTo(-6,-16,6,-18);c.quadraticCurveTo(10,-6,9,4)})
if(g>.04){
c.lineWidth=3
for(let i=0;i<18;i++){
const a=-PI+(i+.5)*T/18
if(abs(a)<.4||abs(a)>PI-.45||abs(abs(a)-2.15)<.2)continue
const[x,y]=at(a),nx=cos(a)/rx,ny=sin(a)/ry,n=hypot(nx,ny),ux=nx/n,uy=ny/n,l=3+13*g
c.beginPath();c.moveTo(x-uy*5-ux*3,y+ux*5-uy*3);c.lineTo(x+ux*l,y+uy*l);c.lineTo(x+uy*5-ux*3,y-ux*5-uy*3);c.fill();c.stroke()
}
c.lineWidth=6
}
shape(0,0,0,()=>c.ellipse(cx,cy,rx,ry,0,0,T))
const ex=cx+rx*.42,ey=cy-ry*.3
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(ex,ey-2,6,.15*PI,.85*PI),c.stroke()
else{c.beginPath();c.arc(ex,ey,6+3*g,0,T);c.fill();if(g>.3)c.fillStyle='#111',c.beginPath(),c.arc(ex+1,ey,3.5*g,0,T),c.fill()}
c.strokeStyle='#fff';c.lineWidth=3;c.beginPath();c.arc(cx+rx-10,cy+ry*.15,3.5+1.5*g,0,T);c.stroke()
}
-27
View File
@@ -1,27 +0,0 @@
// puffin with a fish in its beak: the head bobs, the fish dangles and flaps its tail, striped beak, white face mask and belly, a blink
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=85,rim=3
export default(c,t)=>{
const a=.07*sin(T*t*2),sw=.15*sin(T*t*2-1.2),fl=.4*sin(T*t*4),bl=t>.6&&t<.67
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=f=>{c.beginPath();f();c.fill();c.stroke()}
for(const d of[-1,1])shape(()=>{c.moveTo(104+d*16,200);c.lineTo(92+d*16,216);c.lineTo(120+d*16,216);c.closePath()})
shape(()=>c.ellipse(106,150,46,60,-.08,0,T))
c.save();c.translate(116,112);c.rotate(a);c.translate(-116,-112)
shape(()=>c.arc(120,84,32,0,T))
c.save();c.translate(184,100);c.rotate(-.2+sw)
shape(()=>c.ellipse(0,24,11,24,0,0,T))
c.translate(0,46);c.rotate(fl);shape(()=>{c.moveTo(0,-2);c.lineTo(-12,16);c.lineTo(0,10);c.lineTo(12,16);c.closePath()})
c.restore()
shape(()=>{c.moveTo(146,58);c.quadraticCurveTo(186,66,200,98);c.quadraticCurveTo(178,110,148,110);c.closePath()})
c.fillStyle=c.strokeStyle='#fff'
c.save();c.translate(184,100);c.rotate(-.2+sw);c.beginPath();c.arc(-3,16,3,0,T);c.fill();c.restore()
c.lineWidth=4;for(const[x,y0,y1]of[[162,66,106],[176,72,106]])c.beginPath(),c.moveTo(x,y0),c.quadraticCurveTo(x+6,88,x,y1),c.stroke()
c.beginPath();c.moveTo(144,70);c.quadraticCurveTo(146,96,130,100);c.quadraticCurveTo(108,100,96,90);c.quadraticCurveTo(116,70,144,70);c.fill()
c.fillStyle=c.strokeStyle='#111'
if(bl)c.lineWidth=2.5,c.beginPath(),c.arc(132,80,4.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(132,82,4.5,0,T),c.fill()
c.lineWidth=2.5;c.beginPath();c.moveTo(126,84);c.lineTo(112,88);c.stroke()
c.restore()
c.fillStyle='#fff';c.beginPath();c.ellipse(120,164,24,36,-.08,0,T);c.fill()
}
-39
View File
@@ -1,39 +0,0 @@
// raccoon sitting up washing its paws: the two paws circle and rub, a white bandit mask holds its eyes, the ringed tail sways
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const f=2*T*t,hb=1.5*sin(f),sw=.08*sin(T*t),tw=t>.4&&t<.48?.3:0,bl=t>.75&&t<.81
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,fn)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();fn();c.fill();c.stroke();c.restore()}
c.translate(-20,0)
c.save();c.translate(150,200);c.rotate(sw);c.translate(-150,-200)
const P=[];for(let i=0;i<=10;i++){const u=i/10;P.push([(1-u)**2*146+2*(1-u)*u*214+u*u*212,(1-u)**2*204+2*(1-u)*u*206+u*u*128,17-7*u])}
for(const[x,y,r]of P)c.beginPath(),c.arc(x,y,r,0,T),c.fill()
c.strokeStyle='#fff';c.lineWidth=5
for(const i of[4,6,8]){const[x,y,r]=P[i],[x2,y2]=P[i+1],dx=x2-x,dy=y2-y,l=Math.hypot(dx,dy),nx=-dy/l*r*.8,ny=dx/l*r*.8
c.beginPath();c.moveTo(x-nx,y-ny);c.lineTo(x+nx,y+ny);c.stroke()}
c.restore();c.strokeStyle='#111';c.lineWidth=6
for(const d of[-1,1])shape(128+d*22,212,0,()=>c.ellipse(0,0,15,7,0,0,T))
shape(128,184,0,()=>c.ellipse(0,0,50,30,0,0,T))
shape(128,160,0,()=>c.ellipse(0,0,42,40,0,0,T))
c.translate(0,hb)
for(const d of[-1,1])shape(128+d*30,66,d*(.25+tw*(d>0)),()=>{c.moveTo(-12,10);c.lineTo(0,-14);c.lineTo(12,10);c.closePath()})
shape(128,98,0,()=>{c.ellipse(0,0,44,32,0,0,T);c.moveTo(-36,4);c.lineTo(-52,18);c.lineTo(-28,24);c.moveTo(36,4);c.lineTo(52,18);c.lineTo(28,24)})
c.fillStyle=c.strokeStyle='#fff'
for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*24,69),c.lineTo(128+d*30,58),c.lineTo(128+d*36,69),c.closePath(),c.fill()
c.lineWidth=18;c.beginPath();c.moveTo(94,92);c.quadraticCurveTo(128,108,162,92);c.stroke()
c.lineWidth=3;c.beginPath();c.moveTo(120,116);c.quadraticCurveTo(124,121,128,116);c.quadraticCurveTo(132,121,136,116);c.stroke()
c.fillStyle=c.strokeStyle='#111'
for(const d of[-1,1])if(bl)c.lineWidth=3,c.beginPath(),c.arc(128+d*17,95,5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(128+d*17,97,5.5,0,T),c.fill()
c.beginPath();c.ellipse(128,108,6,4,0,0,T);c.fill()
c.translate(0,-hb)
// arms reach in from the shoulders, a thin white gap keeps them readable against the body
const pw=[-1,1].map(d=>[128+d*(10-6*cos(f)),146+d*5*sin(f)+hb])
for(const[w,col]of[[16,'#fff'],[9,'#111']])for(const[d,[x,y]]of[[-1,pw[0]],[1,pw[1]]])
c.strokeStyle=col,c.lineWidth=w,c.beginPath(),c.moveTo(128+d*34,138),c.quadraticCurveTo(128+d*30,154,x,y),c.stroke()
for(const[x,y]of pw){
c.strokeStyle='#fff';c.lineWidth=11;c.beginPath();c.ellipse(x,y,8,7,0,0,T);c.stroke()
c.strokeStyle='#111';c.lineWidth=6;c.beginPath();c.ellipse(x,y,8,7,0,0,T);c.fill();c.stroke()
}
}
-25
View File
@@ -1,25 +0,0 @@
// seahorse standing upright in the current: sways side to side, its dorsal fin flutters, tail curled under, blinks
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=85,rim=3,invert=true
export default(c,t)=>{
const s=sin(T*t),bl=t>.78&&t<.84,f=1+.18*sin(T*t*4)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(140,220);c.rotate(.07*s);c.translate(-140,-220+3*sin(T*t*2))
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
shape(104,128,0,()=>c.ellipse(0,0,15*f,18,0,PI/2,3*PI/2))
shape(0,0,0,()=>{
c.moveTo(118,52);c.bezierCurveTo(104,74,98,96,104,122);c.bezierCurveTo(110,150,118,166,128,182);c.lineTo(146,180)
c.bezierCurveTo(168,160,172,128,160,106);c.bezierCurveTo(152,92,150,80,152,70)})
shape(136,58,0,()=>c.arc(0,0,20,0,T))
shape(136,40,0,()=>{c.moveTo(-8,4);c.lineTo(-2,-10);c.lineTo(8,2)})
c.lineWidth=11;c.beginPath();c.moveTo(150,62);c.lineTo(176,70);c.stroke()
c.beginPath();c.arc(178,70,6.5,0,T);c.fill()
// tail: a tapering stroke going down and curling forward
const pts=[]
for(let i=0;i<=8;i++){const u=i/8;pts.push([137-3*u,178+26*u,17-4*u])}
for(let i=1;i<=32;i++){const u=i/32,a=PI-1.55*PI*u,r=16-11*u;pts.push([150+r*cos(a),206+r*sin(a),13-8*u])}
for(let i=1;i<pts.length;i++){c.lineWidth=pts[i][2];c.beginPath();c.moveTo(pts[i-1][0],pts[i-1][1]);c.lineTo(pts[i][0],pts[i][1]);c.stroke()}
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3,c.beginPath(),c.arc(138,55,5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(138,56,5,0,T),c.fill()
}
-29
View File
@@ -1,29 +0,0 @@
// frog wearing a mushroom cap with white spots: crouches, hops, lands with a squash; the cap gets pushed down on the way up
const{sin,cos,PI,max,min}=Math,T=2*PI
export const frames=24,delay=70,rim=3
export default(c,t)=>{
const air=t>.15&&t<.6,u=(t-.15)/.45,h=air?44*sin(PI*u):0,v=air?cos(PI*u):0,e=air?min(1,1.6*sin(PI*u)):0
const sq=t<.15?.12*sin(PI*t/.15):t>.6&&t<.78?.14*sin(PI*(t-.6)/.18):0,bl=t>.86&&t<.92
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(128,218);c.scale(1.18,1.18);c.translate(-128,-218-h)
const cx=128,by=218,X=x=>cx+(x-cx)*(1+sq),Y=y=>by-(by-y)*(1-sq),shape=g=>{c.beginPath();g();c.fill();c.stroke()}
for(const d of[-1,1]){
const lx=X(cx+d*(46-8*e)),ly=Y(by-12)+20*e,ry=12+16*e,a=-d*.5*e
shape(()=>c.ellipse(lx,ly,20-11*e,ry,a,0,T))
if(e>.05)shape(()=>c.ellipse(lx+ry*d*sin(.5*e),ly+ry*cos(.5*e),12*e,6*e,0,0,T))
shape(()=>c.ellipse(X(cx+d*22),by-4+8*e,12,6,0,0,T))
}
shape(()=>c.ellipse(cx,Y(by-34),54*(1+sq),34*(1-sq),0,0,T))
for(const d of[-1,1])shape(()=>c.arc(X(cx+d*30),Y(by-58),14,0,T))
c.save();c.translate(cx,Y(by-70)+5*max(0,v));c.rotate(.06*v)
shape(()=>{c.moveTo(-62,4);c.bezierCurveTo(-60,-52,60,-52,62,4);c.quadraticCurveTo(0,-8,-62,4)})
c.fillStyle='#fff';for(const[x,y,r]of[[-30,-20,8],[8,-28,6],[34,-14,7],[-6,-10,4]])c.beginPath(),c.arc(x,y,r,0,T),c.fill()
c.restore()
c.fillStyle=c.strokeStyle='#fff'
for(const d of[-1,1]){
const x=X(cx+d*30),y=Y(by-56)
if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(x,y-3,7,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(x,y,8.5,0,T),c.fill(),c.fillStyle='#111',c.beginPath(),c.arc(x+d*1.5,y+1,4.5,0,T),c.fill(),c.fillStyle='#fff'
}
c.lineWidth=3.5;c.beginPath();c.moveTo(X(cx-26),Y(by-36));c.quadraticCurveTo(cx,Y(by-24),X(cx+26),Y(by-36));c.stroke()
}
-28
View File
@@ -1,28 +0,0 @@
// skunk standing with its big fluffy tail up: the tail swishes slowly, a white stripe runs from its nose to the tail tip
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=85,rim=3
export default(c,t)=>{
const sw=.12*sin(T*t),tip=.1*sin(T*t-1.2),br=sin(T*t),bl=t>.7&&t<.76
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
c.translate(8,0);c.lineWidth=12
for(const[x0,x1]of[[106,104],[120,122],[158,156],[172,174]])c.beginPath(),c.moveTo(x0,180),c.lineTo(x1,206),c.stroke()
c.lineWidth=6
c.save();c.translate(100,154);c.rotate(sw);c.translate(-100,-154)
// fluffy plume: a chain of overlapping circles along a curve, fat in the middle, scalloped edges for free
const B=(u,a,b,d,e)=>(1-u)**3*a+3*(1-u)**2*u*b+3*(1-u)*u*u*d+u**3*e,P=[]
for(let i=0;i<=12;i++){const u=i/12,cu=tip*u*u;P.push([B(u,102,50,52,120)+cu*40,B(u,152,140,40,52)+cu*20,10+20*sin(PI*Math.min(1,u*1.15))+4])}
for(const[x,y,r]of P)c.beginPath(),c.arc(x,y,r,0,T),c.fill()
c.strokeStyle='#fff';c.lineWidth=6;c.beginPath();c.moveTo(100,150)
for(const[x,y]of P.slice(1,11))c.lineTo(x,y)
c.stroke()
c.restore();c.strokeStyle='#111'
shape(138,166,0,()=>c.ellipse(0,br*.5,44,28+br*.5,0,0,T))
shape(172,142,0,()=>c.arc(0,0,7,0,T))
shape(182,160,0,()=>c.ellipse(0,0,22,19,0,0,T))
shape(200,168,.3,()=>c.ellipse(0,0,12,9,0,0,T))
c.fillStyle=c.strokeStyle='#fff'
c.lineWidth=6;c.beginPath();c.moveTo(196,154);c.quadraticCurveTo(170,148,150,152);c.quadraticCurveTo(122,152,100,150);c.stroke()
if(bl)c.lineWidth=3,c.beginPath(),c.arc(188,158,3.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(188,160,3.2,0,T),c.fill()
}
-28
View File
@@ -1,28 +0,0 @@
// deer whose antlers are bare branches: leaves sprout at the tips, then wither and drop off; it flicks an ear and its tail and blinks
const{sin,PI,max,min,atan2,cos}=Math,T=2*PI
export const frames=24,delay=90,rim=3
const br=[[[182,70],[180,48],[174,30],[170,14]],[[180,48],[198,38]],[[174,30],[190,20]],[[172,72],[156,58],[136,52]],[[156,58],[146,38]]]
const pulse=(t,a,b)=>t>a&&t<b?sin(PI*(t-a)/(b-a)):0
export default(c,t)=>{
const bl=t>.86&&t<.92
c.fillStyle=c.strokeStyle='#111'
c.translate(-6,4)
const shape=g=>{c.beginPath();g();c.fill();c.stroke()}
c.lineWidth=9;for(const x of[70,86,146,160])c.beginPath(),c.moveTo(x,160),c.lineTo(x+(x<100?-3:3),222),c.stroke()
c.lineWidth=6
shape(()=>c.ellipse(112,148,56,26+sin(T*t),0,0,T))
c.save();c.translate(62,134);c.rotate(-.5-.6*pulse(t,.74,.84));shape(()=>c.ellipse(-8,0,11,6,0,0,T));c.restore()
shape(()=>{c.moveTo(144,132);c.lineTo(164,84);c.lineTo(186,90);c.lineTo(168,150);c.closePath()})
shape(()=>c.ellipse(180,82,20,14,.35,0,T))
shape(()=>c.ellipse(198,94,11,8,.35,0,T))
c.save();c.translate(170,76);c.rotate(.35-.5*pulse(t,.6,.68));shape(()=>c.ellipse(-12,0,13,6,0,0,T));c.restore()
c.lineWidth=5;for(const s of br){c.beginPath();c.moveTo(...s[0]);for(const p of s.slice(1))c.lineTo(...p);c.stroke()}
br.forEach((s,i)=>{
const[x,y]=s.at(-1),[px,py]=s.at(-2),a=atan2(y-py,x-px)
const g=min(1,max(0,(t-i*.04)/.2)),q=min(1,max(0,(t-.5-i*.04)/.26)),z=g*(1-q)
if(z>.02){c.save();c.translate(x+cos(a)*4-10*q,y+sin(a)*4+36*q*q);c.rotate(a+q*2.5);c.scale(z,z);c.beginPath();c.ellipse(7,0,10,5.5,0,0,T);c.fill();c.restore()}
})
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3,c.beginPath(),c.arc(187,78,4,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(187,80,3.5,0,T),c.fill()
}
-28
View File
@@ -1,28 +0,0 @@
// squid: squeezes its mantle, shoots upward with arms trailing, then drifts back down with arms fanning open
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3
const sm=x=>x<0?0:x>1?1:x*x*(3-2*x)
export default(c,t)=>{
const sq=t<.15?sm(t/.15):t<.3?1-sm((t-.15)/.15):0
const Y=t<.15?4*sm(t/.15):t<.35?4-30*(1-(1-(t-.15)/.2)**2):-26+26*sm((t-.35)/.65)
const s=t<.15?1-sm(t/.15):t<.4?0:sm((t-.4)/.4),cy=146+Y,w=44*(1-.2*sq)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const limb=(bx,a,L,w0,w1,bend,ph)=>{
let x=bx,y=cy+12,px,py
for(let i=1;i<=14;i++){const u=i/14,an=a+bend*sin(T*t*2+ph+u*3)*u;px=x;py=y;x+=sin(an)*L/14;y+=cos(an)*L/14
c.lineWidth=w0+(w1-w0)*u;c.beginPath();c.moveTo(px,py);c.lineTo(x,y);c.stroke()}
return[x,y]
}
for(const d of[-1,1]){
const[x,y]=limb(128+d*11,d*(.1+.25*s),60,7,3,.25*s,d)
c.beginPath();c.ellipse(x,y,6,8,-d*(.08+.25*s),0,T);c.fill()
}
for(let i=0;i<5;i++)limb(128+(i-2)*9,(i-2)*.2*s,40,12,3,.35*s,i*1.3)
c.lineWidth=6
c.beginPath();c.ellipse(128,cy+4,32*(1-.1*sq),18,0,0,T);c.fill();c.stroke()
const tip=cy-90-6*sq,fl=4*sin(T*t*3)
for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*4,tip+6),c.lineTo(128+d*(48+fl),cy-60),c.lineTo(128+d*w*.8,cy-46),c.fill(),c.stroke()
c.beginPath();c.moveTo(128,tip);c.bezierCurveTo(128+w*.8,tip+16,128+w,cy-40,128+w*.85,cy-6);c.quadraticCurveTo(128,cy+2,128-w*.85,cy-6)
c.bezierCurveTo(128-w,cy-40,128-w*.8,tip+16,128,tip);c.fill();c.stroke()
c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*16,cy+3,6.5,0,T),c.fill()
}
-18
View File
@@ -1,18 +0,0 @@
// starfish sitting on its two bottom arms, waving hello with its upper right arm, smiling and blinking
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3,invert=true
export default(c,t)=>{
const cx=128,cy=134+2*sin(T*t*2),bl=t>.7&&t<.76,wv=.5+.5*sin(T*t*2)
c.fillStyle='#111'
const arm=(a,bend)=>{
let x=cx,y=cy
for(let i=0;i<=40;i++){const u=i/40;x+=cos(a+bend*u)*78/40;y+=sin(a+bend*u)*78/40;c.beginPath();c.arc(x,y,21-11*u,0,T);c.fill()}
}
arm(-PI/2,.06*sin(T*t));arm(-PI*.9,.08*sin(T*t+1));arm(PI*.7,.04*sin(T*t+2));arm(PI*.3,-.04*sin(T*t+2))
arm(-.31-.32*wv,-.55*sin(T*t*2-.9))
c.beginPath();c.arc(cx,cy,34,0,T);c.fill()
c.fillStyle=c.strokeStyle='#fff';c.lineWidth=3;c.lineCap='round'
for(const d of[-1,1])if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(cx+d*13,cy-9,5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(cx+d*13,cy-7,5,0,T),c.fill()
c.lineWidth=3;c.beginPath();c.arc(cx,cy+3,9,.2*PI,.8*PI);c.stroke()
}
-22
View File
@@ -1,22 +0,0 @@
// swan gliding on still water: the neck sways and the head dips, ripples slide back under it, a blink
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=90,rim=3,invert=true
export default(c,t)=>{
const s=sin(T*t),hx=172+5*s,hy=70+4*cos(T*t),bl=t>.55&&t<.62
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=f=>{c.beginPath();f();c.fill();c.stroke()}
c.translate(128,128);c.scale(1.1,1.1);c.translate(-128,-128)
shape(()=>{c.moveTo(42,116+2*s);c.quadraticCurveTo(62,142,94,140);c.bezierCurveTo(108,110,158,106,178,132)
c.bezierCurveTo(204,140,202,180,170,180);c.lineTo(80,180);c.bezierCurveTo(56,180,42,158,42,116+2*s)})
c.lineWidth=18;c.beginPath();c.moveTo(180,152);c.bezierCurveTo(206,126,hx-12,104,hx,hy+8);c.stroke()
c.lineWidth=6;shape(()=>c.arc(hx+4,hy,13,0,T))
shape(()=>{c.moveTo(hx+12,hy-6);c.lineTo(hx+34,hy+8);c.lineTo(hx+12,hy+8);c.closePath()})
c.lineWidth=4;c.beginPath();c.moveTo(26,180);c.lineTo(230,180);c.stroke()
for(let k=0;k<3;k++){
const f=(t+k/3)%1,x=176-150*f,y=194+10*(k%2),l=22*sin(PI*f)
if(l>1)c.beginPath(),c.moveTo(x-l,y),c.lineTo(x+l,y),c.stroke()
}
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=2.5,c.beginPath(),c.arc(hx+7,hy-4,3.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(hx+7,hy-3,3.5,0,T),c.fill()
}
-30
View File
@@ -1,30 +0,0 @@
// teapot dragon: the spout is its neck and head, the handle is its arrow-tipped tail; steam puffs from its snout and the lid rattles up
const{sin,PI,min}=Math,T=2*PI
export const frames=24,delay=85,rim=3,invert=true
export default(c,t)=>{
const lh=t>.4&&t<.6?sin(PI*(t-.4)/.2):0,bl=t>.82&&t<.88
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=g=>{c.beginPath();g();c.fill();c.stroke()}
for(let i=0;i<2;i++){
const u=(t+i/2)%1,r=(3+9*u)*min(1,(1-u)*4)
if(r>.5)c.beginPath(),c.arc(226-14*u+4*sin(T*u),84-58*u,r,0,T),c.fill()
}
c.translate(126,200);c.rotate(.03*sin(T*t));c.translate(-126,-200)
for(const x of[92,150])shape(()=>c.ellipse(x,194,14,8,0,0,T))
c.lineWidth=14;c.beginPath();c.moveTo(74,172);c.bezierCurveTo(26,180,20,118,64,112);c.stroke();c.lineWidth=6
shape(()=>{c.moveTo(56,118);c.lineTo(76,96);c.lineTo(80,122);c.closePath()})
shape(()=>{c.moveTo(166,178);c.bezierCurveTo(198,170,210,140,204,104);c.lineTo(188,100);c.bezierCurveTo(188,122,182,132,170,132);c.closePath()})
shape(()=>c.ellipse(120,148,60,44,0,0,T))
c.save();c.translate(200,94);c.rotate(-.15+.05*sin(2*T*t))
shape(()=>{c.moveTo(-4,-10);c.lineTo(-18,-30);c.lineTo(6,-12);c.closePath()})
shape(()=>c.ellipse(4,0,18,13,0,0,T));shape(()=>c.ellipse(22,4,12,9,0,0,T))
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3,c.beginPath(),c.arc(6,-4,4.5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(6,-3,4,0,T),c.fill()
c.beginPath();c.arc(28,0,2,0,T);c.fill();c.restore()
c.save();c.translate(120,106-12*lh);c.rotate(.18*lh)
shape(()=>{c.ellipse(0,0,30,14,0,PI,0);c.closePath()});shape(()=>c.arc(0,-16,7,0,T));c.restore()
c.strokeStyle='#fff';c.lineWidth=3.5;c.beginPath()
for(let x=72;x<=168;x+=4)c.lineTo(x,146+4*sin((x-72)/8))
c.stroke()
}
-29
View File
@@ -1,29 +0,0 @@
// turtle that carries a little cottage as its shell: it plods in place, the chimney puffs smoke, window and door cut out in white
const{sin,PI,max,min}=Math,T=2*PI
export const frames=24,delay=90,rim=3,invert=true
export default(c,t)=>{
const b=1.5*sin(2*T*t),bl=t>.8&&t<.86
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
c.translate(126,136);c.scale(1.1,1.1);c.translate(-128,-136)
const shape=g=>{c.beginPath();g();c.fill();c.stroke()}
for(const[x,p]of[[84,0],[100,PI],[140,PI],[156,0]]){const s=sin(T*t+p);shape(()=>c.roundRect(x-8+5*s,170+b,16,26-6*max(0,s)-b,7))}
c.translate(0,b)
for(let i=0;i<2;i++){
const u=(t+i/2)%1,r=(4+10*u)*min(1,(1-u)*5)
if(r>.5)c.beginPath(),c.arc(152+16*u+3*sin(T*u),68-50*u,r,0,T),c.fill()
}
shape(()=>{c.moveTo(62,168);c.lineTo(44,176);c.lineTo(64,178)})
c.lineWidth=18;c.beginPath();c.moveTo(166,168);c.quadraticCurveTo(184,166,192,152);c.stroke();c.lineWidth=6
c.save();c.translate(196,148);c.rotate(.08*sin(2*T*t));shape(()=>c.ellipse(8,-2,19,14,-.15,0,T))
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=3,c.beginPath(),c.arc(14,-7,4,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(14,-6,3.5,0,T),c.fill()
c.restore()
shape(()=>c.ellipse(120,174,64,12,0,0,T))
shape(()=>c.rect(74,114,92,56))
shape(()=>{c.moveTo(62,118);c.lineTo(120,72);c.lineTo(178,118);c.closePath()})
shape(()=>c.rect(144,74,14,26))
c.fillStyle='#fff'
for(const[x,y]of[[86,126],[99,126],[86,138],[99,138]])c.fillRect(x,y,10,9)
c.beginPath();c.moveTo(130,164);c.lineTo(130,146);c.arc(140,146,10,PI,0);c.lineTo(150,164);c.fill()
}
-30
View File
@@ -1,30 +0,0 @@
// woodpecker on a trunk: four quick pecks with wood chips flying off, then it leans back, looks around and blinks
const{sin,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3
export default(c,t)=>{
const a=t<.5?-.13*sin(PI*8*t)**2:.04*sin(PI*(t-.5)/.5),bl=t>.76&&t<.84
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const shape=f=>{c.beginPath();f();c.fill();c.stroke()}
c.translate(38,0)
shape(()=>c.roundRect(40,16,40,224,20))
c.lineWidth=7;c.beginPath();c.moveTo(44,72);c.lineTo(22,54);c.stroke()
c.lineWidth=6;shape(()=>{c.moveTo(22,54);c.quadraticCurveTo(10,30,22,18);c.quadraticCurveTo(34,40,22,54)})
for(let k=0;k<4;k++)for(const j of[0,1]){
const q=(t-(k+.5)/8)/.2
if(q>0&&q<1){
const x=84+(12+14*j)*q,y=84-(130-30*j)*q+70*q*q,r=6*(1-.6*q)
c.save();c.translate(x,y);c.rotate(6*q+j);c.fillRect(-r,-r*.6,2*r,1.2*r);c.restore()
}
}
c.save();c.translate(86,206);c.rotate(a);c.translate(-86,-206)
shape(()=>{c.moveTo(88,188);c.lineTo(102,196);c.lineTo(84,234);c.closePath()})
c.save();c.translate(106,146);c.rotate(.3);shape(()=>c.ellipse(0,0,26,54,0,0,T));c.restore()
shape(()=>c.arc(132,84,20,0,T))
shape(()=>{c.moveTo(134,64);c.lineTo(160,70);c.lineTo(148,88);c.closePath()})
shape(()=>{c.moveTo(114,77);c.lineTo(114,91);c.lineTo(96,85);c.closePath()})
c.fillStyle=c.strokeStyle='#fff'
if(bl)c.lineWidth=2.5,c.beginPath(),c.arc(134,79,4,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(134,81,4.5,0,T),c.fill()
for(const[x,y]of[[120,130],[124,148],[120,166]])c.beginPath(),c.arc(x,y,3.5,0,T),c.fill()
c.restore()
}
-18
View File
@@ -1,18 +0,0 @@
// yeti waving hello: shaggy spiky fur all round, one arm waving, a big open smile and a blink
const{sin,cos,PI}=Math,T=2*PI
export const frames=24,delay=80,rim=3,invert=true
export default(c,t)=>{
const bl=t>.6&&t<.66,br=sin(T*t),a=-2.65+.28*sin(T*t*2)
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
const fur=(x,y,r,oy,rx,ry,n,sp)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath()
for(let k=0;k<2*n;k++){const b=k*PI/n,q=k%2?1+sp:1;c.lineTo(rx*q*cos(b),oy+ry*q*sin(b))}
c.closePath();c.fill();c.stroke();c.restore()}
for(const x of[104,152])fur(x,206,0,0,20,15,8,.18)
fur(74,122,.35,36,16,40,10,.14)
fur(172,118,a,30,15,30,10,.14);fur(172,118,a,60,16,16,8,.2)
fur(128,136,0,0,62,74+1.5*br,24,.09)
c.fillStyle=c.strokeStyle='#fff'
for(const d of[-1,1])if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(128+d*20,102,6,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(128+d*20,104,6.5,0,T),c.fill()
c.beginPath();c.ellipse(128,124,17,12,0,0,PI);c.closePath();c.fill()
}
+2 -2
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>vibegif</title> <title>vibegif</title>
<link rel="icon" type="image/webp" href="/favicon.webp"> <link rel="icon" type="image/webp" href="/favicon.webp">
<meta name="description" content="public domain gallery of 1000 gifs and animated webp"> <meta name="description" content="public domain gallery of <!--count--> gifs and animated webp">
<script>try{localStorage.bg&&document.documentElement.classList.add("dark")}catch{}</script> <script>try{localStorage.bg&&document.documentElement.classList.add("dark")}catch{}</script>
<style> <style>
:root{--bg:#fff;--fg:#000;--mute:#888} :root{--bg:#fff;--fg:#000;--mute:#888}
@@ -32,7 +32,7 @@ hr{grid-column:1/-1;border:0;border-top:3px dashed var(--mute);margin:24px 0}
<body> <body>
<a id="gh" href="https://github.com/direct-img/vibegif.direct-img.link" aria-label="source on GitHub"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg></a> <a id="gh" href="https://github.com/direct-img/vibegif.direct-img.link" aria-label="source on GitHub"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg></a>
<button id="bg" aria-label="black background" aria-pressed="false"></button> <button id="bg" aria-label="black background" aria-pressed="false"></button>
<h1>public domain gallery of 1000 gifs and animated webp</h1> <h1>public domain gallery of <!--count--> gifs and animated webp</h1>
<p>feel free to hot link them</p> <p>feel free to hot link them</p>
<iframe src="https://github.com/sponsors/multipleof4/button" title="Sponsor multipleof4" height="32" width="114"></iframe> <iframe src="https://github.com/sponsors/multipleof4/button" title="Sponsor multipleof4" height="32" width="114"></iframe>
<main> <main>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Some files were not shown because too many files have changed in this diff Show More