cups.svg

- Implemented using <object> so I made some adjustments in main.js to make it wait until the svg content loaded.

- The svg consists of 2 <path> elements with the coordinated defined by the d attribute.

- Reference

01c_shapesPathed.svg

- 01a_shapes.svg consisted of a <circle>, <polygon>, <rect>.

- Neither <circle> and <rect> use d or points attributes so I added anchor-points manually to convert them.

- The output was 01b_shapesAddedAnchor.svg but the attributes to define the coordinates were not consistent. <path> uses d, <polygon> uses points.

- Not certain if it's best practice but manually converted them all to <path> elements and adjusted the d attribute.

02_shapesEqualAnchors.svg

- Tried adding the same number of anchor points to each shape in the hopes the transition would be more smooth.

- Excluding the pentagon-to-cross transition, it's either worse or about the same.

- Automated shape-shifting animation would probably need a more manual approach if the transition needs to be more elegant.

03_animateAlongPath.svg

- In this case, <path> and <circle> are in the same <object>.

- If it's an <img>, this should be able to cater for it.

- If it's a more complicated svg; say a rocket + jet flame, then it would probably be best practice to animate it all in snap.svg.

- What if its a "svg-sprite-animation" or a "svg-@keyframes-animation"?

- Reference

04_animateAlongPathClick.svg

- Same as above but will activate on click.

- Interesting issue, click event listener didn't bind to <object>.

- In the end I binded the click event to <contentDocument>.

- Kept record in "ERROR_LOG". CMD+F => Similar/Related to next problem?.

05_ghostSprite.svg + 05a_ghostPath.svg

- Wanted to see if having 2 separate files, 1 image, 1 path would work.

- Unsuccessful

- Perhaps an issue with coordinates when it's in two files?

- Or because it's in 2 different objects?

06_ghostSprite.svg

- 1 File with Ghost & Path. Hover to show path. Bigger to make easier to see.

- 2 sprites, but made into an A-B-A arrangement to cater for steps(2).

- Implemented 'walls' to hide the Ghost instead of mask.

- Visual bug in Firefox.

- See 06_ghost.sketch for actual svg.

- Will test similar implementation with mask next.

07_ghostSprite.svg

- 1 File with Ghost & Path. Hover to hide path. Bigger to make easier to see.

- 2 sprites, but made into an A-B-A arrangement to cater for steps(2).

- Used masks, thought there might be compatability issues but seems ok.

- See 07_ghost.sketch for actual svg.