Loading: Infinite path drawing
An example of creating an infinite path drawing loading animation with Motion. This example uses svgEffect to animate the path. svgEffect is the next-generation Motion SVG renderer that makes it easy to create these infinitely looping drawing animations. In a future version of Motion it'll be possible to just use the animate function below without the svgEffect setup.
Introduction
The Infinite path drawing example shows how to create a smooth, infinitely looping SVG path animation. A segment of an infinity symbol continuously traces along the path, creating a mesmerizing loading indicator.
This example uses svgEffect for rendering animated SVG properties, motionValue for creating animated values, and animate for driving the animation.