Pose Animator – Bring Your SVG Files to Life Via Webcam

by Taylor Slattery | August 2, 2020

People are learning to do some pretty creative things with their cameras. Snapchat first introduced the world at large to filters a while back, but recently things have been taken to a new level. Thanks to software like Spark AR Studio, everyone is making filters. It’s no longer just about touching up your pictures before uploading them to Instagram. If you want, you can give yourself an entirely new face. People are finding fresh and creative ways to utilize motion-tracking to create immersive, fun, and artistic expressions.

Recently, I learned of something in a similar vein, called Pose Animator. The project was created by Shan Huang, or Yemount as she’s known on GitHub. Although Pose Animator is not an official Google product, Shan does work as a Creative Technologist at Google. Similar to the previously mentioned Instagram filters, Pose Animator utilizes your camera as a source of data. It runs in a browser though, and at the moment, only Chrome and iOS Safari are supported. However, this does mean that Chrome on Android is supported as well, so if you’re on your phone, you can still give it a try.

What makes it unique is that it runs in your browser via JavaScript. It uses PoseNet and FaceMesh to apply your movements to an SVG file of your choice. A predetermined skeletal structure is then matched with key points in the static pose found in your SVG file. This serves as the base to which your recorded movements are then applied. Movements are captured by both the body and face, giving you the ability to control the mouth, eyebrows, arms, and legs.

It’s pretty incredible to see what a wide variety of projects can be realized using only JavaScript. I previously wrote about Zdog, another interesting JavaScript project, which was a pseudo-3D modeling engine. It’s always cool to see projects that make coding fun and approachable, especially those like Pose Animator that invite non-coders to join in. If you’re an illustrator and have some SVGs you’ve made, be sure to try bringing them to life. If you are so inclined, you can find the code on GitHub here. If you would like to try out a demo, you can find that here.

Taylor is the Managing Editor of Notes on Design. Taylor is a graphic designer, illustrator, and Design Lead at Weirdsleep.

For creatives seeking a thorough training in illustration and graphic design, Sessions College offers accredited fully online illustration certificate and illustration degree programs. Contact Admissions for more information.

Thinking about stretching your Adobe Illustrator skills? Sessions College offers beginner and advanced online Adobe Illustrator courses and a wide variety of graphic design courses and programs for the creative professional.

Interested in learning Adobe Animate? Sessions College offers beginner and intermediate Adobe Animate courses and a wide variety of digital media courses and programs for the creative professional.

This blog is powered by Sessions College, the leading online school of visual arts.