I want to create a closed path around another path. (SVG)

1k Views Asked by At

I have an svg path, like this:

M 41.2182,164.1220 C 13.6452,82.5160 62.9412,163.9160 62.9412,116.0000 C 62.9412,68.0840 8.5452,148.8960 16.8656,53.5000 C 109.8628,55.6260 41.8662,16.0000 79.3662,16.0000 C 116.8662,16.0000 48.5802,54.7680 134.9682,70.3720 L 134.9682,70.3720 134.9682,164.1220 L 134.9682,164.1220 41.2182,164.1220 z

It is composed of bezier curves and lines.

I would like to extrude the path. So, for example, from the black shape below to the red outline+black shape (I only need the outer path). With just lines it is easy... just get their intersection points, split the outer angle, and draw a line. But with beziers, I don't know what to do. Help!

Manually created approximation of outline, using extra curves: m 37.686605,169.10481 c -15.950092,-43.07847 -8.814378,-46.55517 -3.439729,-48.17135 3.317221,-0.99751 3.754458,-0.55056 17.225155,5.45981 4.885348,2.17974 5.745421,1.64914 6.540252,-10.05611 0.356018,-5.24296 -1.094238,-9.82175 -2.184765,-11.1066 -3.109381,-3.66345 -16.718471,4.26962 -26.573753,2.65045 C 16.244152,105.7436 7.8796828,96.203068 12.257927,48.341063 56.160695,48.272875 66.26206,45.191096 63.408865,33.358556 61.025609,23.474907 58.817562,10.862728 78.588842,10.862728 c 14.658605,0 20.132228,6.154277 17.509481,16.595821 -4.555364,18.135583 -7.562305,29.557766 43.773547,38.73031 L 139.9791,169.1237 z

image

2

There are 2 best solutions below

8
On

It is offset curve you are looking for. The offset curve of a polynomial curve (such as Bezier curve) is in general not a polynomial curve. So, you cannot represent the offset curve as another Bezier curve. You can only approximate it. For offsetting a profile (or path) consists of multiple Bezier curves and lines (and perhaps circular arcs), not only you have to compute the offset curve, you also have to compute their intersections with neighbor offset curves and trim the curve back to the intersection points. Sometimes, when the offset distance is large, the offset curve will even self-intersect and you will have to deal with such problems as well. All in all, offset a profile reliably is a very tough issue to tackle with.

Alternatively, I suggest that you simply calculate points from your path and the normal direction at that point, offset the point in the normal direction by the desired distance and create a new path from these offset points.

1
On

A nice simple algorithm for offsetting a Bézier curve is the one due to Tiller and Hanson. Look at this answer for a discussion and a picture. To implement it, all you need is a function for intersecting two lines; and you will need this function anyway, to handle the lines in your outline.

If you want to get serious about the problem, and really understand it, please refer to this answer and the papers it cites.