Draws a spline's path as a ribbon of a given width in a material — the way to render a curve as a visible stroke, and to animate a line drawing itself on.
JavaScript API:
StrokePaint
This is the stroke member of the Paint family: like every paint it
applies a material to one part of a node's geometry; here that part is a
spline's path, drawn as a line-strip ribbon. A single spline can carry several
stroke paints, so a thin line can underlay a thicker animated one.
Key attributes. material (inherited from Paint) is the stroke's
color. width is the ribbon width (animatable); width-space chooses its unit
— screen (the default) keeps the width constant in pixels regardless of
distance, while world measures it in world units so the stroke thins with
perspective. pen-down and pen-up are the normalized arc-length start and end
of the visible portion of the stroke (0 = path start, 1 = path end, both
animatable and wrapping modularly): sweeping them draws a pulse along the curve
or animates the whole line drawing itself on. line-cap shapes the stroke ends
(round, butt, …).
Related. It strokes a sk-spline (whose shape comes from a
spline-source). Its sibling paints cover the other parts of a node's geometry:
sk-surface-paint (filled faces) and sk-edge-paint (mesh edges).
The material it applies is a sk-plain-material.
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 paint draws a spline's path as a ribbon of the given pixel
width, with a material. A spline can carry several stroke paints: here a
thin static stroke underlays a thicker one whose width and pen-up/pen-down
(the visible arc-length window) animate to sweep a pulse along the path.
The path is the closed Catmull-Rom curve through the cube's corners. -->
<sk-scene>
<sk-plain-material id="mat" base-color="orange"></sk-plain-material>
<sk-spline>
<sk-points-spline-source basis="catmullRom" wrap="closed"
points="[[-1.5,-1.5,-1.5],[1.5,-1.5,-1.5],[1.5,1.5,-1.5],[-1.5,1.5,-1.5],[-1.5,1.5,1.5],[1.5,1.5,1.5],[1.5,-1.5,1.5],[-1.5,-1.5,1.5]]"></sk-points-spline-source>
<sk-stroke-paint material="#mat" width="8" line-cap="round">
<sk-animation duration="1500ms" iterations="Infinity">
<sk-keyframe offset="0" pen-up="0" pen-down="0" width="1"></sk-keyframe>
<sk-keyframe offset="0.2" pen-up="0.2" pen-down="0.1" width="8"></sk-keyframe>
<sk-keyframe offset="0.8" pen-up="0.8" pen-down="0.6" width="8"></sk-keyframe>
<sk-keyframe offset="1" pen-up="1" pen-down="1" width="1"></sk-keyframe>
</sk-animation>
</sk-stroke-paint>
<sk-stroke-paint material="#mat" width="1" line-cap="round"></sk-stroke-paint>
</sk-spline>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
materialanimatable |
<id-ref> |
— | Gets the material this paint applies. reference by id |
widthanimatable |
<number> |
1.0 |
Line width in pixels (screen space) or world units (world space). |
pen-downanimatable |
<number> |
0 |
Normalized arc-length position where the visible stroke begins. |
pen-upanimatable |
<number> |
1 |
Normalized arc-length position where the visible stroke ends. |
line-capanimatable |
<stroke-line-cap> ("butt" | "round" | "square") |
"butt" |
Line cap style at stroke endpoints. |
line-joinanimatable |
<stroke-line-join> ("miter" | "round" | "bevel") |
"miter" |
Line join style at corners between segments. |
miter-limit |
<number> |
4 |
Miter limit ratio for lineJoin: 'miter'. |
width-spaceanimatable |
<stroke-space> ("screen" | "world") |
"screen" |
Width space mode for stroke rendering. |
width-profileanimatable |
<width-profile> ({ <width-profile-basis> }) |
— | Width profile descriptor defining how stroke width varies along the path. |
width-profile-precision |
<number> |
— | Number of linearized samples for width profiles. |
Optional stroke-field children (cross/dash-array/progress) plus optional spatial-field children.
Used in guides: Scene basics