JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js"></script>
<canvas id="myCanvas" width="500" height="500"></canvas>

<script type="text/paperscript" canvas="myCanvas">
    paper.Path.prototype.getPointAtPercent = function (percent) {
	    return this.getLocationAt(percent * this.length).getPoint();
    };

    // vars
    var point1 = [0, 100];
    var point2 = [120, 100];
    var point3 = [120, 150];
    
    // draw the line
    var path = new Path();
    path.add(new Point(point1), new Point(point2), new Point(point3));
    path.strokeColor = "#FFF";
    path.closed = true;
    
    // draw the circle
    var circle = new Path.Circle(0,100,4);
    circle.strokeColor = "#FFF";
    
    // target to move to
    var target = point2;

		// duration in ms
		var duration = 2000;

		var animationEndTime = null;
    
    function onFrame(event) {
		    var now = Date.now();
    
    		if (!animationEndTime || now > animationEndTime) {
          animationEndTime = now + duration;
        }
        
        var percent = (duration - (animationEndTime - now)) / duration;
        
        circle.position = path.getPointAtPercent(percent);
    }
</script>

CSS

canvas { background: #000; }