Drawing shapes along an svgwrite path

Hello,
I’m new to the svgwrite library and I wanted to know if it’s possible to draw small shapes at regular intervals along a path (like a bezier or a spline) in such a way that they’re aligned with the local direction of the curve.

Here’s an example of what I’m trying to accomplish (sorry for the poor quality of the drawing)
path_example

Thanks for the attention

Alternatively, are there any ways of generating an svg that achieves this? I see that svgwrite is basically a wrapper around the native svg representation, and it’s very difficult to do what I described with it

I do not have any experience with svgwrite. I will give you just a generic idea.

If you draw your curved line as

  • a sequence of cubic Bézier curve segments
  • and place centers of the shapes just at the boundaries of the segments

Then by definition at the points of those boundaries (marked by arrows below) you will know both:

  • the coordinates
  • tangent (inclination) of the curve
    Because that is the information you provide to define the whole curve.

image

This gives you all the information to correctly place and rotate your shapes.

You can play with such a chain of cubic Bézier curves here:
https://math.hws.edu/eck/cs424/notes2013/canvas/bezier.html

Just check “Lock Control Point Pairs”. My illustration comes from there.

Later I realized that my idea will not probably help you much. It requires that you generate the boundary points already at regular intervals on the final curve…

You will probably need to compute the Bézier curve yourself and split it at the regular intervals. This splitting has to be solved using approximation:

Additional ideas what is SVG capable of:

1 Like