Draw the minimalist creatures white directly and drop invert

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

gen/mini/catwhale/swim.js

@@ -1,9 +1,9 @@
-// cat-whale drifting along: one solid ink shape, it bobs, flicks its tail, twitches an ear, puffs a spout and blinks
+// cat-whale drifting along: one solid white shape with a dark edge, it bobs, flicks its tail, twitches an ear, puffs a spout and blinks
 const{sin,cos,PI,min,max}=Math,T=2*PI
-export const frames=24,delay=85,rim=3,invert=true
+export const frames=24,delay=85,rim=3,rimColor='#111'
 export default(c,t)=>{
   const s=sin(T*t),k=sin(T*t-1.4),p=t/.45,tw=t>.6&&t<.68?.3:0,bl=t>.82&&t<.9,tx=46+4*k,ty=92-5*k
-  c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
+  c.fillStyle=c.strokeStyle='#fff';c.lineWidth=6
   c.translate(128,132+7*s);c.rotate(.04*cos(T*t));c.scale(.9,.9);c.translate(-126,-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(0,0,0,()=>{
@@ -24,7 +24,7 @@ export default(c,t)=>{
     for(const d of[-1,1])c.beginPath(),c.moveTo(x,y-h),c.quadraticCurveTo(x+d*w*.8,y-h-w*.5,x+d*w,y-h+w*.5),c.stroke(),
       c.beginPath(),c.arc(x+d*w,y-h+w*.5+5,5*g,0,T),c.fill()
   }
-  c.fillStyle=c.strokeStyle='#fff'
+  c.fillStyle=c.strokeStyle='#111'
   if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(190,128,6,.15*PI,.85*PI),c.stroke()
   else c.beginPath(),c.arc(190,130,6.5,0,T),c.fill()
   c.lineWidth=3;c.beginPath();c.moveTo(214,160);c.quadraticCurveTo(206,167,196,165);c.stroke()

gen/mini/dandelion/drift.js

@@ -1,11 +1,11 @@
 // lion whose mane is dandelion fluff: three seeds blow off and drift away, new ones grow back in their place
 const{sin,cos,PI,min,max}=Math,T=2*PI
-export const frames=24,delay=85,rim=3,invert=true
+export const frames=24,delay=85,rim=3,rimColor='#111'
 const N=18,F=[1,2,3]
 const seed=c=>{c.beginPath();c.moveTo(0,0);c.lineTo(24,0);for(let j=-2;j<=2;j++)c.moveTo(24,0),c.lineTo(24+10*cos(j*.42),10*sin(j*.42));c.stroke()}
 export default(c,t)=>{
   const bl=t>.86&&t<.92
-  c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
+  c.fillStyle=c.strokeStyle='#fff';c.lineWidth=6
   c.translate(128,128);c.scale(1.1,1.1);c.translate(-128,-128)
   const shape=g=>{c.beginPath();g();c.fill();c.stroke()}
   c.lineWidth=7;c.beginPath();c.moveTo(150,204);c.quadraticCurveTo(186,210,188+6*sin(T*t),178);c.stroke();c.lineWidth=6
@@ -23,7 +23,7 @@ export default(c,t)=>{
   c.lineWidth=6
   for(const d of[-1,1])shape(()=>c.arc(128+d*30,70,11,0,T))
   shape(()=>c.arc(128,100,40,0,T))
-  c.fillStyle=c.strokeStyle='#fff'
+  c.fillStyle=c.strokeStyle='#111'
   for(const d of[-1,1])if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(128+d*15,94,5,.15*PI,.85*PI),c.stroke()
   else c.beginPath(),c.arc(128+d*15,96,5,0,T),c.fill()
   c.beginPath();c.moveTo(121,108);c.lineTo(135,108);c.lineTo(128,116);c.closePath();c.fill()

gen/mini/mantis/pray.js

@@ -1,9 +1,9 @@
 // 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
-export const frames=24,delay=85,rim=3,invert=true
+export const frames=24,delay=85,rim=3,rimColor='#111'
 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)
-  c.fillStyle=c.strokeStyle='#111';c.lineWidth=4
+  c.fillStyle=c.strokeStyle='#fff';c.lineWidth=4
   const shape=f=>{c.beginPath();f();c.fill();c.stroke()}
   for(const[hx,kx,ky,fx]of[[130,152,186,166],[118,98,190,82],[112,62,184,46]])c.beginPath(),c.moveTo(hx,160),c.lineTo(kx,ky),c.lineTo(fx,212),c.stroke()
   c.translate(122,212);c.rotate(.03*s);c.translate(-122,-212)
@@ -17,6 +17,6 @@ export default(c,t)=>{
   c.save();c.translate(152,80);c.rotate(ht)
   c.lineWidth=3;for(const d of[-1,1])c.beginPath(),c.moveTo(d*6,-16),c.quadraticCurveTo(d*12,-48,d*30,-64),c.stroke()
   c.lineWidth=6;shape(()=>{c.moveTo(-20,-16);c.lineTo(20,-16);c.lineTo(0,10);c.closePath()})
-  c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(d*15,-15,3.5,0,T),c.fill()
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(d*15,-15,3.5,0,T),c.fill()
   c.restore()
 }

gen/mini/wisp/float.js

@@ -1,16 +1,16 @@
 // will-o-wisp floating: a round flame spirit bobbing and tilting, its flame tips flicker, embers drift up beside it, it blinks
 const{sin,PI}=Math,T=2*PI
-export const frames=24,delay=80,rim=3,invert=true
+export const frames=24,delay=80,rim=3,rimColor='#111'
 export default(c,t)=>{
   const bl=t>.4&&t<.46,Mx=128+6*sin(T*t*2),My=40+4*sin(T*t*3),R=4*sin(T*t*2+1),L=4*sin(T*t*2+2.5)
-  c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
+  c.fillStyle=c.strokeStyle='#fff';c.lineWidth=6
   for(const[i,x]of[-46,40,-30].entries()){const q=(t+i/3)%1;c.beginPath();c.arc(128+x+5*sin(T*q),110-74*q,5*sin(PI*q),0,T);c.fill()}
   c.translate(128,132+8*sin(T*t));c.rotate(.05*sin(T*t+1));c.scale(1.15,1.15);c.translate(-128,-128)
   c.beginPath();c.moveTo(82,148);c.arc(128,148,46,PI,0,true)
   c.bezierCurveTo(176,122,176,96,170+R,74);c.quadraticCurveTo(158,84,150,94)
   c.bezierCurveTo(152,72,140,54,Mx,My);c.bezierCurveTo(116,56,104,74,106,92)
   c.quadraticCurveTo(98,86,88+L,80);c.bezierCurveTo(80,100,80,124,82,148);c.fill();c.stroke()
-  c.fillStyle=c.strokeStyle='#fff'
+  c.fillStyle=c.strokeStyle='#111'
   for(const d of[-1,1])if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(128+d*16,136,7,.15*PI,.85*PI),c.stroke()
   else c.beginPath(),c.ellipse(128+d*16,138,7,10,0,0,T),c.fill()
   c.lineWidth=3.5;c.beginPath();c.arc(128,156,7,.2*PI,.8*PI);c.stroke()