How to animate SVG image without any library?

I have been learning web development for quite a while now and every time I want to animate my SVG image, I use GSAP from greensock. Do not get me wrong, I think GSAP is a great tool but I am not interested in animating using GSAP. Instead, I want to create my own library to achieve the SVG animation. The reason why I want to create my own library is to understand how the technology such as GSAP was created. For me, I am only interested in the technology and the technicality that go on behind the scene of any displayable contents. For this reason, I often create game engines and not a game simply because I am not interested.

So can anyone suggest to me on how to get started in creating my own SVG animation library? I actually been searching for hours on Google and all the information that I received is just more pre-built libraries for animating SVG which is not what I want.

Beside from creating my own SVG animation library, I am particularly interested in understanding more about the mathematics and the code behind the morph animation. In the past, I have used MorphSVG plugin but now I want to create the back end technology that drives the morph animation. Hence, it would be greatly appreciated if someone could explain to me how I can go about writing such animation from scratch.