Search code examples
svgpointbeziermorphingsvg-morphing

SVG Path and morphing


I have a bit of a theoretical questions. Lets say i have 2 paths in svg. Each with a different number of points. One has 4 Bézier curves and the other 3.

What i want to do is morph one into the other. Now, i know they have to have the same exact structure and same number of points to do so.

So, the question is, can i add "virtual points" into their paths to get the same structure and number of points, without changing the shape of the objects?

For example, taking one point in one of the paths and just adding the same point after it to increase the number of points. Or creating a Bézier curve in both paths that would actually pretend to be a line instead of a curve. Would that change the object? And if i have points on x=1 y=1 and x=4 y=4, would using this form make Bézier curve a line? (M1 1C1 1 4 4 4 4)


Solution

  • Figured it out. Using control points anywhere on the same line as the coordiantes transforms the Bézier into a line, also if you use the same point as both the control points, start and end coordinate you can make the curve into a point. Adding more of these points into path doesnt change the look of the object, just adds more data into the path.

    http://www.petercollingridge.co.uk/book/export/html/560

    Down at the cubic curves you can align the points in the described manner to get the desired result