I’ve taken a cue from one of my favorite young designers and have dipped a toe into SVG animation. Thanks to Lauren and her insatiable quest for “doing all the things” I had researched this a bit with her a few months back which made doing this thing much easier.
I imported a photo into Adobe Illustrator and traced a few simple lines around my person.I cleaned up the lines using the simplify command and the smooth tool. From there, I consolidated the lines to limit the animation in some cases retracing some areas to make it continuous. Then all you have to do is export as SVG and open in a text editor like Sublime Text. Illustrator creates the code and you can edit it just like straight html/xml.
See the Pen Sketch Photo by Kristen Zirkler (@kristenzirkler) on CodePen.