Open the editor

Home/Help/Style/Strokes and dashes

STYLE

Strokes and dashes

A stroke is the line along a path or a shape's edge: its colour, width, ends, corners and dash pattern. Animate the dash offset and the dashes travel along the line.

Do it in the editor: guided tour7 steps · about 4 minutes · opens a practice scene

Step by step

  1. Select the trail

    Click Trail in the Layers panel: a thin line is easier to pick there than on the canvas.

  2. Make it thicker

    In Fill & stroke, type 10 in Width and press Enter. The Stroke swatch above it opens the same colour window as Fill, gradients included.

  3. Round the ends

    In Appearance, under Stroke style, click the round Line ends button: the line now ends in half circles. The Line join buttons below it shape the corners the same way.

  4. Dash it

    Type 0, 22 in Dashes and press Enter: dashes of no length, 22 apart. With round ends, each of them is a dot.

  5. Start a Dash offset track

    Click beside Dash offset, under Dashes. Dash offset gets its own row on the timeline, with a keyframe at the playhead.

  6. Move the playhead to the end

    Drag the red playhead along the time ruler to 3s, the end of the animation.

  7. Move the dashes

    Type -110 in Dash offset and press Enter, then press Space: the dots travel along the line. As 110 is five whole dash-and-gap lengths, they start over without a jump.

Good to know. On a closed shape, Align under Stroke style puts the stroke inside, on or outside the edge. Dashes have their own too, and patterns of different lengths blend. To draw a line on, animate Trim path's End from 0% to 100% instead.

Keys

Shift FAdd a dash offset keyframe at the playhead
Shift WAdd a stroke width keyframe at the playhead
Shift BAdd a stroke colour keyframe at the playhead
Shift DAdd a trim end (draw on) keyframe at the playhead
Alt IPick the stroke colour from the screen (in browsers with an eyedropper)