The simple magic of the SVG-Spline is a single T command. Coupled with SVG path
element convention of repeating last command, it turns a path into a spline.

The "@" glyph of "Times" use T 29 times.

We'll revisit the SVG-Spline, but with a slightly different way of construction,
later in the article on our journey to create C^{2} continuos cubic spline.

Before we draw our guest of honor, we name some
creatures for clear and concise descriptions:

Points to be interpolated will be referenced as members of a JavaScript array P.

- A junction is a point with a neighbor point on each side.
On a closed spline all points are junctions but on an open spline, P[0] and P[last] are not junctions.

junction i is simply the junction P[i].

We sometimes refer to a junction as a knot.

- P[i] segment or simply segment i, is the spline segment from P[i] to P[i+1]

Loosely speaking, we consider "left" of P[i] as the P[i-1] segment area,

and "right" of P[i] as the P[i] segment area.

- Junction P[i] triangle:

Its left leg (P[i].leftLeg) is the vector from P[i-1] to P[i] i.e. - (P[i] - P[i-1])

Its right leg (P[i].rightLeg) is the vector from P[i] to P[i+1] i.e. - (P[i+1] - P[i])

Its base (P[i].triBase) is the vector from P[i-1] to P[i+1] i.e. - (P[i+1] - P[i-1])

All edges of P[i] triangle are vectors thus we can slice them and add/subtract

the slices (which are also vectors) to/from points to create new points.

We reference P[i] triangle edges through P[i], for example, from the most basic vector addition definition
it follows that

The algorithm to interpolate an array of points P with Catmull-Rom spline
as piecewise cubic Bezier segments (for simplicity we assume a closed spline
so all points are junctions):

For each junction P[i] do:

1) slice 1/6 of P[i].triBase, call it v

2) subtract v from P[i] to form P[i].L

3) add v to P[i] to form P[i].R

Spline is ready: