JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<div class="square"></div>
<h1 id="logo">Copy <br>Arrow</h1>

CSS

body {
  background-color: transparent;
  font-family: system-ui;
}
.square {
  background-color: white;
  width: 200px;
  height: 200px;
  padding-top: 2px;
  padding-left: 4px;
}
.arrow {
  /* position: absolute; */
  display: inline-block;
  font-size: 2rem;
  animation: pulse 2.5s infinite;
  opacity: 0.1;
  padding-left: 1px;
  font-weight: bold;
}

@keyframes pulse {
  0% { opacity: 0.1; }
  15% { opacity: 0.1; }
  50% { opacity: 0.5; }
  85% { opacity: 0.1; }
  100% { opacity: 0.1; }
}
h1#logo {
  margin-bottom: 5px;
  border: 4px dashed dodgerblue;
  display: inline-block;
  padding: 2px 10px 4px;
  background-color: #e2ebff;
  text-align: center;
  position: absolute;
  top: 30px;
  left: 10px;
}

JavaScript

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

const maxWidth = 200;
const numArrows = 5 * 7;

for (let i = 0; i < numArrows; i++) {
	const arrow = document.createElement('div');
  arrow.classList.add('arrow');
  arrow.innerText = '←';

	const rot = Math.random() * 360;
  const x = Math.random() * maxWidth - 10;
  const y = Math.random() * maxWidth - 10;
  // const offset = Math.floor(Math.random() * 5);
  
  arrow.style = [
  	`transform: rotate(${rot}deg);`,
    // `left: ${x}px;`,
    // `top: ${y}px;`,
    `animation-delay: ${i * .08}s;`
	].join('');

	square.appendChild(arrow);
}