@property --turn {
  initial-value: 0deg;
  inherits: false;
  syntax: '<angle>';
}

@property --offset {
  initial-value: 0ms;
  inherits: false;
  syntax: '<time>';
}

svg {
max-height: 100svh;
}

g {
  animation: turn var(--duration) var(--offset) infinite ease-in-out;
  --offset: calc(var(--f) * 150ms);
  --duration: 4000ms;
}

@keyframes turn {
  15% {
    --turn: 0deg;
  }
  25% {
    --turn: 70deg;
  }
  30% {
    --turn: 50deg;
  }
  35% {
    --turn: 60deg;
  }
  65% {
    --turn: 60deg;
  }
  75% {
    --turn: -10deg;
  }
  80% {
    --turn: 10deg;
  }
  85% {
    --turn: 0deg;
  }
  100% {
    --turn: 0deg;
  }
}