SVG animation tests with svg.js library
Example 1: animating SVG "blob" shapes by morphing two different shapes drawn with bezier curves. SVG data was imported from this file generated in Adobe Illustrator and created in various layers. The layer names can be easily referenced in the code for various operations. This example also provides a simple click event handler.
Example 2: adds targeting for multiple elements within a single SVG, and includes more goodies in the event handlers.
Example 2b: adds easing to animations with easing plug-in.
Example 2c: adds better morphing support pathmorphing plug-in.
Example 3: adds support for multi-step animations and transforms.
Example 3b: adds support for event-driven audio.
Example 4: feeble, yet notable attempt to reference SVG data from a customized JSON data structure, which may include additional objects, such as flags for tracking object state, etc. However might make more sense in this case to simply reference the data from external SVG file.
Lava Lamp: Here's the first "practical" application of all this nonsense which, ironically, is even more nonsensical. A clipping path is introduced here to "contain" the blobs into a neat little lava lamp shape!
Example 5: Adds capability to reference data from external SVG file.
Example 5-poly: Introducing polygons to the mix! This example takes an external SVG file and morphs 2 layers containing similar polygons.
Example 5-path: Same as previous example but for SVG files only containing paths.
Example 5-path-poly: This example combines the last two into one version that is somewhat more path/polygon agnostic. More work to be done on cleaning up the code into something much more concise, with ability to handle all kinds of shapes that may be present in a more complex SVG.
Fire: Another real-world example building on the previous examples to create an animated "fire" containing paths and polygons from a 2-layer SVG file created in Adobe Illustrator.
More to come...