0

I'm working on a simple SVG animation: a rectangle with rounded corners. The SVG contains two paths, one with a smooth line and one with a zigzag line. The animation is a simple transition between the smooth line and the zigzag line. Since it's easier to animate between paths with similar structure, I want the lines to have the same number of points.

After creating the zigzag line in Illustrator, the newly created anchor points are positioned on both sides of the original smooth line. Adjacent points are always on the opposite sides.

How can I find the points on the smooth line that corresponds to the points on the zigzag line (with correct spacing)?

enter image description here

My current approach is to create all of the line segments beforehand, and then manually create the zigzag pattern by offsetting every other point along the smooth line. But this is a bit cumbersome and comes with other drawbacks.

3
  • There are javascript libraries that do this automatically for the svg. But you can do this in illsutrator too. make a straight zigzag. Copy scale it straight. make them brushes and you should be nerly good to go.
    – joojaa
    Commented Dec 2, 2023 at 12:28
  • Also see graphicdesign.stackexchange.com/questions/73629/…
    – joojaa
    Commented Dec 2, 2023 at 12:34
  • And heres 12 munute test of said process. This is one of those times whan changing coordinates help. Make them in one brush then separate them on expand
    – joojaa
    Commented Dec 2, 2023 at 12:42

3 Answers 3

0

Term "the smooth curve point which corresponds a corner of the zigzag" is not a clear thing. You have drawn a special case where the corresponding point seems to be in the half-way of two crossings and it also happens to be the curve point which is closest the zigzag corner. Both of these relations generally do not coincide. Higher curvature radius and shorter zigzag segments, of course, reduce the apparent error if the curve is so smooth that its curvature radius changes smoothly (no jumps) along the curve.

The next example hopefully gives to you another idea to find a good zigzag and the "shortest distance" corresponding points by drawing with Illustrators drawing tools.

It's useless if you expected a calculation formula which could be used in a drawing script.

Draw a vertical and a horizontal line. Make a copy of the vertical line and 3 copies of the horizontal line. Colorize the lines as shown:

enter image description here

Drag the lines to the next arrangement. Be sure every joint snaps. No gap nor overlap is allowed:

enter image description here

Tile horizontally some number of the shown arrangements. Again, be sure every joint snaps:

enter image description here

To do it easily make a duplicate by dragging and holding Alt-key. Move the duplicate straight to the right place. Repeat by pressing Ctrl+D

Drag the chain to the brushes panel and define it to be an art brush. NOTE: I said Art Brush, you'll see in the end of this answer why a pattern brush is not so good, no matter there would be no need to do the 2nd tiling if you used the pattern brush.

In the next image on the top there's a manually drawn random, but quite simple path:

enter image description here

In the middle the art brush is applied. Remember to keep available also a plain black copy of the curve.

In the bottom Object > Expand Appearance is applied to make the colored pieces real items (= a group of separate line and curve segments) and a black zigzag is drawn manually. The drawing tool wouldn't snap if Expand Appearance wasn't applied.

The green-red curve segments can be joined to one curve, but it has unfortunately too many nodes if you need just the exact number taken from the zigzag.

I guess you need the same number of nodes to be able to use some morphing algorithm which works somehow like blending in Illustrator. It will not be especially nice for your purposes (a guess again) if the corners should move also sideways, not only straight towards the smooth curve.

Inkscape has one substantial advantage why you should visit there. In Inkscape one can delete a node and the curve stays the same if there still is enough nodes for the same geometry. And in this case there is, because the original curve had only 3 nodes.

Just for fun I Inserted to the zigzag a node to every crossing with the green-red curve. Then I drew a cyan polyline on the nodes of the green-red curve:

enter image description here

Blending (only 3 intermediate steps to keep the image clean) between the black zigzag and the cyan polyline generates this:

enter image description here

The green-red-blue-magenta brushing result is after expanding the appearance a group. Blue and magenta parts can be deleted and the green-red curve segments could be joined. There are not too many irregularly placed extra nodes. The path could be edited manually to have just the right number of nodes. As said above, it would be especially easy in Inkscape. There is available path effect "Pattern Along Path" which can be used to do the same as art and pattern brush in Illustrator. Except there's not available multiple colors.

Inkscape offers more handy ways to create the zigzag which has the same number of nodes as the smooth path. If your smooth path has sparsely nodes you can quite easily insert them so that there's enough nodes and the distribution looks even. They can be inserted one by one manually with the node tool (the same tool for inserting, removing and adjusting the nodes)or you can use a node adding extension in the modify path extension group. Here's a path in its original form and after inserting some nodes:

enter image description here

The places of the corners of the zigzag can be found by using a thin vertical line as a custom curve node marker. It appears in the marker palette after applying Object > Object to Marker. The red line in the left is the custom marker:

enter image description here

Its good to save a duplicate of the curve - the original and the one with more nodes.

The red markers as is are inaccessible. But they become paths if one applies Path > Stroke to Path. This expands the curve itself to a visually same looking closed filled strokeless shape and the markers become rectangles. But that's no problem. The rectangles are thin, so they snap anyway nicely to new drawings and one can have below all the markerless duplicate of the curve.

In the next image the expanded black curve is deleted, the version with added nodes is still there. A zigzag is drawn between the marker ends. Before deleting the expanded black curve make all items free by applying Ungroup several times.

enter image description here

There's available extension Interpolate between Paths. It's applied to the zigzag and the black curve:

enter image description here

The intermediate curves can be straightened by applying extension Modify Path > Approximate Curves by Straight lines.

To stay in truth the marker trick is available also in Illustrator, but inserting a custom maker is tricky. I skip it. I do not know a way to do it without editing Illustrator's original program data file where the markers are drawn in a certain way. If you try it, at least make a renamed safety duplicate.

Why art brush instead of pattern brush?

You may see that the blue and magenta lines are too short or too long after applying the brush. Their lengths are scaled if you change the stroke width of the curve. There's still the same amount of segments:

enter image description here

The bottom version has 50% smaller stroke width than the top version. This, of course, works only with unexpanded curves. It doesn't work with the pattern brush.

0

I doubt that there is a function that does exactly this.

You could “eyeball” it, and add nodes with the pen tool.

You can also cut a single spline into 2, 4, 8, 16 … splines of equal length by repeatedly subdividing from the menu (don’t have Illustrator at hand to check the name of the menu item).

0

Possibly... If I understand correctly, which I'm not certain I do.

2 paths of the identical lengths, one curved, one straight. Use Object > Path > Add Anchor Points and new anchors will be added half way between existing anchors. So if you do this with both paths selected, anchors will be added at the same point on each path, assuming they start with the same amount of anchors.

As for selecting nearby (possibly corresponding) anchors on another path, that's just not something which is possible as far as I'm aware.

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.