<sk-points-spline>

← prev index next →

A spline whose curve is defined by 3D control points — the convenience way to draw a smooth curve straight from a list of positions, without wiring up a separate source element.

JavaScript API: PointsSpline

Remarks

This is the control-points member of the AbstractSpline family: a spline you place, transform and paint directly, whose geometry it builds for you from a points list. Internally it wraps a PointsSplineSource — the same source a <sk-spline> would host as a child — and exposes that source's controls as its own attributes. A stroke paint child draws the resulting curve, and the spline can be referenced by an sk-align-to-spline-constraint to ride a node along it. The source is fixed for the node's lifetime; to host an arbitrary or swappable source (GPU, morph, trail), use sk-spline.

Key attributes. points is the list of [x, y, z] control points — full 3D, so the curve is not confined to a plane. basis chooses how the curve threads them: bezier treats them as Bézier control handles, bspline produces a taut approximating curve, catmullRom passes smoothly through every point, and linear connects them with straight segments. wrap sets the endpoint behaviour — open (the default) leaves a curve with two ends, while closed joins the last point back to the first into a loop. widths is an optional list parallel to points that tapers the stroke's cross-section along the curve (absent → uniform width).

Related. sk-path-spline is the sibling convenience leaf for the other input modality — an SVG path instead of control points. The underlying source is sk-points-spline-source, which sk-spline can host directly alongside the rest of the spline-source family. The base concept is AbstractSpline.

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.
draggable <boolean> false Gets whether this node can be dragged.
xanimatable <number> 0 X position.
yanimatable <number> 0 Y position.
zanimatable <number> 0 Z position.
hanimatable <angle> 0 Heading (Y-axis rotation) in radians.
panimatable <angle> 0 Pitch (X-axis rotation) in radians.
banimatable <angle> 0 Bank (Z-axis rotation) in radians.
quaternionanimatable <quaternion> ({ <number>, <number>, <number>, <number> }) — Rotation as quaternion (overrides h, p, b if provided)
sxanimatable <number> 1 X-axis scale factor.
syanimatable <number> 1 Y-axis scale factor.
szanimatable <number> 1 Z-axis scale factor.
s <number> — Uniform scale factor for all axes (overrides sx, sy, sz if provided) write-only
overlay <boolean> false Whether this node renders as an overlay with depth-aware translucency.
overlay-occluded-opacity <number> 0.3 Alpha multiplier for overlay fragments occluded by scene geometry.
cast-shadow <boolean> true Whether this spline casts shadows.
pointsrequired <3d-vector-list> (<3d-vector>[,<3d-vector>]*) — The 3D control points. Setting a new array re-evaluates the curve.
basis <points-basis> ("bezier" | "bspline" | "catmullRom" | "linear") — The curve basis type.
wrap <points-wrap> ("open" | "closed" | "pinned") — The wrap mode.
widths <number-list> (<number>[,<number>]*) — The optional per-control-point widths (parallel to points).

Event handler attributes

Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.

onclick, ondblclick, onauxclick, oncontextmenu, onpointerdown, onpointerup, onpointermove, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture, onwheel, ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondrop, ondragend

Children

No spline-source children — geometry comes from the points attribute.

↑ Documentation home · ← All elements