DOCS/Modifiers

Zig-Zag

Path

Alternating ridges along the outline — saw teeth, waves, stamp edges.

Zig-Zag pushes the outline in and out at regular intervals. Small size with many ridges gives you a postage-stamp edge; large size with few gives you a saw blade.

Unlike Wiggle Path, the ridges are perfectly regular. That regularity is the point — it reads as manufactured rather than organic.

Try itZig-Zag

Size12 px

Ridges per segment6

This stage calls the same `applyPathOperator` the editor calls on every frame.

When to reach for it#

Stamp and ticket edges.
Saw blades, gears, and mechanical rims.
Regular wave edges on a banner or divider.

How it works#

The outline is resampled to an even spacing, then each sample is pushed along its normal, alternating in and out. Ridge count is per segment of the original path, so a shape with more segments gets proportionally more ridges — which keeps the ridge size consistent around an irregular outline.

Parameters#

Sizesize#

How far each ridge travels, in pixels. This is the amplitude, measured from the original outline, so the total peak-to-trough is twice this.

Ridges per segmentridges#

How many in-and-out pairs fit along each segment. High counts with a large size will self-intersect on tight curves.

Recipes#

A ticket stub edge

Draw a rectangle.
Add Zig-Zag with Size around 6 and Ridges around 20.
Add Round Corners at about 60 after it, to turn the sharp teeth into scallops.

Things that catch people out#

Tight curves self-intersect

On a small circle, ridges on the inside of the curve run into each other. Lower the size or the ridge count.