2

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)

Limon Monte
  • 52,539
  • 45
  • 182
  • 213
Ivan Horvatin
  • 217
  • 1
  • 2
  • 14

2 Answers2

1

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

Ivan Horvatin
  • 217
  • 1
  • 2
  • 14
1

I have a simple to use d3 plugin to animate svg path which supports different number of points, also it animates only the parts of the path which differs from original path, not the whole path. 7kb minified: https://pratyushcrd.github.io/d3-path-morphing/

Pratyush
  • 71
  • 2