3 ms·
The easiest way to understand an offset curve is that it's one side of the shape you get by "stroking" along the source curve, in the SVG sense. Join two offset
by pcwalton 4y ago
The easiest way to understand an offset curve is that it's one side of the shape you get by "stroking" along the source curve, in the SVG sense. Join two offset curves together (one for each side), cap off the ends somehow, and you have the entire shape of a stroked path. It's easy to see how this isn't the same as just translating the path.
More precisely, it's the curve you get by taking each point (of which there are infinitely many) on the source curve, tracing out a line of some constant length l along the line perpendicular to that point on the source curve, and joining each such new point together.
- jabbany 4y agoThe "perpendicular to that point" is rather better defined as "perpendicular to all tangents at that point on the source curve".
- rikroots 4y agoSo I tried to create a demo of this (the second paragraph) on CodePen[1]. While it works fine for shallow angles, it leads to some unsightly loops when tracing tightly acute (deep? sharp?) curves. I assume there's a way to mathematically identify the points that form these unwanted loops, so they can be discarded when drawing the parallel curve - but my maths skills aren't up to the job this morning. [1] - https://codepen.io/kaliedarik/pen/jOxqJjm https://codepen.io/kaliedarik/pen/jOxqJjm