Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#count {
  display: none;
}

canvas {
  display: none;
}

:root {
  --tile-size: 0.7vmin;
  --distance: 1vmin;
}

@property --x {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}

@property --y {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

#tiles {
  filter: drop-shadow(0 0 1rem #b818da);
  width: 0dvw;
  height: 0dvh;
  display: grid;
  place-items: center;
  cursor: pointer;

> div {
    border-radius: 50%;
    width: var(--tile-size);
    aspect-ratio: 1;
    background: hsla(var(--color), 110%, 60%, 1);
    position: absolute;
    transform: translate3d(var(--x), var(--y), 0) scale(var(--scale));
    --delay: calc(var(--p-r) * 1s);
    --color: calc(var(--p-r) * (360 - 100) + 100);
    --duration: calc(var(--p-r2) * 10s);
  }

&.show {
    > div {
      animation: fade-in 0.3s linear forwards,
        show var(--duration) var(--delay) cubic-bezier(0.86, 0.86, 0.41, 1.16)
          infinite,
        blink 1s var(--delay) ease-in-out infinite;
    }
  }
}

@keyframes blink {
  from,
  50%,
  to {
    opacity: 1;
  }

30%,
  70% {
    opacity: 0.3;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes show {
  from {
    --x: calc(1dvw * var(--p-r));
    --y: calc(-100dvh * var(--p-r));
    filter: blur(0.5rem);
    --scale: calc(clamp(1.5, 10 * var(--p-r2), 5));
  }
  5% {
    filter: blur(0rem);
  }
  10% {
    --x: calc(var(--p-x) * var(--distance));
    --y: calc(var(--p-y) * var(--distance));
    --scale: calc(1);
  }

to {
    --x: calc(var(--p-x) * var(--distance));
    --y: calc(var(--p-y) * var(--distance));
  }
}

body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: conic-gradient(at 50% 52%, #180a3e, black, black, #180a3e);

color: #ee75d2;
  margin: 0;
  overflow: clip;
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

// center at bottom
a.labs-follow-me {
  left: 2rem;
  right: 2rem;
  bottom: 1rem;
  top: unset;
  text-align: center;
}

console.log("Event Fired")
const counts = count.innerText;
const size = 35;
const ctx = canvas.getContext("2d");
const font = `${size}px monospace`;
ctx.font = font;
const metrics = ctx.measureText(counts);
canvas.width = metrics.width;
canvas.height = size;

ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = font;
ctx.fillStyle = "black";
ctx.fillText(counts, 0, canvas.height);

const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
const length = data.length;
const pixels = [];
let x = 0,
  y = 0;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
for (let i = 0; i < length; i += 4) {
  const pixel = { hit: data[i] === 0, i, x: x - centerX, y: y - centerY };
  if (data[i] === 0) {
    pixels.push(pixel);
  }
  x++;
  if (x === canvas.width) {
    x = 0;
    y++;
  }
}
pixels.forEach(({ x, y }, index) => {
  const tile = document.createElement("div");
  tile.style.setProperty("--p-x", `${x}`);
  tile.style.setProperty("--p-y", `${y}`);
  tile.style.setProperty("--p-i", `${index}`);
  tile.style.setProperty("--p-r", `${Math.random()}`);
  tile.style.setProperty("--p-r2", `${Math.random()}`);
  tiles.appendChild(tile);
});

document.addEventListener("click", () => {
  tiles.classList.remove("show");
  requestAnimationFrame(() => {
    tiles.classList.add("show");
  });
});

Frontend Forever App