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.

JavaScript; MotionScore
Tutorial time: 5 min
Difficulty: Motion+

Matt PerryMay 27, 2025

Tutorial

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.

Get started

Start with an SVG containing two paths - a faded background path and the animated path:

<div class="container">
    <svg
        class="infinity-loader"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        width="200px"
        height="200px"
    >
        <path
            d="M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8"
            fill="none"
            stroke="var(--border)"
            stroke-width="1"
            stroke-linecap="round"
            stroke-linejoin="round"
        />
        <path
            id="loading-path"
            d="M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8"
            fill="none"
            stroke="var(--hue-1)"
            stroke-width="1"
            stroke-linecap="round"
            stroke-linejoin="round"
            opacity="0"
        />
    </svg>
</div>