JSFiddle - React, Tailwind, and code Playground

HTML

<input onblur="
[r,n,l]=this.value.split(','),
z=r-~l,t=D.getContext('2d'),w='lineTo',
D.width=D.height=z*2,
t.arc(z,z,r,0,7);
for(C=1,S=i=0;i++<n;)
t[w](x=z+r*C,y=z+r*S),
t[w](x-l*S,y+l*C),
C=Math.cos(a=6.283*i/n),
S=Math.sin(a),
t[w](z+r*C-l*S,z+r*S+l*C);
t.stroke()">
<canvas id=D>