Variable width (pressure based)

[X-Ryl669]

By looking at this code: https://github.com/NateScarlet/svg-variable-width-line
I was wondering if it would be possible to do the same.

Their algorithm is not too hard to grasp, they consider a stroke (in the rM meaning) to be a path by itself that's not stroked (by the SVG meaning). So a stroke will be converted to a closed polygon/curve (that'll be pseudo rectangle, and larger where the stroke is larger and smaller when the stroke is lighter). The implementation of their algorithm is done by maintaining the main path (like you did) and, when rendering:

1. Create 2 points per path's point, one on the left normal of the path and the other on the right normal
2. The distance between the 2 point is proportional to the pressure
3. Add all the left points in an array and the right point in another array
4. Emit a SVG path by walking the left array FIFO-style, and the right array LIFO-style making sure to finish on the first point of the left array. Don't stroke this path anymore, but fill it instead.
5. Smoothing might be required, but please check their code for how they did it.

Some test might be required to find out the ratio width/pressure to match what rM is drawing and what to do on self intersecting path.