JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="wrap">
  <div id="t" class="t"></div>
  <div class="t"></div>
</div>

CSS

body{
  background-color: #3b2b56;
  overflow: hidden;
}

.t{
  width: 5vmin;
  height: 5vmin;
  background-color: #746193;
  position: absolute;
  transform-origin: center center;
  border-radius: 50%;
}

#t{
  border-radius: 0;
}

#wrap{
  position: relative;
  width: 5vmin;
  margin: calc(50vh - 2.5vmin) auto;
  height: 5vmin;
}

JavaScript

/**
 * Sine & Cosine combinations
 */

var el = document.getElementById('t'),
		dia = 900,
    rotate_rate = -25,
    elapsed = Math.PI * 1500,
    start = Date.now();
    
var a = function(){
	var t = elapsed / 1000,
      s = [
      	'translateX(' + (Math.cos(t) * dia) + '%)',
        'translateY(' + (Math.sin(t) * dia) + '%)',
        //'rotate(' + ((t % (360 / rotate_rate)) * rotate_rate) + 'deg)'
      ];
  el.style.transform = s.join(' ');
	elapsed += Date.now() - start;
  start = Date.now();
  requestAnimationFrame(a);
}

a();