lkarch.org/tools/mathisfun/www.mathsisfun.com/calculus/images/limit-runner.js

let w,h,g,my={}
function limitrunnerMain(){let version='0.761';w=330;h=200;var s="";s+='<div style="position:relative; width:'+w+'px; min-height:'+h+'px; border: none; border-radius: 20px; background-color: #eeeeff; margin:auto; display:block;">';s+='<canvas id="canvasId" style="position: absolute; width:'+w+'px; height:'+h+'px; left: 0; top:; border: none;"></canvas>';s+='<div id="notice" style="font: bold 60px Arial; color: rgba(0,0,255,0.9); position:absolute; left:180px; top:100px; text-align:center; transition: all linear 2s; z-index: 100;">&nbsp;</div>';my.imgHome=(document.domain=='localhost')?'/mathsisfun/images/':'/images/'
s+='<img id="runner" src="'+my.imgHome+'runner/run0.gif" width="50" height="65" style="position: absolute; vertical-align: middle;">';s+='<div style="font: 10px Arial; color: #6600cc; position:absolute; right:5px; bottom:3px;">&copy; 2020 MathsIsFun.com  v'+version+'</div>';s+='</div>';document.write(s);let el=document.getElementById('canvasId');let ratio=2;el.width=w*ratio;el.height=h*ratio;el.style.width=w+"px";el.style.height=h+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);my.wait=0;my.runWait=0;my.runNo=0;my.frame=0;my.currPos=new Point(0,0);my.wantPos=new Point(0,0);my.incBy=new Point(0,0);let runLine=[-10,180,350,60];my.sttPos=new Point(runLine[0],runLine[1]);my.midPos=new Point((runLine[0]+runLine[2])/2,(runLine[1]+runLine[3])/2);my.endPos=new Point(runLine[2],runLine[3]);my.runImg=document.getElementById('runner');my.imgHt=65;my.imgWd=40;my.runImg.style.transform='scaleX(-1)';my.runImg.style.left='0px';my.runImg.style.top='180px';animate();}
function animate(){my.frame=(++my.frame)%600;var perFrame=0.008;if(my.frame==2){my.runNo=0;document.getElementById('notice').innerHTML='';my.runImg.style.transform='scaleX(1)';my.currPos.set(my.sttPos.x-my.imgWd,my.sttPos.y-my.imgHt);placeImg(my.currPos.x,my.currPos.y);my.wantPos.set(my.midPos.x-my.imgWd,my.midPos.y-my.imgHt);my.incBy.set((my.wantPos.x-my.currPos.x)*perFrame,(my.wantPos.y-my.currPos.y)*perFrame);g.clearRect(0,0,g.canvas.width,g.canvas.height)
g.beginPath();g.strokeStyle='black';g.moveTo(my.sttPos.x,my.sttPos.y);g.lineTo(my.midPos.x-2,my.midPos.y+0.5);g.stroke();fuzzyCircle(my.midPos.x,my.midPos.y,30);}
if(my.frame==160){document.getElementById('notice').innerHTML='?';}
if(my.frame==300){my.runNo=2;document.getElementById('notice').innerHTML='';my.runImg.style.transform='scaleX(-1)';my.currPos.set(my.endPos.x-my.imgWd,my.endPos.y-my.imgHt);placeImg(my.currPos.x,my.currPos.y);my.wantPos.set(my.midPos.x-my.imgWd*0.2,my.midPos.y-my.imgHt);my.incBy.set((my.wantPos.x-my.currPos.x)*perFrame,(my.wantPos.y-my.currPos.y)*perFrame);g.beginPath();g.strokeStyle='black';g.moveTo(my.endPos.x,my.endPos.y);g.lineTo(my.midPos.x,my.midPos.y);g.stroke();}
if(my.frame==460){document.getElementById('notice').innerHTML="&#x2714;";}
var movingQ=false;if(Math.abs(my.currPos.x-my.wantPos.x)>1){my.currPos.x+=my.incBy.x;movingQ=true;}
if(Math.abs(my.currPos.y-my.wantPos.y)>1){my.currPos.y+=my.incBy.y;movingQ=true;}
if(movingQ){my.runWait=(++my.runWait)%5;if(my.runWait==0){my.runNo=(++my.runNo)%12;my.runImg.src=my.imgHome+'runner/run'+my.runNo+'.gif';}}
placeImg(my.currPos.x,my.currPos.y);requestAnimationFrame(animate);}
function fuzzyCircle(x,y,rad){var grd=g.createRadialGradient(x,y,0,x,y,rad);grd.addColorStop(0,'rgba(255,255,0,0)');grd.addColorStop(0.5,'rgba(255,255,0,.5)');grd.addColorStop(1,'rgba(255,255,0,0)');g.fillStyle=grd;g.beginPath();g.arc(x,y,rad,0,2*Math.PI);g.fill();}
function placeImg(x,y){my.runImg.style.left=x+'px';my.runImg.style.top=y+'px';}
function Point(x,y){this.x=x;this.y=y;}
Point.prototype.set=function(x,y){this.x=x;this.y=y;};