Generate anim frames

by phloe

HTML

<div class="frame"><div></div></div>

CSS

body {
  background-color: #CCC;
}
.frame {
  float: left;
  width: 32px;
  height: 32px;
  background-color: #000;
  position: relative;
}

.frame div {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  inset: calc(50% - 4px) auto auto 0;
  transform-origin: 16px 50%;
  transform: rotate(var(--rotate, 0deg));
}

JavaScript

const frame = document.querySelector(".frame");

const count = 120;
for (let i = 0; i < count; i++) {
	const frameClone = frame.cloneNode(true);
  frameClone.style.setProperty("--rotate", `${(i / count) * 360}deg`);
	document.body.appendChild(frameClone);
}