In-depth path morphing w/ Shape Shifter
summary
A web app called Shape Shifter automatically makes incompatible SVG paths animatable for Android by adding and placing dummy points, splitting subpaths, exporting AnimatedVectorDrawables, and using bioinformatics algorithms (dynamic programming alignment, O(n²) at build time) to minimize travel distance. The uploader claims it turns hours of manual trigonometry into interactive fixes and an auto‑fix that usually produces usable morphs; triangulation experiments for complex splits prove interesting but aren’t always reliable.
AI-written summary · about
chapters (30)
- 0:00Intro
- 2:37Alex Lockwood
- 2:55Pat Murphy
- 3:26Examples
- 4:20Web examples
- 5:18Body
- 6:07SVG Path Data Step
- 7:32Object Animator
- 8:38Visualizing
- 9:17Translation
- 10:18Problem
- 11:19Undercover octagon
- 12:15Curves
- 13:27Undercover curves
- 13:57Point order matters
- 15:11Recap
- 15:45Why path morphing
- 17:25Problems with path morphing
- 19:58Demo
- 25:55Output
- 27:40Auto fix
- 28:58Assumptions
- 29:47Basic implementation
- 30:55Pros and cons
- 32:18Dynamic Programming
- 36:28Automating Paths
- 38:59Random Paths
- 39:51Learning Curve
- 41:38Why Shape Shifter
- 43:56Special Thanks
related talks
45mVector Workflows
16mTROUBLESHOOTING YOUR DESIGNER'S, AND VECTOR GRAPHICS_DONT
39mMeaningful motion design and how to implement it
25mAn SVG’s Tale
22mMaking Friends With SVGs
30mDown the SVG Rabbit Hole
22mLottie: Animating the bridge between designers and developers
22mTroubleshooting your designer's, and vector graphics