Chops a stroke into a repeating dash pattern — the field for dashed and dotted lines, marching-ants borders, and ticked paths.
JavaScript API:
DashArrayStrokeField
This is the dash-pattern 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 follows arc-length (strokeCoord.x),
repeating an on/off cycle so a solid stroke reads as evenly spaced dashes.
Key attributes. segment-length is the length of one on+off cycle in stroke
units; on-fraction is the share of each cycle that is "on" (weight 1) versus the
gap (weight 0); and softness softens the on↔off edges. An offset shifts the
pattern along the stroke — offsetting a second stroke by half a cycle interleaves
two dash patterns so one fills the other's gaps, and animating offset marches the
dashes along the path.
Related. Sibling stroke fields: sk-progress-stroke-field (a single
start→end ramp) and sk-cross-stroke-field (fade across the width). 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. The dash pattern (segment-length / on-fraction) gates
a gold tonemap into evenly spaced segments along the stroke. -->
<sk-scene>
<sk-dash-array-stroke-field id="fld" segment-length="0.3" on-fraction="0.5" softness="0.02"></sk-dash-array-stroke-field>
<!-- The dash "on" spans tint the base toward gold; the gaps stay blue. -->
<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 |
segment-lengthanimatable |
<number> |
— | Length of each repeating segment. |
on-fractionanimatable |
— |
— | Fraction of each segment that is "on" [0, 1]. |
softnessanimatable |
<number> |
— | Smoothness of transitions between on/off. |
offsetanimatable |
<number> |
— | Phase offset within the segment [0, 1]. Shifts the on/off pattern. |