mirror of
https://github.com/direct-img/vibegif.direct-img.link.git
synced 2026-10-29 03:34:51 +00:00
Add 150 UI and page state stickers in three pending sections
404s, loaders, success, errors, empty states, confirmation, under construction, offline and more: 50 monochrome (ui), 50 colored (uicolor) and 50 with an anime girl (uianime), on /test until approved. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,45 @@
|
||||
// mint haired chibi girl in a pink dress jumping for joy with both arms up, eyes squeezed happy, while confetti rains down around her
|
||||
const{sin,cos,PI,max}=Math,T=2*PI
|
||||
export const frames=12,delay=80
|
||||
const SKIN='#ffe3d1',HAIR='#8ce99a',HD='#37b24d',HL='#ebfbee',DR='#ffa8c5',DD='#f06595',SH='#ff6b6b',BL='#ff8fab',MO='#c92a2a',TG='#ff8fab',RB='#ffd43b',CF=['#ff6b6b','#ffd43b','#4dabf7','#b197fc','#69db7c','#ff922b']
|
||||
const ds=(c,a,b,s,f)=>{for(const[l,k]of[[a,'#111'],[b,s]])c.lineWidth=l,c.strokeStyle=k,c.beginPath(),f(),c.stroke();c.strokeStyle='#111'}
|
||||
const conf=(c,t,a)=>{for(let k=a;k<12;k+=2){const o=k*.37%1,p=(t+o)%1,x=18+k*20+8*sin(T*(p*2+o)),y=-14+p*280;c.save();c.translate(x,y);c.rotate(T*p*(k%3?1:-1)+k);c.scale(.3+.7*cos(T*p*2+k),1);c.fillStyle=CF[k%6];c.lineWidth=3;c.beginPath();c.rect(-5,-8,10,16);c.fill();c.stroke();c.restore()}}
|
||||
export default(c,t)=>{
|
||||
const h=sin(PI*t),y=-26*h,Z=.62
|
||||
conf(c,t,0)
|
||||
c.save();c.translate(128,242);c.scale(1.08,1.08);c.translate(-128,-242)
|
||||
c.fillStyle='rgba(134,142,150,.35)';c.beginPath();c.ellipse(128,240,40-14*h,7-2*h,0,0,T);c.fill()
|
||||
for(const d of[-1,1]){const fx=128+d*(11+16*h),fy=232-14*h+y
|
||||
ds(c,16,9,SKIN,()=>{c.moveTo(128+d*9,206+y);c.lineTo(fx,fy-4)})
|
||||
c.lineWidth=5;c.fillStyle=SH;c.beginPath();c.ellipse(fx+d*3,fy,11,7,d*.3*h,0,T);c.fill();c.stroke()}
|
||||
c.lineWidth=6;c.fillStyle=DR;c.beginPath();c.moveTo(112,164+y);c.lineTo(144,164+y);c.quadraticCurveTo(156,184,166,212+y)
|
||||
for(let k=1;k<=4;k++)c.quadraticCurveTo(166-k*19+9.5,220+y,166-k*19,212+y)
|
||||
c.quadraticCurveTo(100,184,112,164+y);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.lineWidth=4;for(const d of[-1,1])c.beginPath(),c.moveTo(128,170+y),c.quadraticCurveTo(128+d*14,164+y,128+d*16,176+y),c.quadraticCurveTo(128+d*8,182+y,128,170+y),c.fill(),c.stroke()
|
||||
c.fillStyle=RB;c.beginPath();c.arc(128,172+y,4,0,T);c.fill();c.stroke()
|
||||
c.save();c.translate(128,116+y);c.scale(Z,Z);c.translate(-128,-128);c.lineWidth=9
|
||||
for(const d of[-1,1]){c.save();c.translate(128+d*62,88);c.rotate(d*(-.1+.35*(1-h)))
|
||||
c.fillStyle=HAIR;c.beginPath();c.moveTo(0,0);c.bezierCurveTo(d*34,2,d*46,60,d*28,104);c.quadraticCurveTo(d*22,118,d*8,114);c.bezierCurveTo(d*22,74,d*6,32,0,0);c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=5;c.beginPath();c.moveTo(d*12,16);c.bezierCurveTo(d*26,40,d*30,70,d*22,96);c.stroke();c.strokeStyle='#111';c.lineWidth=9
|
||||
c.fillStyle=RB;c.beginPath();c.arc(0,0,13,0,T);c.fill();c.stroke();c.restore()}
|
||||
c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(196,34,206,96,198,150);c.lineTo(58,150);c.bezierCurveTo(50,96,60,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
|
||||
c.lineWidth=9;for(const x of[103,153])c.beginPath(),c.arc(x,148,14,PI*1.15,PI*1.85),c.stroke()
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,16,8,0,0,T),c.fill()
|
||||
c.lineWidth=4;for(const d of[-1,1])for(const k of[-6,0,6])c.beginPath(),c.moveTo(128+d*44+k-2,166),c.lineTo(128+d*44+k+2,158),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=MO;c.beginPath();c.moveTo(112,164);c.quadraticCurveTo(128,168,144,164);c.quadraticCurveTo(142,188,128,188);c.quadraticCurveTo(114,188,112,164);c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,190,9,7,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=9;c.fillStyle=HAIR;c.beginPath();c.moveTo(70,146)
|
||||
c.bezierCurveTo(54,74,88,36,128,36);c.bezierCurveTo(168,36,202,74,186,146)
|
||||
c.quadraticCurveTo(186,116,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110)
|
||||
c.quadraticCurveTo(132,96,124,90);c.quadraticCurveTo(118,102,110,108);c.quadraticCurveTo(106,96,96,94);c.quadraticCurveTo(90,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,102);c.quadraticCurveTo(70,120,70,146);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=7;for(const[a,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke()
|
||||
c.restore()
|
||||
for(const d of[-1,1]){const hx=128+d*(54-6*h),hy=150-48*h+y
|
||||
ds(c,16,9,SKIN,()=>{c.moveTo(128+d*14,172+y);c.lineTo(hx,hy)})
|
||||
c.lineWidth=5;c.fillStyle=DR;c.beginPath();c.ellipse(128+d*16,170+y,10,9,0,0,T);c.fill();c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.arc(hx,hy,9,0,T);c.fill();c.stroke()}
|
||||
c.restore()
|
||||
conf(c,t,1)
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
// sporty blonde girl in a red headband grinning ear to ear and pumping a big thumbs up, a gleam pinging off her teeth
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=80
|
||||
const SKIN='#ffe3d1',HAIR='#ffd43b',HD='#f59f00',HL='#fff9db',JK='#4dabf7',JD='#1c7ed6',BAND='#fa5252',BL='#ff8fab',MO='#c92a2a',TG='#ff8fab',GL='#fff9db'
|
||||
const ds=(c,a,b,s,f)=>{for(const[l,k]of[[a,'#111'],[b,s]])c.lineWidth=l,c.strokeStyle=k,c.beginPath(),f(),c.stroke();c.strokeStyle='#111'}
|
||||
const glint=(c,x,y,r,a)=>{c.save();c.translate(x,y);c.rotate(a);c.beginPath();for(let k=0;k<8;k++){const rr=k%2?r*.28:r,b=k*PI/4;c.lineTo(cos(b)*rr,sin(b)*rr)}c.closePath();c.restore();c.fill();c.stroke()}
|
||||
export default(c,t)=>{
|
||||
const pp=t<.2?sin(PI*t/.2):0,g=t>=.3&&t<.7?sin(PI*(t-.3)/.4):0
|
||||
c.save();c.translate(-16,4)
|
||||
c.lineWidth=6;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(196,34,208,96,200,158);c.quadraticCurveTo(190,170,180,158);c.lineTo(76,158);c.quadraticCurveTo(66,170,56,158);c.bezierCurveTo(48,96,60,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=JK;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(62,198,54,250);c.lineTo(202,250);c.quadraticCurveTo(194,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(102,191);c.lineTo(120,252);c.lineTo(136,252);c.lineTo(154,191);c.quadraticCurveTo(128,206,102,191);c.fill();c.stroke()
|
||||
c.strokeStyle=JD;c.lineWidth=4;c.beginPath();c.moveTo(128,206);c.lineTo(128,250);c.stroke();c.strokeStyle='#111'
|
||||
c.strokeStyle='#fff';c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*58,214),c.quadraticCurveTo(128+d*66,228,128+d*70,250),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.moveTo(116,168);c.lineTo(116,190);c.quadraticCurveTo(128,200,140,190);c.lineTo(140,168);c.fill();c.beginPath();c.moveTo(116,168);c.lineTo(116,188);c.moveTo(140,168);c.lineTo(140,188);c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
|
||||
c.lineWidth=6;for(const x of[103,153])c.beginPath(),c.arc(x,146,14,PI*1.15,PI*1.85),c.stroke()
|
||||
c.lineWidth=5;for(const[x,d]of[[103,-1],[153,1]])c.beginPath(),c.moveTo(x+d*13,139),c.lineTo(x+d*19,134),c.stroke()
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,158,12,6,0,0,T),c.fill()
|
||||
c.lineWidth=2.5;for(const d of[-1,1])for(const k of[-5,0,5])c.beginPath(),c.moveTo(128+d*44+k-2,161),c.lineTo(128+d*44+k+2,155),c.stroke()
|
||||
c.lineWidth=4;c.fillStyle=MO;c.beginPath();c.moveTo(106,160);c.quadraticCurveTo(128,166,150,160);c.quadraticCurveTo(146,186,128,186);c.quadraticCurveTo(110,186,106,160);c.fill()
|
||||
c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,188,11,7,0,0,T);c.fill();c.fillStyle='#fff';c.beginPath();c.moveTo(104,158);c.quadraticCurveTo(128,166,152,158);c.lineTo(152,170);c.quadraticCurveTo(128,176,104,170);c.fill();c.restore()
|
||||
c.stroke();c.lineWidth=2.5;c.beginPath();c.moveTo(108,167);c.quadraticCurveTo(128,174,148,167);c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=HAIR;c.beginPath();c.moveTo(68,150)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,188,150)
|
||||
c.quadraticCurveTo(184,120,178,104);c.quadraticCurveTo(168,98,158,110);c.quadraticCurveTo(156,94,140,90)
|
||||
c.quadraticCurveTo(136,104,124,110);c.quadraticCurveTo(122,96,110,90);c.quadraticCurveTo(102,100,96,112)
|
||||
c.quadraticCurveTo(90,100,78,104);c.quadraticCurveTo(70,124,68,150);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=5;for(const[a,e]of[[1.42,1.5],[1.6,1.72]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.fillStyle=BAND;c.lineWidth=5;c.beginPath();c.moveTo(70,82);c.bezierCurveTo(90,52,166,52,186,82);c.lineTo(182,96);c.bezierCurveTo(162,70,94,70,74,96);c.closePath();c.fill();c.stroke()
|
||||
for(const[a,b]of[[-.3,30],[.25,24]]){c.save();c.translate(70,90);c.rotate(a);c.beginPath();c.moveTo(0,-6);c.quadraticCurveTo(-b*.6,-8,-b,-2);c.lineTo(-b+2,8);c.quadraticCurveTo(-b*.6,4,0,6);c.closePath();c.fill();c.stroke();c.restore()}
|
||||
if(g>0){c.fillStyle=GL;c.lineWidth=3.5;glint(c,140,166,6+16*g,g*1.5)
|
||||
ds(c,8,3.5,'#fff',()=>{for(const a of[-.9,-.4,.1])c.moveTo(156+20*cos(a),156+20*sin(a)),c.lineTo(156+(26+8*g)*cos(a),156+(26+8*g)*sin(a))})}
|
||||
c.restore()
|
||||
const s=1.3+.2*pp
|
||||
ds(c,38,27,JK,()=>{c.moveTo(226,266);c.lineTo(204,226)})
|
||||
c.save();c.translate(196,200-6*pp);c.scale(s,s);c.rotate(-.1)
|
||||
c.lineWidth=5;c.fillStyle=SKIN;c.beginPath();c.roundRect(-6,-56,22,46,11);c.fill();c.stroke()
|
||||
c.beginPath();c.roundRect(-24,-18,48,44,15);c.fill();c.stroke()
|
||||
c.lineWidth=3;for(const y of[-6,6,16])c.beginPath(),c.moveTo(-24,y),c.lineTo(4,y),c.stroke()
|
||||
c.beginPath();c.moveTo(-2,-44);c.quadraticCurveTo(4,-49,10,-44);c.stroke()
|
||||
c.restore()
|
||||
if(pp>.1)ds(c,8,3.5,'#fff',()=>{for(const a of[-2.1,-1.6,-1.1])c.moveTo(196+62*cos(a),170+62*sin(a)),c.lineTo(196+(72+8*pp)*cos(a),170+(72+8*pp)*sin(a))})
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
// red haired girl with a side ponytail flashing a sideways V sign over her eye, winking with a big grin while sparkles pop all around
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=16,delay=80
|
||||
const SKIN='#ffe3d1',HAIR='#ff6b6b',HD='#e03131',HL='#ffe3e3',EYE='#4dabf7',ED='#1864ab',TOP='#ffe066',TD='#fab005',SCR='#74c0fc',BL='#ff8fab',MO='#c92a2a',TG='#ff8fab',SP=['#ffd43b','#ff8fab','#74c0fc','#ffd43b','#b2f2bb']
|
||||
const ds=(c,a,b,s,f)=>{for(const[l,k]of[[a,'#111'],[b,s]])c.lineWidth=l,c.strokeStyle=k,c.beginPath(),f(),c.stroke();c.strokeStyle='#111'}
|
||||
const eye=(c,x,y,d)=>{
|
||||
c.fillStyle='#fff';c.beginPath();c.ellipse(x,y,14,17,0,0,T);c.fill()
|
||||
c.save();c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(x-16,y-6);c.quadraticCurveTo(x,y-20,x+16,y-6);c.moveTo(x+d*15,y-7);c.lineTo(x+d*21,y-12);c.stroke()
|
||||
c.lineWidth=2.5;c.beginPath();c.moveTo(x-8,y+18);c.lineTo(x+8,y+18);c.stroke()
|
||||
}
|
||||
const spark=(c,x,y,r)=>{c.beginPath();c.moveTo(x,y-r);for(const[a,b]of[[1,0],[0,1],[-1,0],[0,-1]])c.quadraticCurveTo(x+(a+b)*r*.15,y+(b-a)*r*.15,x+a*r,y+b*r);c.fill();c.stroke()}
|
||||
export default(c,t)=>{
|
||||
const w=t>=.25&&t<.94
|
||||
c.lineWidth=3.5
|
||||
for(const[k,[x,y]]of[[30,40],[220,30],[236,224],[24,104],[150,16]].entries()){const p=(t-.25-k*.1+1)%1;if(p<.4)c.fillStyle=SP[k],spark(c,x,y,19*sin(PI*p/.4))}
|
||||
c.save();c.translate(178,62)
|
||||
c.lineWidth=6;c.fillStyle=HAIR;c.beginPath();c.moveTo(-8,0);c.bezierCurveTo(34,-12,56,50,46,126);c.quadraticCurveTo(40,148,24,156);c.quadraticCurveTo(34,96,0,24);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=3;c.beginPath();c.moveTo(12,12);c.bezierCurveTo(34,34,42,80,36,124);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=SCR;c.lineWidth=5;c.beginPath();c.ellipse(2,6,11,15,.5,0,T);c.fill();c.stroke()
|
||||
c.restore()
|
||||
c.lineWidth=6;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(196,34,206,96,198,156);c.lineTo(58,156);c.bezierCurveTo(50,96,60,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=TOP;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(62,198,54,250);c.lineTo(202,250);c.quadraticCurveTo(194,198,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle='#fff';c.beginPath();c.moveTo(96,191);c.lineTo(128,214);c.lineTo(160,191);c.lineTo(170,200);c.lineTo(128,232);c.lineTo(86,200);c.closePath();c.fill();c.lineWidth=5;c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(116,168);c.lineTo(116,194);c.quadraticCurveTo(128,208,140,194);c.lineTo(140,168);c.fill();c.beginPath();c.moveTo(116,168);c.lineTo(116,192);c.moveTo(140,168);c.lineTo(140,192);c.stroke()
|
||||
c.fillStyle=TD;c.lineWidth=4;c.beginPath();for(let k=0;k<10;k++){const r=k%2?6:13,b=k*PI/5-PI/2;c.lineTo(160+cos(b)*r,230+sin(b)*r)}c.closePath();c.fill();c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
|
||||
eye(c,153,140,1)
|
||||
if(w){c.lineWidth=5.5;c.beginPath();c.moveTo(91,130);c.lineTo(112,141);c.lineTo(91,151);c.stroke()}else eye(c,103,140,-1)
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*42,161,12,6,0,0,T),c.fill()
|
||||
c.lineWidth=2.5;for(const d of[-1,1])for(const k of[-5,0,5])c.beginPath(),c.moveTo(128+d*42+k-2,164),c.lineTo(128+d*42+k+2,158),c.stroke()
|
||||
c.lineWidth=3.5;c.fillStyle=MO;c.beginPath();c.moveTo(114,164);c.quadraticCurveTo(128,170,142,164);c.quadraticCurveTo(140,184,128,184);c.quadraticCurveTo(116,184,114,164);c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,184,8,6,0,0,T);c.fill();c.fillStyle='#fff';c.fillRect(114,160,28,7);c.restore()
|
||||
c.lineWidth=6;c.fillStyle=HAIR;c.beginPath();c.moveTo(70,146)
|
||||
c.bezierCurveTo(54,74,88,36,128,36);c.bezierCurveTo(168,36,202,74,186,146)
|
||||
c.quadraticCurveTo(186,116,178,102);c.quadraticCurveTo(170,104,164,112);c.quadraticCurveTo(160,98,150,92);c.quadraticCurveTo(144,104,136,110)
|
||||
c.quadraticCurveTo(132,96,124,90);c.quadraticCurveTo(118,102,110,108);c.quadraticCurveTo(106,96,96,94);c.quadraticCurveTo(90,104,86,112)
|
||||
c.quadraticCurveTo(80,104,78,102);c.quadraticCurveTo(70,120,70,146);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=5;for(const[a,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke()
|
||||
c.strokeStyle='#111'
|
||||
ds(c,30,19,TOP,()=>{c.moveTo(74,252);c.lineTo(36,206);c.lineTo(46,166)})
|
||||
for(const[fx,fy]of[[86,120],[88,160]])ds(c,14,7,SKIN,()=>{c.moveTo(54,148+(fy-140)*.3);c.lineTo(fx,fy)})
|
||||
c.lineWidth=5;c.fillStyle=SKIN;c.beginPath();c.ellipse(50,152,13,14,0,0,T);c.fill();c.stroke()
|
||||
c.beginPath();c.ellipse(56,160,8,5,-.3,0,T);c.fill();c.stroke()
|
||||
}
|
||||
Reference in New Issue
Block a user