Move a dot along a path

This post shows how to create a dot moving along a path using SVG and JavaScript (ES2015). In this case it’s a dot, but of course it could be anything.

Create graphics with Inkscape

Let’s create an image consisting of a curve and an object that we want to move along that curve. I’m using Inkscape as SVG editor, but you can use Adobe Illustrator as well, or even create the SVG file manually.

The image shows the two elements we need. The curly curve is given the id curve, the dot has id dot. Note the position of the dot: it’s placed on the origin.

The (cleaned-up) code for that graphic would be something like this:

<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 700 200">
  <path
     id="curve"
     d="M 29.928125,119.32884 C 59.868756,78.85387 99.789596,30.283895 138.66049,30.104515 c 80.46172,-0.37133 90.87185,137.794285 140.7729,129.699295 40.35037,-6.54568 49.90105,-80.94994 86.53937,-78.86548 33.24073,1.89117 22.2547,70.77048 73.14399,70.77048 39.92084,0 58.65264,-56.66496 99.80211,-56.66496 49.90105,0 69.86147,80.94995 99.8021,48.56997" 
     style="fill: none; stroke: #000; stroke-width: 1" />
  <circle
     r="10"
     cy="0"
     cx="0"
     id="dot"
     style="fill: #dd1819" />
</svg>

Beware of group transforms

For more complicated graphics you will likely group elements or separate them in layers (which are actually groups too). In that case make sure you don’t have a transform applied to the group, to avoid problems addressed below. A simple trick to do this, is to ungroup and regroup the group. This transfers the transform data to the geometric elements inside the group.

Add graphics to HTML page

Simply paste the SVG element in the body of the HTML document, or, if using PHP, include the SVG file.

<?php include 'dot-on-bumpy-path.svg'; ?>

Put the dot on the spot

If we want to move the dot along the curve, obviously we first have to find out how to position the dot on a particular spot. To do this we’ll use two methods for SVG geometry: getTotalLength and getPointAtLength.

getTotalLength measures the total length of the path, while getPointAtLength gives the position on the path given the distance from the starting point. More on SVGGeometryElements.

Let’s use a parameter u running from 0 to 1. When u = 0, the dot is on the starting point, while u = 1 corresponds with the end point. To put the dot half way we could write this:

window.onload = () => {
    let dot = document.getElementById('dot');
    let curve = document.getElementById('curve');
    let totalLength = curve.getTotalLength();

    let u = 0.5;
    let p = curve.getPointAtLength(u * totalLength);
    
    dot.setAttribute("transform", `translate(${p.x}, ${p.y})`);
}

The following image shows the result in the browser window.

Group transform issue

Suppose we organized our SVG file and added the curve in a group or layer. In that case getPointAtLength would not take any transforms applied to that group into account, so translating the dot based on the outcome of getPointAtLength would probably put the dot on the wrong place. Therefor we warned above to avoid transforms on groups or layers in the SVG document.

Move it

Let’s encapsulate the code for dot in an object, so we can repeatedly move the dot, without making a mess of the code.

const dot = {
    sprite: null,
    track: null,

    // Initialize the dot: connect sprite and track properties with supplied SVG elements
    init: function(sprite, track) {
        this.sprite = document.getElementById(sprite);
        this.track = document.getElementById(track);
    },
    
    // Put the dot on its spot
    move: function(u) {
        const p = this.track.getPointAtLength(u * this.track.getTotalLength());
        this.sprite.setAttribute("transform", `translate(${p.x}, ${p.y})`);
    }
};

To control the animation, let’s create another object, anim, that can be started specifying the duration of the animation. This demo restarts the animation a second after it’s finished.

const anim = {
    start: function(duration) {
        this.duration = duration;
        this.tZero = Date.now();

        requestAnimationFrame(() => this.run());
    },
    
    run: function() {
        let u = Math.min((Date.now() - this.tZero) / this.duration, 1);
        
        if (u < 1) {
            // Keep requesting frames, till animation is ready
            requestAnimationFrame(() => this.run());
        } else {
            this.onFinish();
        }
        
        dot.move(u);
    },
    
    onFinish: function() {
        // Schedule the animation to restart
        setTimeout(() => this.start(this.duration), 1000);
    }
};

In the function run (line 10 in the code above) we calculated the progress parameter u, by dividing the time the animation is running by the total running time. This expresses the progress of the animation on a scale from 0 to 1. If we are beyond the time set as duration we finish the animation by limiting u to 1.

When the DOM is ready, just intitialise the dot, and start the animation:

window.onload = () => {   
    dot.init('dot', 'curve');
    anim.start(2000);
}

Repo

Source and transpiled code at github.

Add timing function

The follow-up post Ease a dot along a curve demonstrates the effect of easing (or timing) functions to an animation.

Pause, resume

There’s also a variant available on Codesandbox that lets you pause and resume the animation on mouseover and mouseleave.