JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="80" height="80" style="position:fixed; top:5px; left:5px;">
  <g transform="translate(40,40)">
    <g id="a1" transform="rotate(40)">
      <circle cx="0" cy="5" r="4" fill="#1c1f26" />
      <circle cx="4.33" cy="-2.5" r="4" fill="#1c1f26" />
      <circle cx="-4.33" cy="-2.5" r="4" fill="#1c1f26" />
    </g>
    <circle cx="0" cy="0" r="37" fill="none" stroke="#1c1f26" stroke-width="1" />
    <g id="a2" transform="rotate(160)">
      <circle cx="0" cy="37" r="3" fill="#1c1f26" />
    </g>
  </g>
</svg>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros dui, tincidunt vel odio vel, elementum ullamcorper nulla. In rutrum felis lacus, eu scelerisque nulla lacinia id. Duis enim nibh, viverra quis suscipit volutpat, consequat eu tellus. In id ante et nulla laoreet gravida. Quisque urna arcu, consectetur nec lacus ac, consectetur posuere erat. Nullam justo tellus, fringilla ut neque ac, porta vulputate erat. Sed lobortis, ligula vitae auctor adipiscing, dui urna commodo massa, eu mattis orci dolor sit amet quam. Curabitur porta suscipit lorem quis vehicula. Donec vitae interdum nibh. Mauris sit amet purus at orci dignissim iaculis. In accumsan sagittis mi, vel vulputate leo adipiscing ut. Praesent enim leo, pulvinar eu feugiat mollis, tincidunt a massa. Praesent pretium dictum enim. Curabitur eget feugiat nisi, a mattis justo. Nulla consequat laoreet quam ac sollicitudin.</p>
<p>Vestibulum ornare leo leo, nec iaculis ante pharetra vel. Curabitur ac quam bibendum, iaculis sem eget, mollis risus. Proin vel semper tellus. Vestibulum a orci et eros condimentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ultrices semper mollis. Etiam luctus hendrerit nisi non varius.</p>
<p>Pellentesque risus nunc, consectetur bibendum nibh nec, euismod tincidunt purus. Cras egestas consectetur nunc, a placerat lectus dapibus nec. Phasellus rhoncus diam et auctor tincidunt. Sed vitae eros dui....

CSS

body { margin-left:100px; }

JavaScript

$(window).scroll(function(){
  var s = ($(window).scrollTop() / ($(document).height() - $(window).height()));
  var r1 = 40+106*s, r2=160-320*s;
  $("#a1").attr("transform","rotate("+r1+")");
  $("#a2").attr("transform","rotate("+r2+")");
});