<sk-cross-stroke-field>

← prev index next →

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.

JavaScript API: CrossStrokeField

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.

Serve these docs to run the live example. WebGPU needs a secure context — open this page via grunt serve rather than double-clicking the file. The Markup tab works from disk.

Attributes

AttributeTypeDefaultDescription
id <id> — The element's unique identifier — the standard HTML global id attribute.
remap-curveanimatable <remap-curve> — Optional curve that reshapes this field's raw [0, 1] output.
remap-phaseanimatable <number> 0 Horizontal remap phase — an animatable scalar that translates a present
thresholdanimatable <number> — Distance from center at which weight starts falling off.
softnessanimatable <number> — Width of the smooth transition zone.
cap-field-modeanimatable <cap-field-mode> ("none" | "match") — How the field gradient behaves in cap regions.
threshold-spaceanimatable <field-space> ("fraction" | "screen" | "world") — The unit space CrossStrokeField.threshold is expressed in.
softness-spaceanimatable <field-space> ("fraction" | "screen" | "world") — The unit space CrossStrokeField.softness is expressed in.
anchoranimatable <field-anchor> ("center-line" | "edge") — Where the cross distance is measured from (centreline or edge).

↑ Documentation home · ← All elements