var K=document.querySelector('canvas'),
{random:z,PI,cos,sin}=Math,
X=K.getContext('2d'),F=24,l=-1001,
u=0,S=Array(~~(z()*2)+3).fill().map(()=>({
 C:~~(z()*10)+4,
 r:37.5-4*u++, T:z()*.1,
 R:z()>.25?z()/5-.1:0,
 S:z()>.25?z()*.5+.5:1,
 n:37.5,t:0,d:1
})),Z=matchMedia('(prefers-reduced-motion: reduce)').matches?0:1

X.strokeStyle='#fff'
X.lineWidth=1
function pl(x,y,r,s,t) {
 X.beginPath()
 for (let i=0; i<=s; i++) {
  var a=(i*2*PI/s)+t,
px=x+r*cos(a), py=y+r*sin(a)
  i==0?X.moveTo(px, py):X.lineTo(px, py)
 }
X.stroke()
}
function d(s) {
 var cx=37.5,cy=37.5,{T,d,r,S,n}=s
 s.n+=T*d
 if (s.n>=r) {
  s.n=r
  s.d=-1
 }
 if (s.n<=r*S) {
  s.n=r*S
  s.d=1
 }
 s.t+=s.R
 s.C<13?pl(cx,cy,n,s.C,s.t):(X.beginPath(),X.arc(cx,cy,n,0,2*PI),X.stroke())
}
function f(t) {
  if(Z)requestAnimationFrame(f)
  var dt=t-l
  if (dt>1000/F) {
    X.clearRect(0,0,75,75)
    X.rect(0,0,75,75)
    X.stroke()
    S.map(d)
    l=t
  }
}
K.onclick=()=>((Z=!Z)&&f())
f(0)