How to offset a cubic bezier curve?

Sean Thayne picture Sean Thayne · Nov 10, 2010 · Viewed 12.6k times · Source

I'm trying to create a "parrallel" bezier curve. In my attempts I've gotten close but no cigar. I'm trying to keep a solid 1px offset between the 2 curves (red,blue).

current attempt

My main goal is use a edge offseting algorythm to expand/shrink a svg path.


Solution

For anyone else who is looking for a solution, I've create a AS3 version.

http://seant23.wordpress.com/2010/11/12/offset-bezier-curves/

Answer

erkmene picture erkmene · Nov 10, 2010

From wikipedia: ( http://en.wikipedia.org/wiki/B%C3%A9zier_curve )

The curve at a fixed offset from a given Bézier curve, often called an offset curve (lying "parallel" to the original curve, like the offset between rails in a railroad track), cannot be exactly formed by a Bézier curve (except in some trivial cases). However, there are heuristic methods that usually give an adequate approximation for practical purposes.

You might also see the paper indicated here: Outline of cubic bezier curve stroke