Algorithm for drawing calligraphy brush strokes *in SVG*

This is what I'm wondering about. You have a stroke and the actual brush stroke rendering.

The final result looks something like this:

My question is how that complicated got calculated. It seems like a complicated algorithm. I have also seen how to do something like this with the canvas, as here. I am specifically wondering how to calculate this for SVG.

Answer

from your linked demo of the "animated SVG calligraphic brush" I copy the info section about the design base of the final example (a highly complex Arabic calligraphic sample):

The original design, the Tughra of Osmanic Sultan Mahmud II., is by an unknown 19th-century calligrapher. The vectorized version was done by Wikipedia illustrator Baba66. The animation is my attempt to visualize the position of the Arabic letters inside the drawing. It builds upon an earlier version by Baba66. Creative Commons Attribution-Share Alike 2.5.

This leads me to believe that it's most likely that all the design work for the calligraphic strokes was similarly started in a vector graphics application such as Adobe Illustrator, Affinity Designer or InkScape, and was then exported to SVG, which was used as a codebase for the particular code poet to whose work you were referring.

I could well be wrong, but I think it's a case of Occam's Razor here.