JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">

<div class="square">
  <!--
    <div class="arrow-line">
      <div class="arrow">→</div>
    </div>
    -->
</div>

CSS

* { box-sizing: border-box; }
body {
  background-color: transparent;
  font-family: system-ui;
}
.square {
  display: flex;
  width: 200px;
  height: 200px;
  background-color: white;
  justify-content: center;
  align-items: center;
  margin: 10px;
  text-align: center;
  position: relative;
}
.title {
  font-weight: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-family: 'Fredoka One', cursive;
}
.arrow-line {
  position: absolute;
  left: 0;
  display: block;
  width: 100px;
  text-align: left;
  transform-origin: center right;
}
.arrow {
  display: inline;
  font-size: 1rem;
  font-weight: 600;
  animation: move 1s infinite ease-in-out;
  margin-left: -10px;
}

/* .arrow {
  position: absolute;
  display: inline-block;
  font-size: 2rem;
  animation: pulse 2.5s infinite;
  opacity: 0.1;
  padding-left: 1px;
  font-weight: bold;
} */

@keyframes move {
  0% {
    margin-left: -5px;
  }
  50% {
    margin-left: 30px;
  }
  100% {
    margin-left: -5px;
  }
}

JavaScript

const square = document.querySelector('.square');

const numArrows = 30;
const animationDuration = 4;

for (let i = 0; i < numArrows; i++) {
  const arrowLine = document.createElement('div');
  arrowLine.classList.add('arrow-line');
  const arrow = document.createElement('div');
  arrow.classList.add('arrow');
  arrow.innerText = '🔥 →→';
  arrowLine.appendChild(arrow);
  
  const rotation = (360 / numArrows) * i;

  arrowLine.style = [
    `transform: rotate(${rotation}deg);`,
  ].join('');
  
  arrow.style = [
    `animation-delay: ${(animationDuration/numArrows) * i}s;`,
  ].join('');

  square.appendChild(arrowLine);
}