Add colored hamster/run, ladybug/crawl, panda/munch, pizza/stretch, burger/stack, donut/spin, taco/wiggle, watermelon/chomp, avocado/split, boba/sip

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

gen/color/avocado/split.js

@@ -0,0 +1,25 @@
+// avocado halves rocking apart and back together while the pit hops out of its half and lands again
+const{sin,cos,PI,max}=Math,T=2*PI
+export const frames=20,delay=70
+const SK='#2f9e44',FL='#c0eb75',IN='#e9fac8',PIT='#a9744f',BL='#ffa8a8'
+const half=(c,x,a)=>{
+  c.save();c.translate(x,140);c.rotate(a)
+  const shape=(s)=>{c.beginPath();c.moveTo(0,-86*s);c.bezierCurveTo(30*s,-86*s,34*s,-34*s,46*s,0);c.bezierCurveTo(62*s,40*s,48*s,84*s,0,84*s);c.bezierCurveTo(-48*s,84*s,-62*s,40*s,-46*s,0);c.bezierCurveTo(-34*s,-34*s,-30*s,-86*s,0,-86*s);c.closePath()}
+  shape(1);c.fillStyle=SK;c.fill();c.stroke()
+  shape(.84);c.fillStyle=FL;c.fill();c.lineWidth=4;c.stroke()
+  c.fillStyle=IN;c.beginPath();c.ellipse(0,20,30,32,0,0,T);c.fill();c.lineWidth=7;c.restore()
+}
+export default(c,t)=>{
+  const o=(1-cos(t*T))/2,hop=max(0,sin(2*T*t)),py=-38*hop
+  half(c,72-14*o,-.12-.1*o)
+  c.save();c.translate(72-14*o,140);c.rotate(-.12-.1*o);c.fillStyle='#d8f5a2';c.beginPath();c.arc(0,22,24,0,T);c.fill();c.lineWidth=5;c.stroke();c.restore()
+  half(c,184+14*o,.12+.1*o)
+  c.save();c.translate(184+14*o,140);c.rotate(.12+.1*o)
+  const sq=hop<.1?.9:1
+  c.translate(0,22+py);c.scale(2-sq,sq)
+  c.fillStyle=PIT;c.beginPath();c.arc(0,0,26,0,T);c.fill();c.stroke()
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(d*9,-3,4,0,T),c.fill()
+  c.lineWidth=4;c.beginPath();c.arc(0,4,6,.15*PI,.85*PI);c.stroke()
+  c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(d*16,6,5,3,0,0,T),c.fill()
+  c.restore()
+}

gen/color/boba/sip.js

@@ -0,0 +1,25 @@
+// bubble tea cup with tapioca pearls riding up the straw and jiggling at the bottom
+const{sin,cos,PI,hypot}=Math,T=2*PI
+export const frames=20,delay=70
+const TEA='#ffd8a8',PE='#5c3d2e',ST='#f783ac',LID='#e7f5ff',BL='#ffa8a8'
+const S0=[146,196],S1=[172,22]
+export default(c,t)=>{
+  for(const[w,s]of[[30,'#111'],[20,ST]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(...S0),c.lineTo(...S1),c.stroke()
+  c.strokeStyle='#111';c.lineWidth=7
+  for(let k=0;k<4;k++){const p=(t+k/4)%1,x=S0[0]+(S1[0]-S0[0])*p,y=S0[1]+(S1[1]-S0[1])*p;if(y<70){c.fillStyle=PE;c.beginPath();c.arc(x,y,7,0,T);c.fill()}}
+  const cup=()=>{c.beginPath();c.moveTo(62,84);c.lineTo(194,84);c.lineTo(178,232);c.quadraticCurveTo(176,240,168,240);c.lineTo(88,240);c.quadraticCurveTo(80,240,78,232);c.closePath()}
+  cup();c.fillStyle=TEA;c.fill()
+  c.save();cup();c.clip()
+  c.fillStyle='#fff8f0';c.fillRect(50,84,160,22)
+  c.fillStyle=PE;for(let k=0;k<11;k++){const x=92+(k%6)*15+(k>5?8:0),y=224-(k>5?14:0)+2*sin(2*T*t+k);c.beginPath();c.arc(x,y,8,0,T);c.fill()}
+  c.fillStyle='#fff';for(let k=0;k<11;k++){const x=92+(k%6)*15+(k>5?8:0),y=224-(k>5?14:0)+2*sin(2*T*t+k);c.beginPath();c.arc(x-3,y-3,2,0,T);c.fill()}
+  c.restore();cup();c.stroke()
+  c.lineWidth=5;c.beginPath();c.moveTo(66,106);c.lineTo(190,106);c.stroke();c.lineWidth=7
+  c.fillStyle=LID;c.beginPath();c.moveTo(54,84);c.bezierCurveTo(60,36,196,36,202,84);c.closePath();c.fill();c.stroke()
+  c.beginPath();c.roundRect(50,78,156,14,7);c.fill();c.stroke()
+  c.lineWidth=4;c.beginPath();c.arc(108,70,18,PI*1.15,PI*1.45);c.stroke();c.lineWidth=7
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(128+d*22,146,6,0,T),c.fill()
+  c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*22-2,144,2.2,0,T),c.fill()
+  c.lineWidth=5;c.beginPath();c.arc(128,154,9,.15*PI,.85*PI);c.stroke()
+  c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*42,160,9,5,0,0,T),c.fill()
+}

