`<sk-path-spline>`

← prev index next →

A spline whose curve is an SVG path — the convenience way to turn hand-drawn or exported vector artwork (an icon outline, a logo, an Illustrator path) into a 3D curve without wiring up a separate source element.

JavaScript API: PathSpline

Remarks

This is the SVG-input member of the AbstractSpline family: a spline you place, transform and paint directly, whose geometry it builds for you from an svg path string. Internally it wraps an SVGSplineSource — 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. svg is the path d string, in any grammar the browser parses (M/L/C/A/Z…). coordinate-space maps the 2D path into 3D by a signed axis token: x-y (the default) negates Y so Y-down SVG artwork stands upright in Skenra's Y-up world, x-z lays the path flat in the ground plane, and xy keeps it hand-authored Y-up. normalize-scale rescales the path to fit a [-n, n] box so exported artwork at pixel coordinates becomes scene-sized (omit it to keep authored coordinates). anchor picks which point of the artwork lands on the node origin — a named preset (center, top-left, …), normalized [x, y], or a specific content(x, y) point. subpath-index selects one subpath when the d string has several; flatness-tolerance trades curve smoothness against vertex count.

Related. sk-points-spline is the sibling convenience leaf for the other input modality — control points instead of a path. The underlying source is sk-svg-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.

<!-- A star outline authored in SVG pixel coordinates, turned into a 3D curve.
     `coordinate-space="x-y"` flips the Y-down SVG so the star stands UPRIGHT
     facing the camera (Skenra is Y-up); `normalize-scale="4"` rescales the
     100px artwork to fit a 4-unit box; `anchor="center"` puts the star's centre
     on the node origin so `x="-2.6"` / `x="2.6"` place two copies side by side.
     The right copy uses `coordinate-space="x-z"` instead — the SAME path laid
     FLAT in the ground plane — so the 2D-into-3D mapping is visible at a glance. -->
<sk-scene>
    <sk-directional-light p="55deg" h="25deg" intensity="1.0"></sk-directional-light>
    <sk-ambient-light intensity="0.45"></sk-ambient-light>

    <sk-plain-material id="up" base-color="#e0b040"></sk-plain-material>
    <sk-plain-material id="flat" base-color="#4f86c6"></sk-plain-material>

    <!-- Upright, facing the camera (Y-down SVG flipped to Y-up). -->
    <sk-path-spline x="-2.6" coordinate-space="x-y" normalize-scale="4" anchor="center"
        svg="M 50,5 L 61,39 97,39 68,60 79,95 50,73 21,95 32,60 3,39 39,39 Z">
        <sk-stroke-paint material="#up" width="1.5"></sk-stroke-paint>
    </sk-path-spline>

    <!-- The SAME star laid flat in the ground plane. -->
    <sk-path-spline x="2.6" coordinate-space="x-z" normalize-scale="4" anchor="center"
        svg="M 50,5 L 61,39 97,39 68,60 79,95 50,73 21,95 32,60 3,39 39,39 Z">
        <sk-stroke-paint material="#flat" width="1.5"></sk-stroke-paint>
    </sk-path-spline>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`id`	`<id>`	—	The element's unique identifier — the standard HTML global `id` attribute.
`draggable`	`<boolean>`	`false`	Gets whether this node can be dragged.
`x`animatable	`<number>`	`0`	X position.
`y`animatable	`<number>`	`0`	Y position.
`z`animatable	`<number>`	`0`	Z position.
`h`animatable	`<angle>`	`0`	Heading (Y-axis rotation) in radians.
`p`animatable	`<angle>`	`0`	Pitch (X-axis rotation) in radians.
`b`animatable	`<angle>`	`0`	Bank (Z-axis rotation) in radians.
`quaternion`animatable	`<quaternion> ({ <number>, <number>, <number>, <number> })`	—	Rotation as quaternion (overrides h, p, b if provided)
`sx`animatable	`<number>`	`1`	X-axis scale factor.
`sy`animatable	`<number>`	`1`	Y-axis scale factor.
`sz`animatable	`<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.
`svg`required	`<string>`	—	The SVG path data string (`d` attribute). Setting a new value
`coordinate-space`	`<coordinate-space>`	—	The coordinate space used for 2D→3D mapping.
`anchor`	`<content-anchor> (<anchor>)`	—	The anchor point for origin placement (see `AnchorValue`).
`normalize-scale`	`<normalize-scale> (<number> \| none)`	—	The single normalization control: a number scales the path to fit
`flatness-tolerance`	`<number>`	—	Tolerance for flattening curves into line segments.
`subpath-index`	`<number>`	—	The selected subpath index.

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 svg attribute.

↑ Documentation home · ← All elements