<div class="sin cos">
  <div class="circle red rotate"></div>
  <div class="circle blue girate"></div>
</div>

:root {
  --counter: 0;
}

body {
  background: #444;
}

// sinus function
.sin {
  --taylor1: var(--counter);
  --taylor2: calc((var(--counter) * var(--counter) * var(--counter)) / 6);
  --taylor3: calc((var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter)) / 120);
  --taylor4: calc((var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter)) / 5040);
  --taylor5: calc((var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter)) / 362880);
  --sin: calc(var(--taylor1) - var(--taylor2) + var(--taylor3) - var(--taylor4) + var(--taylor5));
}

// cosinus function
.cos {
  --cos-taylor1: 1;
  --cos-taylor2: calc((var(--counter) * var(--counter)) / 2);
  --cos-taylor3: calc((var(--counter) * var(--counter) * var(--counter) * var(--counter)) / 24);
  --cos-taylor4: calc((var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter)) / 720);
  --cos-taylor5: calc((var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter) * var(--counter)) / 40320);
  --cos: calc(var(--cos-taylor1) - var(--cos-taylor2) + var(--cos-taylor3) - var(--cos-taylor4) + var(--cos-taylor5));
}

.red {
  background: LightCoral;
}

.blue {
  background: LightBlue;
}

.circle {
  --radius: 60px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - (var(--radius) / 2));
  left: calc(50% - (var(--radius) / 2));
  mix-blend-mode: screen;
  will-change: transform;
}

.rotate {
    transform: translate(
    calc(var(--sin) * var(--radius)),
    calc(var(--cos) * var(--radius)));
}

.girate {
    transform: translate(
    calc(var(--sin) * var(--radius) * var(--counter)),
    calc(var(--cos) * var(--radius)));
}

//Feeds numbers between -pi and pi to css
function step(timestamp) {
  document.documentElement.style.setProperty('--counter', ((timestamp / 1000) % (Math.PI * 2)) - Math.PI); // -pi to +pi
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);