gen/color/burger/stack.js

@@ -0,0 +1,19 @@
+// burger bouncing on the spot, top bun lagging behind like it's singing, lettuce flapping
+const{sin,cos,PI,max}=Math,T=2*PI
+export const frames=16,delay=70
+const BUN='#f4a259',PT='#8b5a3c',CH='#ffd43b',LT='#69db7c',TM='#fa5252',SE='#fff4e6'
+export default(c,t)=>{
+  const b=max(0,sin(2*T*t)),y=-14*b,sq=1-.08*(1-b),lid=-18*max(0,sin(2*T*t-.9))
+  c.translate(128,226);c.scale(2-sq,sq);c.translate(-128,-226+y)
+  const R=(col,x,yy,w,h,r)=>{c.fillStyle=col;c.beginPath();c.roundRect(x,yy,w,h,r);c.fill();c.stroke()}
+  R(BUN,52,192,152,32,[8,8,18,18])
+  R(PT,44,166,168,30,15)
+  c.fillStyle=CH;c.beginPath();c.moveTo(52,160);c.lineTo(204,160);c.lineTo(196,170);c.lineTo(172,186);c.lineTo(160,170);c.lineTo(100,170);c.lineTo(86,190);c.lineTo(70,170);c.lineTo(52,170);c.closePath();c.fill();c.stroke()
+  c.fillStyle=LT;c.beginPath();c.moveTo(40,152);for(let x=40;x<=216;x+=8)c.lineTo(x,152+6*sin(x/8+4*T*t)*(x%16?1:-1));c.lineTo(216,140);c.lineTo(40,140);c.closePath();c.fill();c.stroke()
+  R(TM,54,130,148,16,8)
+  c.translate(0,lid)
+  c.fillStyle=BUN;c.beginPath();c.moveTo(46,130);c.bezierCurveTo(46,40,210,40,210,130);c.quadraticCurveTo(210,138,200,138);c.lineTo(56,138);c.quadraticCurveTo(46,138,46,130);c.fill();c.stroke()
+  c.fillStyle=SE;c.lineWidth=3;for(const[x,yy,a]of[[96,74,.4],[128,64,0],[160,74,-.4],[110,92,.2],[148,92,-.2],[78,98,.6],[178,98,-.6]])c.beginPath(),c.ellipse(x,yy,6,3.5,a,0,T),c.fill(),c.stroke()
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(128+d*22,110,5.5,0,T),c.fill()
+  c.lineWidth=5;c.beginPath();c.arc(128,116,9,.15*PI,.85*PI);c.stroke()
+}

gen/color/donut/spin.js

