<div id="main"></div>
#main {
  height: 100vh;
  width: 100vw;
}

const main = document.querySelector("#main");
const mainWidth = main.clientWidth;
const mainHeight = main.clientHeight;
console.log(mainWidth, mainHeight);

function addGhost() {
  const ghost = document.createElement("div");
  ghost.textContent = "👻";
  styleGhost(ghost);
  main.appendChild(ghost);
}

function styleGhost(ghost) {
  ghost.style.position = "absolute";
  ghost.style.left = `${Math.random() * mainWidth}px`;
  ghost.style.top = `${Math.floor(Math.random() * mainHeight)}px`;
  ghost.style.fontSize = `${Math.random() * 10}em`;
}
const interval = setInterval(() => {
  requestAnimationFrame(addGhost);
}, 2);
setTimeout(() => {
  clearInterval(interval)
},5000)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.