Azgaar

Easy example using polylabel.js by Vladimir Agafonkin: A fast algorithm for finding the pole of inaccessibility of a polygon.
Must read this post.

This example uses point-along-path interpolation, but also changes the rotation of the moving element depending on its place on the path.

Marker animation along SVG "path" element with D3.js: animating "path" and marker movement synchronously, marker rotate according to tangent line to path.

	/** Canvas component

	A generic canvas component that calls a draw function to draw the
	contents, and automatically calls it again when anything the draw
	function depends on changes. Blog entry:
	http://simblob.blogspot.com/2018/03/using-vue-with-canvas.html

	Example:

	<a-canvas width="500" height="200"

	// Check if rectangle a contains rectangle b
	// Each object (a and b) should have 2 properties to represent the
	// top-left corner (x1, y1) and 2 for the bottom-right corner (x2, y2).
	function contains(a, b) {
	return !(
	b.x1 < a.x1 \|\|
	b.y1 < a.y1 \|\|
	b.x2 > a.x2 \|\|
	b.y2 > a.y2
	);

	// Attempt #1: using typeof
	// fails in all cases since typeof [] returns "object"
	Array.prototype.isArray = function(obj) {
	return (typeof obj === "array");
	}

	// Attempt #2: using instanceof
	// fails when obj = Array.prototype
	// and when array is defined in another window or frame
	Array.prototype.isArray = function(obj) {

	/* round("M -0.09375,-3 A 1.001098,1.001098 0 1 0 0,-1 C 0.56412939,-1 1,-0.56412939 1,0 1,0.27245181 0.8799664,0.4950336 0.6875,0.6875 A 1.016466,1.016466 0 1 0 2.125,2.125 C 2.6563912,1.5936088 3,0.83211769 3,0 3,-1.6450096 1.6450096,-3 0,-3 a 1.0001,1.0001 0 0 0 -0.09375,0 z")
	=> "M -0.1,-3 A 1,1 0 1 0 0,-1 C 0.6,-1 1,-0.6 1,0 1,0.3 0.9,0.5 0.7,0.7 A 1,1 0 1 0 2.1,2.1 C 2.7,1.6 3,0.8 3,0 3,-1.6 1.6,-3 0,-3 a 1,1 0 0 0 -0.1,0 z"
	*/

	function round (path) {
	return path.replace(/[\d\.-][\d\.e-]/g, function(n){return Math.round(n10)/10})
	}