@@ -0,0 +1,23 @@
+// pink frosted donut turning on the spot like it's on a turntable, sprinkles riding around with it
+const{sin,cos,PI}=Math,T=2*PI
+export const frames=24,delay=60
+const DO='#e8a15a',IC='#f783ac',SPR=['#ffd43b','#4dabf7','#fff','#69db7c','#b197fc','#ffd43b','#4dabf7','#fff','#69db7c','#b197fc','#ff922b','#fff']
+export default(c,t)=>{
+  const y=4*sin(2*T*t),rot=t*T,X=128,Y=124+y,ry=.5
+  c.fillStyle=DO
+  c.beginPath();c.ellipse(X,Y+18,94,94*ry,0,0,PI);c.lineTo(X-94,Y);c.ellipse(X,Y,94,94*ry,0,PI,0,true);c.closePath();c.fill();c.stroke()
+  c.beginPath();c.ellipse(X,Y,94,94*ry,0,0,T);c.fill();c.stroke()
+  c.fillStyle=IC;c.beginPath()
+  for(let a=0;a<=T+.01;a+=.05){const r=80+7*sin(7*a-rot*7)*(sin(a)>-.2?1:.3);c.lineTo(X+cos(a)*r,Y+sin(a)*r*ry-2)}
+  c.closePath();c.fill();c.stroke()
+  c.lineWidth=5
+  SPR.forEach((col,k)=>{
+    const a=rot+k*T/SPR.length+(k%3)*.2,r=k%2?62:46,x=X+cos(a)*r,yy=Y-2+sin(a)*r*ry,o=a*1.7+k
+    c.strokeStyle='#111';c.lineWidth=9;c.beginPath();c.moveTo(x-cos(o)*6,yy-sin(o)*3);c.lineTo(x+cos(o)*6,yy+sin(o)*3);c.stroke()
+    c.strokeStyle=col;c.lineWidth=4;c.stroke()
+  })
+  c.strokeStyle='#111';c.lineWidth=7
+  c.globalCompositeOperation='destination-out';c.beginPath();c.ellipse(X,Y-2,24,24*ry,0,0,T);c.fill();c.globalCompositeOperation='source-over'
+  c.save();c.beginPath();c.ellipse(X,Y-2,24,24*ry,0,0,T);c.clip();c.fillStyle=DO;c.beginPath();c.ellipse(X,Y+8,24,24*ry,0,PI,T);c.lineTo(X+24,Y+20);c.lineTo(X-24,Y+20);c.fill();c.restore()
+  c.beginPath();c.ellipse(X,Y-2,24,24*ry,0,0,T);c.stroke()
+}

gen/color/hamster/run.js

@@ -0,0 +1,29 @@
+// hamster running flat out in a spinning wheel
+const{sin,cos,PI}=Math,T=2*PI
+export const frames=16,delay=50
+const RIM='#4dabf7',ST='#adb5bd',HB='#ffc078',BE='#fff4e6',PK='#faa2c1'
+export default(c,t)=>{
+  const rot=t*T/4,b=2*sin(4*T*t)
+  for(const d of[-1,1])c.beginPath(),c.moveTo(128,128),c.lineTo(128+d*52,236),c.lineWidth=12,c.stroke(),c.lineWidth=7
+  c.fillStyle=ST;c.beginPath();c.roundRect(60,228,136,14,7);c.fill();c.stroke()
+  for(const[w,st]of[[8,'#111'],[3,'#dee2e6']]){c.lineWidth=w;c.strokeStyle=st;c.beginPath();for(let k=0;k<8;k++){const a=rot+k*PI/4;c.moveTo(128,128);c.lineTo(128+cos(a)*90,128+sin(a)*90)}c.stroke()}
+  c.strokeStyle='#111'
+  c.lineWidth=7;c.beginPath();c.arc(128,128,100,0,T);c.arc(128,128,88,0,T,true);c.fillStyle=RIM;c.fill('evenodd')
+  c.beginPath();c.arc(128,128,100,0,T);c.stroke();c.beginPath();c.arc(128,128,88,0,T);c.stroke()
+  c.lineWidth=4;for(let k=0;k<24;k++){const a=rot+k*T/24;c.beginPath();c.moveTo(128+cos(a)*88,128+sin(a)*88);c.lineTo(128+cos(a)*100,128+sin(a)*100);c.stroke()}
+  c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(128,128,10,0,T);c.fill();c.stroke();c.lineWidth=7
+  const hy=180+b
+  c.save();c.translate(128,200);c.scale(1.25,1.25);c.translate(-128,-200)
+  for(let k=0;k<4;k++){const a=-4*T*t+k*PI/2+(k>1?PI/4:0),lx=(k<2?106:146)+cos(a)*7,ly=hy+26+sin(a)*5;c.fillStyle=PK;c.beginPath();c.ellipse(lx,ly,8,6,0,0,T);c.fill();c.lineWidth=5;c.stroke();c.lineWidth=7}
+  c.fillStyle=HB;c.beginPath();c.arc(108,hy-26,9,0,T);c.fill();c.stroke()
+  c.beginPath();c.moveTo(84,hy+4);c.lineTo(76,hy);c.stroke()
+  c.beginPath();c.ellipse(128,hy,48,30,0,0,T);c.fill();c.stroke()
+  c.fillStyle=BE;c.beginPath();c.ellipse(140,hy+12,26,15,0,0,T);c.fill()
+  c.fillStyle=PK;c.beginPath();c.arc(124,hy-24,4,0,T);c.fill()
+  c.fillStyle='#111';c.beginPath();c.arc(156,hy-10,5,0,T);c.fill();c.beginPath();c.arc(176,hy-2,3.5,0,T);c.fill()
+  c.fillStyle='#fff';c.beginPath();c.arc(154,hy-12,1.8,0,T);c.fill()
+  c.fillStyle=PK;c.beginPath();c.ellipse(158,hy+4,7,4,0,0,T);c.fill()
+  c.restore()
+  for(const k of[0,1,2])for(const[w,st]of[[9,'#111'],[3,'#fff']]){const x=62-k*6;c.lineWidth=w;c.strokeStyle=st;c.beginPath();c.moveTo(x,hy-12+k*12);c.lineTo(x-14,hy-12+k*12);c.stroke()}
+  c.strokeStyle='#111'
+}

gen/color/ladybug/crawl.js

@@ -0,0 +1,28 @@
+// ladybug crawling on a leaf, legs stepping, antennae twitching, wings peeking open now and then
+const{sin,cos,PI,max}=Math,T=2*PI
+export const frames=20,delay=70
+const LF='#69db7c',VN='#2f9e44',R='#fa5252',WG='#e7f5ff'
+export default(c,t)=>{
+  c.save();c.translate(128,128);c.rotate(-.5)
+  c.fillStyle=LF;c.beginPath();c.moveTo(-122,0);c.quadraticCurveTo(0,-118,122,0);c.quadraticCurveTo(0,118,-122,0);c.fill();c.stroke()
+  c.strokeStyle=VN;c.lineWidth=5;c.beginPath();c.moveTo(-110,0);c.lineTo(110,0);for(const x of[-60,-20,20,60])c.moveTo(x,0),c.lineTo(x+26,-36),c.moveTo(x,0),c.lineTo(x+26,36);c.stroke()
+  c.restore();c.strokeStyle='#111';c.lineWidth=7
+  const y=4*sin(2*T*t),r=.08*sin(T*t),w=max(0,sin(PI*(t-.55)/.3))*(t>.55&&t<.85)
+  c.translate(128,140+y);c.rotate(r)
+  for(const d of[-1,1])for(let k=0;k<3;k++){
+    const st=(k%2?1:-1)*d*5*sin(2*T*t)
+    c.lineWidth=6;c.beginPath();c.moveTo(d*30,-22+k*24);c.lineTo(d*58,-34+k*28+st);c.lineTo(d*66,-24+k*30+st);c.stroke()
+  }
+  for(const d of[-1,1]){c.lineWidth=5;c.beginPath();c.moveTo(d*10,-58);c.quadraticCurveTo(d*18,-84,d*(28+3*sin(4*T*t+d)),-88);c.stroke();c.fillStyle='#111';c.beginPath();c.arc(d*(28+3*sin(4*T*t+d)),-88,5,0,T);c.fill()}
+  c.lineWidth=7
+  if(w>0)for(const d of[-1,1])c.fillStyle=WG,c.beginPath(),c.ellipse(d*30,20,26,52,d*.3,0,T),c.fill(),c.lineWidth=4,c.stroke(),c.lineWidth=7
+  c.fillStyle='#111';c.beginPath();c.arc(0,-46,26,PI,0);c.closePath();c.fill();c.stroke()
+  c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(d*11,-56,6,0,T),c.fill()
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(d*11,-55,3,0,T),c.fill()
+  for(const d of[-1,1]){
+    c.save();c.translate(0,-44);c.rotate(-d*w*.45);c.translate(0,44)
+    c.fillStyle=R;c.beginPath();c.moveTo(0,-44);c.arc(0,4,48,-PI/2,PI/2,d<0);c.closePath();c.fill();c.stroke()
+    c.fillStyle='#111';for(const[x,yy,rr]of[[16,-14,9],[28,14,8],[12,26,7]])c.beginPath(),c.arc(d*x,yy,rr,0,T),c.fill()
+    c.restore()
+  }
+}

gen/color/panda/munch.js

@@ -0,0 +1,30 @@
+// panda sitting and munching on a bamboo stalk, cheeks working, bamboo bobbing with every chew
+// black parts get a white rim so they still show on dark backgrounds
+const{sin,cos,PI,abs}=Math,T=2*PI
+export const frames=16,delay=80
+const BB='#69db7c',PK='#ffa8c5'
+export default(c,t)=>{
+  const ch=abs(sin(2*PI*t*2)),by=6*ch
+  const dark=f=>{c.beginPath();f();c.lineWidth=15;c.strokeStyle='#fff';c.stroke();c.fillStyle='#111';c.fill();c.lineWidth=7;c.strokeStyle='#111';c.stroke()}
+  for(const d of[-1,1])dark(()=>c.arc(128+d*46,56,20,0,T))
+  for(const d of[-1,1])dark(()=>c.ellipse(128+d*40,222,24,16,0,0,T))
+  c.fillStyle='#fff';c.beginPath();c.ellipse(128,180,62,52,0,0,T);c.fill();c.stroke()
+  for(const d of[-1,1]){c.fillStyle=PK;c.beginPath();c.ellipse(128+d*40,224,10,7,0,0,T);c.fill()}
+  c.fillStyle='#fff';c.beginPath();c.arc(128,100,56,0,T);c.fill();c.stroke()
+  for(const d of[-1,1])c.fillStyle='#111',c.beginPath(),c.ellipse(128+d*24,96,15,19,d*.55,0,T),c.fill()
+  c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*23,94,5,0,T),c.fill()
+  c.fillStyle='#111';c.beginPath();c.ellipse(128,116,8,6,0,0,T);c.fill()
+  c.fillStyle=PK;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*38,122+ch*2,10,6,0,0,T),c.fill()
+  c.lineWidth=5;c.beginPath()
+  if(ch>.5)c.ellipse(128,132,7,5,0,0,T);else c.moveTo(118,130),c.quadraticCurveTo(123,136,128,130),c.quadraticCurveTo(133,136,138,130)
+  c.stroke()
+  for(const[x0,y0,x1,y1]of[[86,158,156,186-by],[176,152,176,170-by]])
+    for(const[w,s]of[[36,'#fff'],[26,'#111']])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(x0,y0),c.lineTo(x1,y1),c.stroke()
+  c.save();c.translate(196,230-by);c.rotate(-.42)
+  for(const[w,s]of[[28,'#111'],[16,BB]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(0,0),c.lineTo(0,-118),c.stroke()
+  c.strokeStyle='#111';c.lineWidth=5;for(const y of[-36,-80])c.beginPath(),c.moveTo(-9,y),c.lineTo(9,y),c.stroke()
+  c.fillStyle=BB;for(const[a,y]of[[1,-104],[1,-88]])c.save(),c.translate(a*8,y),c.rotate(-.5+(y+96)*.03),c.beginPath(),c.ellipse(18,0,20,7,0,0,T),c.fill(),c.stroke(),c.restore()
+  c.restore()
+  for(const[x,y]of[[156,186],[176,170]])c.lineWidth=13,c.strokeStyle='#fff',c.beginPath(),c.arc(x,y-by,13,0,T),c.stroke(),c.fillStyle='#111',c.fill()
+  c.lineWidth=7;c.strokeStyle='#111'
+}

gen/color/pizza/stretch.js

@@ -0,0 +1,23 @@
+// slice of pizza being lifted off the pie with cheese strings stretching under it
+const{sin,cos,PI}=Math,T=2*PI
+export const frames=20,delay=70
+const CR='#e8a15a',CH='#ffd43b',PP='#fa5252',SAUCE='#ff8787'
+export default(c,t)=>{
+  const L=46*(1-cos(t*T))/2
+  c.fillStyle=CR;c.beginPath();c.ellipse(128,212,112,30,0,0,T);c.fill();c.stroke()
+  c.fillStyle=CH;c.beginPath();c.ellipse(128,208,96,22,0,0,T);c.fill();c.lineWidth=5;c.stroke()
+  c.fillStyle=PP;for(const[x,y]of[[70,206],[180,210],[150,200],[96,216]])c.beginPath(),c.ellipse(x,y,12,6,0,0,T),c.fill(),c.stroke()
+  c.lineWidth=7
+  for(const[x0,x1]of[[96,98],[112,112],[128,128],[144,146],[160,158]]){
+    const w=Math.max(4,14-L*.18),sag=6*sin(t*T*2+x0)
+    for(const[l,s]of[[w+7,'#111'],[w,CH]])c.lineWidth=l,c.strokeStyle=s,c.beginPath(),c.moveTo(x0,150-L+(x0-128)**2/80),c.quadraticCurveTo((x0+x1)/2+sag,(150-L+200)/2,x1,200),c.stroke()
+  }
+  c.lineWidth=7;c.strokeStyle='#111'
+  c.translate(0,-L)
+  c.fillStyle=CH;c.beginPath();c.moveTo(60,56);c.lineTo(196,56);c.lineTo(128,182);c.closePath();c.fill();c.stroke()
+  c.save();c.clip();c.fillStyle=SAUCE;for(const[x,y]of[[100,80],[156,84]])c.beginPath(),c.ellipse(x,y,14,8,0,0,T),c.fill();c.restore()
+  c.fillStyle=PP;for(const[x,y]of[[96,78],[150,92],[124,130]])c.beginPath(),c.arc(x,y,13,0,T),c.fill(),c.stroke()
+  c.fillStyle=CR;c.beginPath();c.roundRect(52,40,152,24,12);c.fill();c.stroke()
+  c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.arc(128+d*14,104,6,PI*1.15,PI*1.85),c.stroke()
+  c.beginPath();c.arc(128,110,7,.15*PI,.85*PI);c.stroke()
+}

gen/color/taco/wiggle.js

@@ -0,0 +1,19 @@
+// taco dancing side to side, lettuce flapping and its fillings jiggling
+const{sin,cos,PI}=Math,T=2*PI
+export const frames=16,delay=70
+const SH='#ffd43b',SD='#f59f00',LT='#69db7c',TM='#fa5252',MT='#8b5a3c',CH='#fff3bf',BL='#ffa8a8'
+export default(c,t)=>{
+  const r=.16*sin(t*T),j=3*sin(2*T*t)
+  c.translate(128,214);c.rotate(r);c.translate(-128,-214)
+  c.fillStyle=MT;c.beginPath();c.ellipse(128,108+j,82,26,0,0,T);c.fill();c.stroke()
+  c.fillStyle=LT;c.beginPath();c.moveTo(40,116);for(let k=0;k<=12;k++){const x=40+k*176/12;c.lineTo(x,(k%2?84:100)+j*(k%3-1))}c.lineTo(216,116);c.closePath();c.fill();c.stroke()
+  c.fillStyle=TM;for(const[x,y]of[[72,96],[104,86],[150,88],[184,98],[128,96]])c.beginPath(),c.arc(x,y+j,12,0,T),c.fill(),c.stroke()
+  c.lineWidth=5;c.strokeStyle='#111';c.fillStyle=CH;for(const[x,y,a]of[[90,104,.6],[120,100,-.4],[166,104,.3]])c.save(),c.translate(x,y-j),c.rotate(a),c.beginPath(),c.roundRect(-12,-3,24,6,3),c.fill(),c.stroke(),c.restore()
+  c.lineWidth=7
+  c.fillStyle=SH;c.beginPath();c.moveTo(30,112);c.arc(128,112,98,PI,0,true);c.closePath();c.fill();c.stroke()
+  c.fillStyle=SD;for(const[x,y]of[[70,150],[96,186],[160,184],[186,146],[128,196],[56,124],[200,122]])c.beginPath(),c.arc(x,y,4,0,T),c.fill()
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(128+d*26,140,6,0,T),c.fill()
+  c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*26-2,138,2.2,0,T),c.fill()
+  c.fillStyle='#111';c.beginPath();c.moveTo(114,154);c.quadraticCurveTo(128,174,142,154);c.closePath();c.fill()
+  c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*46,154,9,5,0,0,T),c.fill()
+}

