Pose Animator: Real-time SVG Puppeteering with TensorFlow.js

Pose Animator uses TensorFlow.js PoseNet and FaceMesh to animate SVG characters in real time via a full-body skeletal rig. It deforms vector paths with Linear Blend Skinning, carefully handling Bezier curves, and stabilizes motion using confidence-weighted smoothing and clipping. The project is open source with demos available and plans for mesh improvements, weight painting, and raster support.

Key Points

• Pose Animator brings SVG characters to life in the browser using TensorFlow.js PoseNet and FaceMesh for real-time motion capture.
• A predefined rig (90 keypoints, 78 bones) is embedded in the input SVG; Linear Blend Skinning deforms actual vector paths, not just bounding boxes.
• Bezier curves receive special treatment with separate weights for anchors and control points, plus a collinearity safeguard to preserve curve smoothness.
• Confidence-weighted temporal smoothing and threshold-based clipping reduce jitter and hide low-confidence (often off-screen) body parts.
• Future plans include mesh-based rigging improvements beyond LBS, weight painting tools, and support for raster images within SVGs.

Sentiment

The overall sentiment of the discussion is positive and enthusiastic, with a user sharing a successful personal project using similar technology and another showing engagement with the tool's potential applications.

In Agreement

• A user shared a positive experience building a similar body-tracking game for kids using TensorFlow.js, noting that it was easy and fun to build, aligning with the accessibility and utility of the underlying technology demonstrated by Pose Animator.