div.container
  div
View Compiled
html, body { 
  height: 100%; 
  margin: 0; 
  overflow: hidden; 
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.container {
  width: 100vw;
  position: relative;
}

.container div {
  transition: all 1s ease-in;
  text-shadow: 3px 3px 7px #5752FF;
  font-size: 20rem;
  position: absolute;
}

.container div::after {
  content: '(';
}
const setRAFInterval = (cb, interval) => {
  let now = Date.now;
  let startTime = now();
  let endTime = startTime;
  let loop = () => {
    this.intervalTimer = requestAnimationFrame(loop);
    endTime = now();
    if (endTime - startTime >= interval) {
      startTime = now();
      endTime = startTime;
      cb();
    }
  }
  this.intervalTimer = requestAnimationFrame(loop);
  return this.intervalTimer;
};

const getRandomNum = (max) => Math.floor(Math.random() * Math.floor(max));
const randomColor = () => {
  const color = Math.floor(Math.random()*16777215).toString(16);
  return color.length !== 6 ? `f${color}` : color;
};
const root = document.documentElement;
const container = document.querySelector('.container');

const fragment = document.createDocumentFragment();
for(let i = 0; i < 20; i++) {
  let div = document.createElement('div');
  fragment.appendChild(div);
}
container.append(fragment);

const divs = document.querySelectorAll('.container > div');
divs.forEach(div => {
  div.style.setProperty('left', `${getRandomNum(50)}%`);
  div.style.setProperty('right', `${getRandomNum(50)}%`);
  div.style.setProperty('font-size', `${getRandomNum(20)}rem`);
  div.style.setProperty('text-shadow', `${getRandomNum(20)}px ${getRandomNum(20)}px ${getRandomNum(20)}px #${randomColor()}`);
  div.style.setProperty('transform', `rotate(${getRandomNum(360)}deg)`);
});
setRAFInterval(() => {
  divs.forEach(div => {
    div.style.setProperty('left', `${getRandomNum(39)}%`);
    div.style.setProperty('right', `${getRandomNum(50)}%`);
    div.style.setProperty('font-size', `${getRandomNum(20)}rem`);
    div.style.setProperty('text-shadow', `${getRandomNum(20)}px ${getRandomNum(20)}px ${getRandomNum(20)}px #${randomColor()}`);
    const sign = getRandomNum(2) === 1 ? '+' : '-';
    div.style.setProperty('transform', `rotate(${sign}${getRandomNum(360)}deg)`);
    div.style.setProperty('filter', `
  blur(${getRandomNum(5)}px) brightness(${getRandomNum(120)}%) hue-rotate(${getRandomNum(40)}deg)`)
  });
}, 3000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.