const hsl2rgb = (h, s, l, o) => {

  if (h > 1 || s > 1 || l > 1) {

      h /= 360;

      s /= 100;

      l /= 100;

  }

  h *= 360;

  let R, G, B, X, C;

  h = (h % 360) / 60;

  C = 2 * s * (l < .5 ? l : 1 - l);

  X = C * (1 - Math.abs(h % 2 - 1));

  R = G = B = l - C / 2;

  h = ~~h;

  R += [C, X, 0, 0, X, C][h];

  G += [X, C, C, X, 0, 0][h];

  B += [0, 0, X, C, C, X][h];

  return `rgba(${~~(R * 255)}, ${~~(G * 255)}, ${~~(B * 255)}, ${o})`;

};

console.log(hsl2rgb(122, 50, 50, .5));

const FOUR_PI = 6 * Math.PI;

const { cos, sin } = Math;

const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const c = canvas.getContext('2d');

function resize() {

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

}

let inc = 0;

function draw() { 

  c.fillStyle = 'rgba(0, 0, 0, .3)'

  c.fillRect(0, 0, canvas.width, canvas.height)

  c.fillStyle = 'white';

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

  let theta = 0,

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

    x,

    y;

  c.save();

  c.translate(halfWidth, halfHeight)

  let b = 5 * cos(inc);

  inc += .02;

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 10 * sin(theta / 3));

    // randomly speed-coded and tweaked... leaving as is :D

    x = rad * cos(theta + b / 10) * cos(b / 10 +theta * 2) * cos(theta * 2);

    y = rad * sin(theta * 2) * cos(theta + b / 3) * cos(theta * 2);

    c.fillRect(x,y, 2, 2);

    theta += 0.04;

  }

  c.restore();

  requestAnimationFrame(draw)

}

resize();

addEventListener('resize', resize);

draw();

const FOUR_PI = 4 * Math.PI;

const { cos, sin } = Math;

const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const c = canvas.getContext('2d');

function resize() {

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

}

let inc = 0;

function draw() {

  c.clearRect(0, 0, canvas.width, canvas.height);

  c.fillStyle = 'blue';

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

  let theta = 0,

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

    x,

    y;

  c.save();

  c.translate(halfWidth, halfHeight)

  // Freeth's Nephroid

  // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/

  // r = a(1 + 2sin(θ / 2))

  let b = 2 * cos(inc);

  inc += .01;

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 2 * sin(theta / 2))

    x = rad * cos(theta);

    y = rad * sin(theta);

    c.fillRect(x, y, 2, 2);

    theta += 0.05;

  }

  c.restore();

  requestAnimationFrame(draw)

}

resize();

window.addEventListener('resize', resize);

draw()

const TWO_PI = Math.PI * 2;

const THREE_PI = 3 * Math.PI;

const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const c = canvas.getContext('2d');

const halfWidth = (canvas.width = 250) / 2;

const halfHeight = (canvas.height = 250) / 2;

const scale = 10;

c.fillStyle = '#f0e195';

c.strokeStyle = '#c2a272';

c.beginPath();

for (let theta = 0; theta <= TWO_PI; theta += 0.02) {

  const x = (TWO_PI - Math.sin(theta)) * Math.cos(theta);

  const y = THREE_PI * Math.sin(theta);

  c.lineTo(halfWidth + x * scale, halfHeight - y * scale);

}

c.fill();

c.stroke();

// 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()

  }

}