Złożony ruch obiektu 3D: technologie CSS, SVG, JS

Question

Cześć.

Stworzyłam obiekt 3D w technologii CSS - jest to strzałka.
Stworzyłam także z wykorzystaniem technologii: JS oraz SVG ścieżkę.

Chciałabym stworzyć animację. Otóż zależy mi na tym, aby strzałka rotowała się w taki sposób, aby stworzona przeze mnie ścieżka prezentowała drogę pokonywaną przez czubek strzałki. Strzałka początkowo stoi równolegle do osi Z, następnie rotuje się, powodując odchylenie od osi Z.

Mój kod znajduje się tutaj: https://codepen.io/kolekole/pen/BXBOXd

Próbowałam to zrobić zarówno dodając kilka ruchów - wówczas wektor poruszał się tak, jak chciałam, ale ruch nie był płynny. Zaś w przypadku, kiedy zrobiłam to w jednym ruchu, ruch co prawda jest płynny, ale niestety nie jest zsynchronizowany z narysowaną ścieżką. Czy istnieje sposób, aby zsynchronizować ten ruch? Animację tę robię już kilkanaście dni i niestety, nic sensownego nie wyszło...

Będę wdzięczna za każdą pomoc