gen/color/watermelon/chomp.js

@@ -0,0 +1,21 @@
+// watermelon slice getting chomped three times, then popping back whole for another round
+const{sin,PI,min,max}=Math,T=2*PI
+export const frames=24,delay=80
+const RD='#51cf66',RL='#d3f9d8',FL='#ff6b6b'
+const B=[[.12,84],[.3,170],[.5,128]]
+const slice=c=>{c.beginPath();c.moveTo(232,108);c.arc(128,108,104,0,PI);c.closePath()}
+export default(c,t)=>{
+  const pop=t>.78?(t-.78)/.22:0,s=pop?1+.12*sin(PI*min(1,pop*1.4)):1,done=B.filter(([at])=>t>=at&&!pop)
+  c.translate(128,160);c.scale(s,s);c.translate(-128,-160)
+  slice(c);c.fillStyle=RD;c.fill()
+  c.fillStyle=RL;c.beginPath();c.moveTo(220,108);c.arc(128,108,92,0,PI);c.closePath();c.fill()
+  c.fillStyle=FL;c.beginPath();c.moveTo(212,108);c.arc(128,108,84,0,PI);c.closePath();c.fill()
+  c.fillStyle='#111';for(const[x,y,a]of[[68,140,.5],[94,168,.2],[128,184,0],[162,168,-.2],[188,140,-.5]])c.save(),c.translate(x,y),c.rotate(a),c.beginPath(),c.ellipse(0,0,4,7,0,0,T),c.fill(),c.restore()
+  const surprised=done.some(([at])=>t-at<.08)
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(128+d*30,128,6,0,T),c.fill()
+  c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*30-2,126,2.2,0,T),c.fill()
+  c.lineWidth=5;c.strokeStyle='#111';c.beginPath();if(surprised)c.ellipse(128,148,7,9,0,0,T);else c.arc(128,140,10,.15*PI,.85*PI);c.stroke();c.lineWidth=7
+  c.globalCompositeOperation='destination-out';for(const[,x]of done)c.beginPath(),c.arc(x,108,26,0,T),c.fill();c.globalCompositeOperation='source-over'
+  c.save();c.beginPath();c.rect(0,0,256,256);for(const[,x]of done)c.moveTo(x+26,108),c.arc(x,108,26,0,T);c.clip('evenodd');slice(c);c.stroke();c.restore()
+  c.save();slice(c);c.clip();for(const[,x]of done)c.beginPath(),c.arc(x,108,26,0,T),c.stroke();c.restore()
+}