Calculating control points for a shorthand/smooth SVG path Bezier curve

you can treat the last control point from the last curve and the end point of the last curve( which is the first point in the new curve) as a line, and the mirrored control point should lie on that line at a distance equal to the distance from the last control point to the last end point


Your first point is the last point of the previous curve. In this case it would be (x3, y3). Then your second point in the short hand is the terminating point for the length of the curve the shorthand represents.

If we are to translate your paths into both full length versions we would have:

M X0, Y0 C X1, Y1 X2, Y2 X3, Y3 
M X3, Y3 C XR, YR X4, Y4 X5, Y5 

Where XR, YR is the reflection of the last control point of the previous curve about the first point of the current curve.

XR, YR is just the reflection of P2 about P3 so:

XR = 2*X3 - X2 and 
YR = 2*Y3 - Y2

Tags:

Path

Svg

Bezier