CrossStrokeField

Fades a stroke across the ribbon's width — the field for a soft inner core fading toward the edges, or (edge-anchored) an outer rim fading inward.

Declarative element: <sk-cross-stroke-field>

Global: available as sk.CrossStrokeField inside a scene <script>.

Remarks

This is the across-the-width member of the StrokeField family: like every field it turns where into how much — a scalar weight consumers read by #id (field="#id") — but a stroke field is defined only along a stroke, weighting each point by its stroke coordinate rather than its position in space (see the general SpatialField concept for position-based fields). Here the weight depends on the perpendicular cross-stroke distance: with the default center-line anchor it is full at the centre and fades toward the edges (a core); with anchor="edge" it is full at the edges and fades inward (a rim).

Key attributes. threshold sets how far out the full-weight core extends — it is a radius from the centreline, so the full core is twice as wide — and softness sets how gradually the weight fades past that: the smoothstep transition runs from threshold - softness to threshold + softness (half the full transition span on each side). By default both are fractions of the local half-width (threshold-space="fraction" / softness-space="fraction"), so on a variable-width stroke the core's absolute thickness tracks the local width. threshold-space and softness-space switch either value independently to an absolute unit: screen measures it in screen pixels and world in world units, both FIXED regardless of the local width — e.g. threshold-space="world" softness-space="screen" holds a constant world-unit core with a crisp fixed-pixel falloff. anchor picks which side the distance is measured from: center-line (the default) grows the full-weight region outward from the centreline (a core), while edge measures inward from the stroke edge, so anchor="edge" threshold-space="screen" threshold="8" holds a constant 8-pixel outer rim on any variable-width stroke. Neither value is clamped: a threshold at or past the stroke edge with nonzero softness still shows the partial falloff that starts inside the edge. Absolute spaces apply during GPU rendering; the CPU-side evaluate() treats the values as fractions (the anchor applies on both). A cap-field-mode option further chooses how the field behaves in the stroke's end caps. Because a stroke field returns zero off-stroke, it is meaningful only through a stroke's tonemap, not on a surface.

Related. Sibling stroke fields shape weight along the length instead of across it: sk-progress-stroke-field ramps from start to end, and sk-dash-array-stroke-field makes a repeating dash pattern. The usual consumer is a sk-tonemap applied through a sk-stroke-paint. threshold-space/softness-space mirror how sk-stroke-paint's width-space makes the stroke width itself screen- or world-absolute.

Constructor

constructor(config?: { threshold?: number; softness?: number; capFieldMode?: CapFieldMode; thresholdSpace?: FieldSpace; softnessSpace?: FieldSpace; anchor?: FieldAnchor })

Inherited from: StrokeField, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Other Properties

Methods

Example

const field = new CrossStrokeField({ threshold: 0.5, softness: 0.1 });

// At center: weight = 1
field.evaluate([0, 0, 0], [0, 0]);

// At edge: weight = 0
field.evaluate([0, 0, 0], [0, 1]);

↑ Documentation home · ← All classes