JSFiddle - React, Tailwind, and code Playground

by shadowphiar

HTML

<div id="toplevel">
</div>

CSS

.circle {
  display: block;
  position: absolute;
  width: 2px;
  height: 1em;
  background-image: url('https://www.intensity.org.uk/images/vbar.png?v=2');
  background-size: 64px 30em;
  background-position: -32px -25.4em;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  content: '';
}

JavaScript

const toplevel = document.getElementById('toplevel');
for (let x=0; x<512; x++)
{
  let i = document.createElement('div');
  i.classList.add('circle');
  i.style.fontSize = (40 + (x/150.0)) + "px";
  i.style.left = (20 + 2*x) + "px";
  i.style.top = 50 + "px";

  toplevel.appendChild(i);
}