Skip to main content

Stroke

Intro

The Stroke Utility can be connected to multiple Shapes to control their Stroke Color. By doing this, many Shapes can share the same color and so be updated in a single interaction from one Layer.

info

Once Shape's are connected to a Stroke Utility, the color of all connected Shapes can be changed from any of those Shapes or via the Stroke Utility itself.

UI

Color - Set the Shape's color using Hex or RGB values (only RGB values can be animated). Click the color swatch to set colors using HSV.

Auto-complete Hex

Where hex codes contain repeated sequences of characters or numbers, they will be auto-completed. For example, entering AB and then hitting Enter will result in #ABABAB.

Shaders - A list of connected Shaders.

Alpha - A master control for the opacity/ alpha of the entire shader network.

Width - Set the width of the stroke.

Cap Style - Set the appearance of caps (each end of the stroke) on open paths.

  • Flat - A flat end that terminates at the end point.
  • Round - A hemispherical end with the end point at its centre.
  • Projecting - A flat end that projects half the Width beyond the end point.
Tapered Stroke

Note that Projecting caps are not supported when Tapered Width is checked. The Cap Style will fall back to Round in this instance.

Join Style - Set the appearance of joints.

  • Mitre - Sharp corners.
  • Round - Rounded corners.
  • Bevel - Beveled/chamfered corners.

Mitre Limit - Sets the limit at which a sharp corner is drawn beveled.

Dash Pattern - Enter a number sequence separated by commas (dash, gap, dash, gap...).

Dash Offset - Offset the Dash Pattern along the path.

Align - Align the stroke along the path.

  • Centre - Align the stroke along the centre of the path.
  • Inner - Align the stroke along the inside of the path.
  • Outer - Align the stroke along the outside of the path.
caution

Open paths only support Centre alignment. Where multiple contours appear in a single Path, any open contours will be set to Centre regardless of the Align setting.

info

If Align is set to Inner or Outer and Trim enabled, closed paths will be given a Cap Style of Flat regardless of their setting. Where multiple contours exist in one Shape, any open paths will respect the Cap Style setting.

Trim - When enabled the controls below are available.

Start - Wet the percentage along the Shape the Stroke will start.

End - Set the percentage along the Shape the Stroke will end.

Travel - Move the Stroke around the Shape.

Reverse Path - Reverse the direction of the Stroke.

Tapered Width - When checked, the Stroke is tapered from the start to end of the contour.

Start Width - A multiplier for the Stroke's Width at the contour's first point.

End Width - A multiplier for the Stroke's Width at the contour's last point.

Double Taper - When checked, the Taper's Width is set to 100% at a point along the contour determined by the Taper From attribute. The Start Width and End Width attributes can then, for example, be set to 0% to create a taper that starts at zero, increases to full width and then reduces to zero again.

Cap Centres - Offset the centre of Round caps.

Taper From - With Double Taper checked, set the point along the contour at which the Width is set to 100%.

Middle Length - Set the length of the Stroke either side of the Taper From point where the Width is 100%.

Example
  1. Create 2 Shapes.
  2. Create a Stroke Utility.
  3. Select both Shapes in the Scene Window.
  4. In the Scene Window, hold Option/Alt and connect stroke.idshape.stroke (holding Option/Alt will make a connection to both selected Shapes at the same time).
  5. Adjust the Stroke Utility's Color.

The stroke color of both Shapes will update.