JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="box"></div>

CSS

div#box {
  width: 570px;
  height: 570px;
  border: 1px solid white;
  position: absolute;
  top: 200px;
  margin-left: -100px;
  border-radius: 50%;
  left: 50%;
  transform-origin: bottom;
  border: 1px solid white;
}
body {
  background: black;
}
div.stick {
  width: 5px;
  height: 50%;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: 0px;
  transform-origin: bottom;
}
div.fragment {
  width: 1px;
  height: 15px;
  background: red;
  position: absolute;
  top: -25px;
  left: 0;
}
div.stick:nth-child(odd) div.fragment {
  animation: a 1s cubic-bezier(0.25, 0.1, 0.24, 1.16) both reverse infinite;
}
div.stick:nth-child(even) div.fragment {
  animation: b 1s cubic-bezier(0.25, 0.1, 0.24, 1.16) both reverse infinite;
}
/* @keyframes a {
  from { opacity: 0; transform: translateY(100px);}
  100% { opacity: 1;transform: translateY(0px); background: blue; }
}
@keyframes b {
  from { opacity: 0; transform: translateY(-100px);}
  100% { opacity: 1;transform: translateY(0px); }
} */

JavaScript

var a = document.querySelector('#box');

var paint = function(n){
		var deg = 0;
		var plus = 360 / n;
    var delay = 0.1;
		for(var i = 0; i < n; i++){
    	var element = document.createElement('div');
      var innerElement = document.createElement('div');
      innerElement.classList.add('fragment');
      element.classList.add('stick')
      a.append(element);
      element.append(innerElement);
      /* innerElement.style.animationDelay = delay + 's' */;
      element.style.transform = 'rotate(' + deg + 'deg)';
      deg+= plus;
      delay += 0.05;
    }
}
paint(60);