JSFiddle - React, Tailwind, and code Playground

by djatha

HTML

<figure id="paper"></figure>

JavaScript

// paper and path
var paper = Raphael("paper", 500, 500);
var path = "M10,10L345,345";
var ppath = paper.path(path);

var start = 0;
var end = Raphael.getTotalLength(path);
var half = (end - start)/2;

var R = 10;
            
var ID = 0;
var circle = paper.circle(10, 10, 10);  
circle.attr({fill: 'white'});
var length = start;
var text = paper.text(10, 10, length);
var STEP = 10;

function move_circle() {
    if (length < (end - STEP)) {
        length += STEP;
        var point = Raphael.getPointAtLength(path, length);
        circle.attr( {cx: point.x, cy: point.y});
        text.attr( {x: point.x + 1, y: point.y + 1, text: length});
    } else {
        window.clearInterval(ID);
    };
};


ID = window.setInterval( move_circle , 50);