mixin layer(x1, len, n)
  - const x2 = x1 + len;
  if n > 0
    g()
      line(x1=`${x1}` y1="50" x2=`${x2}` y2="50")
      animateTransform(
        attributeName="transform"
        type="rotate"
        from=`-120 ${x1} 50`
        to=`240 ${x1} 50`
        dur="2400s"
        repeatCount="indefinite")
      +layer(x2, len * 1.04, n - 1)

svg(viewbox="0 0 100 100" id='ang')
  +layer(50, 4, 80)

div
  input(type="range" min="0" max="1000" value="666" oninput="settime(this.value)" onchange="settime(this.value)")
  button(onclick='toggle()') play/pause

body
  background-color: #000
  display: flex
  justify-content: center
  align-items: center

#ang
  height: 100vh
  margin-right: 20px

line
  stroke: #fff
  stroke-width: 0.3

div > *
  display: block
  margin: 0 auto

div > *:not(:first-child)
  margin-top: 10px

const svg = document.getElementById('ang');
const vals = 1000;

const settime = v => {
  svg.setCurrentTime(parseInt(v) * (2400 / vals) + 800)
};

const toggle = () => {
  svg[`${svg.animationsPaused() ? 'un' : ''}pauseAnimations`]();
};