JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<svg id="svg"></svg>

CSS

* {
  overflow: visible;
}

#svg {
  width: 100%;
  height: 100%;
  animation: fade_in 0.8s linear forwards;
}

#svg svg {
  transform-box: border-box;
  transform-origin: center;
}

#svg rect {
  transform-box: fill-box;
  transform-origin: center;
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  animation-iteration-count: infinite;
  opacity: 0;
}

#svg path {
  transform-box: fill-box;
}


@keyframes fade_in_out {
  0% {
    opacity: 0%;
    transform: translateY(200%) scale(0.7);
  }

  15%,
  40% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  55%,
  100% {
    opacity: 0%;
    transform: translateY(-200%) scale(0.7);
  }
}

@keyframes fade_in {

  0%,
  60% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

JavaScript

const svg = document.getElementById('svg')
const squareSize = 16
const colors = [
  '#ffd100',
  '#34657f',
  '#7ba7bc',
  '#ff6a13',
  '#a7a8aa',
  '#101820',
]

const setup = () => {
  let squareSmash
  window.clearInterval(squareSmash)
  svg.innerHTML = ''
  const windowWidth = window.innerWidth
  const windowHeight = window.innerHeight
  const squaresInX = Math.floor((windowWidth / squareSize) + 1)
  const squaresInY = Math.floor((windowHeight / squareSize) + 1)
  svg.setAttribute('viewBox', `0 0 ${windowWidth} ${windowHeight}`)


  const createRandomSquare = () => {
    const fillStyle = colors[Math.floor(Math.random() * colors.length)]
    const svgns = "http://www.w3.org/2000/svg";
    const parentSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    const rect = document.createElementNS(svgns, 'rect');
    const randomCol = Math.floor(Math.random() * squaresInX)
    const randomRow = Math.floor(Math.random() * squaresInY)
    const sizeRoll = Math.floor(Math.random() * 100)
    let sizeMultiplier = 1
    if (sizeRoll > 89) sizeMultiplier = 2
    if (sizeRoll > 96) sizeMultiplier = 3
    rect.setAttribute('height', squareSize * sizeMultiplier)
    rect.setAttribute('width', squareSize * sizeMultiplier)
    rect.setAttribute('x', '100%')
    rect.setAttribute('y', '100%')
    rect.setAttribute('fill', fillStyle)
    parentSVG.setAttribute('height', squareSize * sizeMultiplier)
    parentSVG.setAttribute('width', squareSize * sizeMultiplier)
    parentSVG.setAttribute('viewBox', `0 0 ${squareSize * sizeMultiplier} ${squareSize * sizeMultiplier}`)
    parentSVG.setAttribute('x', randomCol * squareSize)
    parentSVG.setAttribute('y', randomRow * squareSize)
    rect.style.animationName = `fade_in_out`
    rect.style.animationDuration = `${Math.floor((Math.random() * 10000) + 5000)}ms`
    rect.style.animationDelay = `${Math.floor((Math.random() * 10000) - 5000)}ms`
    parentSVG.appendChild(rect)
    svg.appendChild(parentSVG)
  }

  for...