PathSpline

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.

Declarative element: <sk-path-spline>

Global: available as sk.PathSpline inside a scene <script>.

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.

Constructor

constructor(config?: { overlay?: boolean; overlayOccludedOpacity?: number; id?: string; x?: number; y?: number; z?: number; h?: number; p?: number; b?: number; quaternion?: Quaternion; sx?: number; sy?: number; sz?: number; s?: number; class?: string; style?: string })

Inherited from: AbstractSpline, RenderableNode, SceneNode, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Other Properties

Methods

Example

const orbit = new PathSpline({
    id: 'orbit',
    svg: 'M 50 0 A 50 50 0 1 1 -50 0 A 50 50 0 1 1 50 0 Z',
    coordinateSpace: 'x-z',
    normalizeScale: 1,
});

↑ Documentation home · ← All classes