Ramps a value from the start of a stroke to its end — the field for gradients that run along a path, reveal-along-length effects, and progress bars.
JavaScript API:
ProgressStrokeField
This is the along-the-length 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 (see the general SpatialField concept for
position-based fields). Here the weight is arc-length progress (strokeCoord.x): 0
at the stroke start, 1 at the end, rising linearly between — so a tonemap driven
by it sweeps smoothly from one end of the path to the other.
Key attributes. clamp keeps the weight within [0, 1] through the end caps
(on by default; turn it off to let cap regions read slightly past the ends).
cap-progress-mode chooses whether progress is measured across the stroke body
only or all the way to the cap tips. It needs no reference spline — it reads only
the stroke coordinate.
Related. Sibling stroke fields: sk-dash-array-stroke-field (a repeating
dash pattern) and sk-cross-stroke-field (fade across the width). For
progress along a free-standing spline rather than a stroke, see
sk-spline-progress-gradient-field. The usual consumer is a
sk-tonemap applied through a sk-stroke-paint.
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.
<!-- A stroke field is a place-anywhere by-id resource: declare it with an
`id`, reference it from a tonemap's `field="#id"`, and apply that
tonemap to a stroke. Arc-length progress (0 at the start, 1 at the end)
reveals a gold tonemap along the stroke. -->
<sk-scene>
<sk-progress-stroke-field id="fld" clamp="true" cap-progress-mode="body-only"></sk-progress-stroke-field>
<!-- Progress 0→1 ramps the base from blue at the start to gold at the end. -->
<sk-ramp-color-map id="tm__cm" field="#fld">
<sk-color-stop stop-offset="0" stop-color="rgba(224,176,64,0)"></sk-color-stop>
<sk-color-stop stop-offset="1" stop-color="#e0b040"></sk-color-stop>
</sk-ramp-color-map>
<sk-tonemap id="tm" color-map="#tm__cm"></sk-tonemap>
<sk-plain-material id="mat" base-color="#7fa8d8" tonemap="#tm"></sk-plain-material>
<sk-spline>
<sk-svg-spline-source path="M -4 0 L 4 0" coordinate-space="x-z"
normalize-scale="6"></sk-svg-spline-source>
<sk-stroke-paint material="#mat" width="0.6"></sk-stroke-paint>
</sk-spline>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
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 |
clampanimatable |
<boolean> |
— | Whether to clamp the output to [0, 1]. When false, |
cap-progress-modeanimatable |
<cap-progress-mode> ("body-only" | "inclusive") |
— | How progress is computed relative to stroke caps. |