Inkscape has a feature called Power Stroke which is a form of path effect. When you apply it to a stroke you gain 3 control points that allow you to adjust the thickness of the stroke. (I have not yet figured out how to add more control points through the UI, but it can be done in the XML editor).

Inspecting the SVG reveals that the stroke gets turned into a fill with a path@d that specifies the outline, allowing the SVG file to be rendered by applications that know nothing of Power Stroke.

Applications that do understand Power Stroke will be looking for these attributes on the <path>:

   inkscape:original-d="m 109.59491,132.23789 c -19.148152,28.51854 -37.80734,35.62606 -46.969458,22.13393 -9.383889,-13.81871 -39.69277,-3.57313 -46.276359,5.34215 -16.01795169,21.691 17.695947,71.79071 39.993907,62.61593 17.000232,-6.99496 23.845432,-20.30176 23.845432,-20.30176"

The definition of the PowerStroke control points occurs inside the <defs>

   offset_points="0.11606368,4.5282059 | 0.61857805,2.0941625 | 1.992627,6.538108 | 2.7945971,4.4492524"
   end_linecap_type="butt" />

I have concluded that the @offset_points list can be interpreted as a list of t,r tuples, where t=0 is the first "major" control point in the path@d, and t=1 is the next. A segment that is a cubic bezier curve is traditionally interpreted as having 4 control points, but for the purpose of path effects, the first and last control points are what I have termed "major" control points, and are shared with the segments on either side.

What I do not yet understand is the @interpolator_type, likewise the @interpolator_beta. I assume this controls how you interpolate the radius you calculate between the different offset_points, but I'm not sure what exact formula to use. When I think Bezier, I think of Bezier curves, and how they only match up with their control points at the end of the segment. I think the _beta corresponds to the "smoothness" field in the UI.

If I wanted to calculate the Power Stroke radius at t=1.32, what formula would I use?

  • $\begingroup$ FWIW, Inkscape is open source so you can just go and look at the source code for Power Stroke: lpe-powerstroke.cpp $\endgroup$ Commented Feb 26, 2021 at 22:45

2 Answers 2


Not a direct answer, but I can shed light on adding and removing pink control points using the GUI:

  • initially PowerStrok gives you 3 pink control points.
  • CTRL-Click on one of them duplicates it. Drag it along the path to a new position.
  • CTRL-ALT-Click removes the clicked one (don't remove all)
  • ALT-Click on a pink control point opens a text entry for exact coordinates.

My guess on the math question is, that there is no straight forward formula to compute "the width" at a given position.

The pink control points seem to create a spline and you would need proper spline interpolation to predict an exact width at a given position. They can even be dragged out of order, so that the boundary spline would do crazy self-overlapping things. That results in "multiple widths" at some positions.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.