js.html

<canvas id='c' style='zoom:.3'></canvas>
<textarea id='t' rows=20 cols=90 style='font:14px Panic Sans' onkeyup='update()'>
c.width|=0
for(n=i=20;i--;){
z=4+S(A=2*Math.PI/n*i)
x.moveTo(960+1e3*C(A)/z,540-1e3/z)
x.lineTo(X=960+1e3*(1+S(a=S(3*t+i/3)/2))*C(A)/z,Y=540+1e3*C(a)/z)
x.moveTo(X,Y)
x.arc(X,Y,150/z/z,0,7)
x.fill(x.stroke())
}
</textarea>
<span id='s' style='font:14px Panic Sans'>
<script>
var c = document.getElementById("c");
var x = c.getContext("2d");
var S = Math.sin;
var C = Math.cos;
var T = Math.tan;
var R = (r,g,b,a)=>"rgba("+~~r+","+~~g+","+~~b+","+(a===undefined?1:a)+")";
var frame = 0;
var u = t => eval(document.getElementById('t').value);
setInterval(function() { u(frame++/60); }, 1000/60);
function update() {
  frame = 0;
  c.width = 1920;
  c.height = 1080;
  document.getElementById('s').innerHTML = document.getElementById('t').value.length;
};
update();
</script>