EDIT: Question has been edited to narrow scope, but I felt it helpful to keep the original information. Look past the conclusion section for edits.
Original Question
Good day everyone! I'd like to learn the logic behind SVG morphing. Just as a quick precursor, I know that there are questions similar to this on Stack Overflow already, but as far as I know this is not a duplicate. If you read a bit further you'll see what I mean.
Why?
I'd like to morph one SVG into another but I need a cross-browser solution. I've found solutions such as GreenSock, but I can't afford their licenses.
What?
In the spirit of an evolving developer, I've decided to expand my horizons a bit and find out how to make a personal, re-usable cross-browser SVG morph solution. Though, before starting I'd like to understand approximately what I'm aiming for.
Details (My main question)
I'm hoping I could get some insight on the logic behind SVG morphing. I.E. How might vertices be matched together and tweened, how might vertices be seamlessly converted from a sharp corner to a bezier curve, what is the math behind these conversions, how might it be possible to morph SVGs of different vertex count (if you happen to have any ideas), how would you prevent vertices from matching to multiple correspondents in the target shape, etc.?
I'm much more interested in the logic, the computer science, the mathematics. If you're willing to point me in the right direction in terms of what built-in Javascript functions I need to use, then I would greatly appreciate that, but it is not necessary. Once I have an idea of the logical direction I need to take, I can easily look up that documentation.
For example sake, making things consistent in responses, what if I wanted to morph a circle into a square? (There are obviously easier ways to do that, but using this just makes it simpler to visualize)
Disclaimers
(1) I'm very well versed in Javascript, its syntax, and intricacies. I've just never dealt with vectors in Javascript, I'm unsure how vertices are targeted and manipulated.
(2) I'm NOT asking for a full, in-depth tutorial on how to accomplish this, I know that's not what any of us are here for. Rather, I'd appreciate a backbone, a push in the right direction, and some insight into the nuances of this process.
TL;DR
What insight could you provide into the logic, science, or mathematics behind morphing from one SVG to another (simple or complex).
Conclusion
Thank you all for any insight you can provide! This is by no means immediately necessary, so please feel free to take your time in responding.
EDIT:
This question was put on hold for being too broad. After revisiting what I wrote, I completely understand. Thus, here is, more specifically, what I'd like help with.
Lets say I have vector A, from illustrator:
<svg id="Layer_1" x="0px" y="0px" width="72px" height="72px" viewBox="0 0 72 72" . . . >
<polygon style="fill:#FFFFFF;" points="72,72 36,72 0,72 0,36 0,0 36,0 72,0 72,36 "/>
</svg>
And vector B:
<svg id="Layer_1" x="0px" y="0px" width="72px" height="72px" viewBox="0 0 72 72" . . .>
<path style="fill:#FFFFFF;" d="M72,36c0,9.941-4.029,18.941-10.544,25.456S45.941,72,36,72c-9.938,0-18.937-4.027-25.451-10.539
C4.031,54.945,0,45.943,0,36c0-9.941,4.029-18.941,10.544-25.456C17.059,4.029,26.059,0,36,0c9.94,0,18.939,4.029,25.455,10.543
C67.971,17.058,72,26.059,72,36z"/>
</svg>
Vector A is a perfect square with 8 evenly spaced vertices, Vector B is a perfect circle with 8 evenly spaced vertices.
If I wanted to morph Vector A into Vector B, how might I go about it in Javascript? I understand that I would have to use a loop and actively move the points to their designated destinations, but, firstly, what would be the best method of targeting and moving the individual vertices? Secondly, what is the best method of determining which position the vertex should move to, and how could that be actively tracked. For something like this where the vertices are perfectly spaced, with multiple points equidistant from a singular target, how would I logically go about matching the correct vertices for the most aesthetic result? Third, in this example I am converting a polygon element into a path element, is that important? and if so how might I get around that obstacle.
Again, I'm most interested in the logic, but specific code is always appreciated. And just to reiterate, I'm not looking for a solution to SVG morphing, those are abundant, I'm hoping to understand the process so that I may recreate it, to expand my development knowledge.
Thank you very much! All input is appreciated.
I created a simple library to merge two images in javascript, however it does not work with SVGs ... but maybe i can still help with few suggestions:
once you have matching points it should be easy: - lets call points in picture 1 O1 .. Ox (O as origin ;) - lets call points in picture 2 D1 ...Dx (D as destination) - lets call the time when we start morphing T1 - and lets call the time when we stop T2 (so T2-T1 is the length of animation)
based on T2 and T1 you can calculate the number of frames you will need to show. then you can calculate the positions for each frame. basicly the frame at T1 should be picture 1 ... frame at T2 should be picture 2 ... lets call number of frames NF.
for in between frames you need to calculate the new position of your points, lets call them F1_1 ... F1_x (frame one points from 1 to x). Lets call a specific frame Fx (so point in specific frame is Fx_x)
we can then calculate the positions of points for each frame:
F1_x = Fx*(distance from Tx to Px)/NF
to explain .... we take a point from first image and a point from second and calculate the distance between them and split this distance by number of frames we want to show. then for each frame we multiply this distance by frame number.
so now we have our point positions for each of the frames. if its SVG that is probably it already. if its multicolor you might want to mix the colors from image 1 and image 2.
You could do that in the same way as you calculated point positions .... take color at the start ... take color at the end. find the difference, then keep changing in small steps, where number of steps equals number of frames you want to show.
you can take a look at my blogpost (with link to github project) about image morphing library i wrote: http://peter.pisljar.si/#!/en/projects/image_morph_js
however .... to find the matching point it might be a bit more work.