As soon as I saw the new YouTube Player and its new morphing play/pause button, I wanted to understand how it was made and replicate it myself.
From my analysis it looks like YouTube is using SMIL animations. I could not get those animations to work on browsers other than Chrome and it appears that they are deprecated and will be removed. I settled for the following technique:
Define the icon
pathelements inside a
defselement so that they are not drawn.
Draw one icon by definining a
xlink:hrefattribute points to one of the
paths defined in the previous step. Simply changing this attribute to point to the other icon is enough to swap them out, but this switch is not animated. To do that,
usewith the actual
pathwhen the page is loaded.
Use D3 transitions to morph one
pathinto the other when the button is clicked. Other SVG libraries like Snap.svg or Raphaël can also be used for this effect.
Finally, it's important to point out that the number and order of the points of each
path affect the way in which they morph into one another. If a
path is drawn clockwise and another is drawn anticlockwise or if they are not drawn using the exact same number of points, animations between them will not look smooth. This is the reason the play button - a triangle - is drawn using 8 points instead of just 3. There's definitely more to be said on this subject.
Have any tips or suggestions? Comment and fork away :)