This time I’m working on other—slightly more complex—forms of animation. I emphasize slightly.
In the above case, I’ve used Illustrator to make a skull in two parts. There’s an upper part in its own group labeled “Skull” and a lower part in a group labelled “Jaw”. Even though these are groups, the contents of each group are single compound paths. Then there are a few parts to the bulb. There’s the glass bulb and plug in one layer labeled “Bulb”, the light fill labeled as “Glow”, and the halo of light labeled as “Radiance”. All these layers are on a 1000×1000″px” field. I’ve learned that setting my SVGs to those dimensions helps with the transform-origin property. Use the grid in Illustrator, set to 100 with a subdivision of 10. This makes finding the origin by percentage a lot easier. Since SVGs are scalable, the real size barely matters.
Using the Illustrator grid, it was easy to select the transform origin for the jaw at 50%(x) and 80%(y). From there it was just a matter of setting up an animated rotation.