Catmull-Rom interpolation on SVG Paths

by

To answer your questions directly:

  1. Yes. Catmull-Rom spline is an algorithm to interpolate a series of (x, y, z) points. It will generate a cubic polynomial curve between each two consecutive points.
  2. You cannot direcly use Catmull Rom spline for SVG path. You need to convert it to cubic Bezier curve first.

For a curve segment defined by point P0, P1, P2 and P3 and knot sequence t0, t1, t2, t3, the centripetal Catmull-Rom spline (defined between point P1 and P2) can be computed by the recursive formula provided in https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline. Therefore, I will not elaborate here.

To convert it to cubic Bezier curve, you need to compute the first
derivative at P1 and P2 as 

M1 = (t2-t1)*(c1*(P1-P0)/(t1-t0) + c2*(P2-P1)/(t2-t1))
M2 = (t2-t1)*(d1*(P2-P1)/(t2-t1) + d2*(P3-P2)/(t3-t2))

Where 

 c1 = (t2-t1)/(t2-t0),
 c2 = (t1-t0)/(t2-t0),
 d1 = (t3-t2)/(t3-t1),
 d2 = (t2-t1)/(t3-t1)

Then you can convert it to cubic Bezier curve with 4 control points: Q0, Q1, Q2 and Q3:

Q0 = P1
Q1 = P1 + M1/3
Q2 = P2 - M2/3
Q3 = P2

More Related Contents:

  1. How to calculate the SVG Path for an arc (of a circle)
  2. How to convert a PNG image to a SVG? [closed]
  3. Removing transforms in SVG files
  4. How to use the viewBox attribute?
  5. How to set transform origin in SVG
  6. Remove the host HTML element selectors created by angular component
  7. How many levels of recursion does SVG support?
  8. Add custom icons to font awesome
  9. semantic zooming of the force directed graph in d3
  10. Find svg viewbox that trim whitespace around
  11. Default background color of SVG root element
  12. How to convert/save d3.js graph to pdf/jpeg
  13. Scale and mirror SVG object
  14. How to convert a SVG to a PNG with ImageMagick?
  15. SVG shadow cut off
  16. Crop to fit an svg pattern
  17. How to place multiple evenly-spaced arrowheads along an SVG line?
  18. SVG Positioning
  19. svg multiple color on circle stroke
  20. How can I cut one shape inside another?
  21. Avoiding lines between adjecent svg rectangles
  22. Can I apply a gradient along an SVG path?
  23. Adding feDropShadow to a vertical line in SVG makes it disappear
  24. Add text/label onto links in D3 force directed graph
  25. Converting an svg arc to lines
  26. Simple fill pattern in svg : diagonal hatching
  27. Pure SVG way to fit text to a box
  28. SVG images blocked by gmail proxy
  29. is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]
  30. Convert SVG polygon to path

Leave a Comment