// six white geometric figures (outlines) superimposed on a black wall.

d = document

b = d.body

S = 600

hs = S / 2

with(Math) {

with(

  b.appendChild(Object.assign(

  d.createElement`canvas`, { width: S, height: S })

  ).getContext`2d`) {

    fillRect(0, 0, S, S)

    strokeStyle = '#fff'

    canvas.style.transformOrigin = '0 0'

    canvas.style.transform = 'scale(.5)'

    lineWidth = 8

    H = (

      s = S * .5,

      yp = hs, xp = hs,

      a = 1.234,

      d = 0.1678,

      o = 3.9

      ) => {

        beginPath()

        for (t = 0; t < 6.28; t+=.2) {

          r = sqrt(a ** PI % sin(d * (t ** 2 * a) + o)) * s

          x = xp + r * sin(t);

          y = yp + r * cos(t);

          t === 0 ? moveTo(x, y) : lineTo(x, y)

        }

        closePath()

        stroke()

        fill()

    }

    tick = 0

    loop = _ => {

      fillStyle = 'rgba(0, 0, 0, 0.5)'

      fillRect(0, 0, S, S)

      save()

      translate(S/2, S/2)

      scale(.5, .5)

      rotate(tick * 20)

      translate(-S/2, -S/2)

      tick += .0001

      globalAlpha = .8;

      H(S, hs, hs, 1 + tick)

      H(S, hs, hs, 1.1 + tick)

      H(S, hs, hs, 1.2 + tick)

      globalAlpha = 1;

      H(S * .3, hs-S/4, hs, 1, tick)

      H(S * .2, hs+S/4, hs, 1.2, tick, 1.8)

      H(S * .2, hs, hs - S/4, cos(tick), -tick, 5)

      restore()

      requestAnimationFrame(loop)

    }

    loop()

  }

}