How to rotate SVG on its own axis?

Question

Animation

Given an SVG image, I'm trying to rotate the gear on its axis, instead it spins around an unknown center to me. What am I doing wrong?
https://codepen.io/olegoriginal/pen/NWWdZeE

Answer 1

transform-origin: 50% 50%;
transform-box: fill-box ;