HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.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();
};
// draw the line
var path = new paper.Path();
path.importJSON(["Path",{"applyMatrix":true,"segments":[[{"x":90,"y":78},{"x":0,"y":0},{"x":0,"y":-11.45139}],[{"x":33,"y":77},{"x":16.73544,"y":-33.47088},{"x":-12.49876,"y":24.99752}],[{"x":77,"y":179},{"x":-22.43439,"y":-7.47813},{"x":2.49959,"y":0.8332}],[{"x":82,"y":184},{"x":-2.28919,"y":-0.5723},{"x":4.46364,"y":1.11591}],[{"x":110,"y":196},{"x":-1.88326,"y":1.88326},{"x":4.97496,"y":-4.97496}],[{"x":129,"y":181},{"x":-3.89733,"y":5.84599},{"x":18.01903,"y":-27.02855}],[{"x":161,"y":62},{"x":19.0113,"y":38.02261},{"x":-15.23925,"y":-30.4785}],[{"x":90,"y":68},{"x":12.14761,"y":-24.29522},{"x":-2.20151,"y":4.40302}],[{"x":91,"y":84},{"x":0,"y":-4.62046},{"x":0,"y":0}]],"strokeColor":[0,0,0]}]);
path.strokeColor = "#FFF";
// draw the circle
// var circle = new Path.Circle(0,100,4);
// circle.strokeColor = "#fff";
var circle = new paper.Path.Line({
from: [20,20], to: [100,100], name: "curveline", strokeColor: 'red',
selectedColor: 'red', strokeWidth: 10, selected: true, opacity: 0.2
});
// duration in ms
var duration = 3000;
var animationEndTime = null;
function onFrame(event) {
var now = Date.now();
if (!animationEndTime || now > animationEndTime) {
animationEndTime = now + duration;
}
var percent = (duration - (animationEndTime - now)) / duration;
circle.segments[0].point = new paper.Point(event.layerX, event.layerY); // repositioning as you like
circle.segments[1].point = new paper.Point(event.layerX, event.layerY); ;
...