JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="e" width="500" height="500"></canvas>

CSS

#e {
    border: 1px solid #aaa;
}

JavaScript

function draw(o,b,a) {
    var ctx=document.getElementById("e").getContext("2d");
    ctx.clearRect (0,0,500,500);
    
    ctx.save();
    ctx.translate(250,250);
    
    //ball
    ctx.beginPath();
    ctx.arc(0,20*(b+1),5,0,2*Math.PI);
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.stroke();
    
    //maze
    ctx.rotate(-a);
    
    var r=30;
    o.forEach(function(e) {
        ctx.beginPath();
        var osize=8/r;
        ctx.arc(0,0,r,e+osize+Math.PI/2,e+2*Math.PI-osize+Math.PI/2);
        ctx.stroke();
        r+=20;
    });
    
    ctx.restore();
}

var status = [];

function f(o,m){for(c=Math.PI,a=Math.abs,p=2*c,r=0,s=1e-3;m.length;){while(a(c-o[r])<s)r++;if(a(t=m[0])<s)m.shift(c+=t);else{b=t<0?-s:s;c+=b;m[0]-=b;c+=c<0?p:c>p?-p:0;status.push([c,r])}}return r}

var arg_o=[0,0.785398163,3.14159265,1.74532925,4.71238898,4.01425728,0];
var arg_m=[-3.92699082,3.14159265,0.81245687];
f(arg_o,arg_m);

function step(){
    var s=status.shift();
    draw(arg_o,s[1],s[0]);
    status=status.slice(10);
    if (status.length) setTimeout(step,10);
}

setTimeout(step,10);