передвижение по svg-путям
 

Подскажите, возможно ли передвигать объекты в canvas используя svg-пути? Не прорисовывать что-либо, а использовать как некую карту движения? Если да ( а сам думаю что можно, но запутался в примерах на Codepen..) - буду благодарен за простой пример, демонстрирующий суть процесса..

Negotiant,

<canvas></canvas>
<script>
function SVGPath(path) {
	this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
	this.path.setAttribute('d', path);
	this.length = this.path.getTotalLength();
}
SVGPath.prototype.follow = function(duration, onprogress) {
	var path = this.path, length = this.length, start = performance.now();
	requestAnimationFrame(function step(now) {
		var progress = (now - start) / duration;
		if (progress > 1) progress = 1;
		onprogress(path.getPointAtLength(length * progress));
		if (progress < 1) requestAnimationFrame(step);
	});
};

var ctx = document.querySelector('canvas').getContext('2d');

var route = new SVGPath('M10 80 Q 52.5 10, 95 80 T 180 80');

route.follow(10000, function(point) {
	ctx.clearRect(0, 0, 300, 150);
	ctx.beginPath();
	ctx.arc(point.x, point.y, 10, 0, 2 * Math.PI);
	ctx.fill();
});
</script>

Rise,
:thanks:

Rise, :thanks: