Loading: Infinite path drawing

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>

The second path starts with opacity="0" because we'll control its visibility through Motion.