`SVGSplineSource`

← prev index next →

Turns an SVG path d string into a spline curve — the way to reuse hand-drawn or exported vector artwork (an Illustrator path, an icon outline, a logo) as a 3D path in the scene.

Declarative element: <sk-svg-spline-source>

Not on the sk.* global — construct via the declarative element or a module import.

Remarks

This is the SVG-input member of the spline-source family: a spline-source supplies the curve geometry for a AbstractSpline, so it lives as the single geometry child of a sk-spline (or is built into a sk-path-spline, which wraps this source behind a svg attribute). Once hosted, the curve draws with a stroke paint, carries an sk-align-to-spline-constraint, or seeds points and fields — like any spline.

Key attributes. path is the SVG d string, in any path 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; 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 chooses 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 which subpath to use when the d string holds several (each M starts a new one), and flatness-tolerance trades curve smoothness against vertex count when flattening. Finally, like every spline-source it carries the family's distribution / distribution-count controls: a spline-source is itself a points-source, so a sk-cloner given one places clones along the curve, and these controls choose how the curve is sampled into those positions.

Related. It is one input modality of the spline-source family alongside sk-points-spline-source (control points), sk-morph-spline-source (blend two sources), sk-trail-spline-source (a moving node's wake), and the GPU sources sk-compute-buffer-spline-source / sk-custom-wgsl-spline-source. Its host is a sk-spline; the built-in shortcut for SVG input is sk-path-spline.

Constructor

constructor(config?: { id?: string; path?: string; coordinateSpace?: SVGCoordinateSpace; anchor?: AnchorValue; normalizeScale?: number | 'none'; flatnessTolerance?: number; subpathIndex?: number })

Inherited from: AbstractSplineSource, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Property	Type	Default	Description	Declared by
`id`config-only	`string`	—	The element id.	`SVGSplineSourceConfig`
`path`	`string`	—	The SVG path `d` attribute string. Same value as `svgPathD` —	`SVGSplineSource`
`coordinateSpace`	`SVGCoordinateSpace`	—	The coordinate space used for 2D→3D mapping.	`SVGSplineSource`
`anchor`	`AnchorValue`	—	The anchor point for origin placement (see `AnchorValue`).	`SVGSplineSource`
`normalizeScale`	`number \| 'none'`	—	The single normalization control: a number scales the path to fit	`SVGSplineSource`
`flatnessTolerance`	`number`	—	Tolerance for flattening curves into line segments.	`SVGSplineSource`
`subpathIndex`	`number`	—	The selected subpath index.	`SVGSplineSource`

Other Properties

Property	Type	Default	Description	Declared by
`vertexCount`read-only	`number`	—	—	`SVGSplineSource`
`isValid`read-only	`boolean`	—	Whether the source is valid (initialized without errors and has vertices).	`SVGSplineSource`
`isClosed`read-only	`boolean`	`false`	—	`SVGSplineSource`
`polyline`read-only	`readonly Readonly<SplinePoint>[]`	—	—	`SVGSplineSource`
`pointCount`read-only	`number`	—	Cloner-facing point count. Tracks `distribution`: equals	`AbstractSplineSource`
`localMatrices`read-only	`Float32Array<ArrayBufferLike> \| null`	—	—	`AbstractSplineSource`
`distribution`	`SplineDistributionMode`	—	—	`AbstractSplineSource`
`distributionCount`	`number`	—	—	`AbstractSplineSource`
`scene`read-only	`any`	—	Gets the Scene this animatable belongs to, if any.	`SkenraAnimatable`
`animations`read-only	`SkenraAnimation[]`	—	Public getter for the animations affecting this target.	`SkenraAnimatable`

Methods

Method	Description	Declared by
`pointAt(t: number): SplinePoint \| null`	Returns a point on the spline at normalized parameter t.	`SVGSplineSource`
`getBoundsInSpace(fullTransform: Float32Array): PolylineBounds \| null`	—	`SVGSplineSource`
`animate(firstArg: TypedKeyframe<this>[] \| TypedPropertyIndexedKeyframes<this> \| Record<string, any> \| globalThis.Keyframe[] \| globalThis.PropertyIndexedKeyframes \| null, secondArg?: number \| KeyframeAnimationOptions \| globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation`	Creates a new SkenraAnimation for this target per Web Animations API.	`SkenraAnimatable`
`removeAnimation(animation: SkenraAnimation): boolean`	Removes a specific animation from this object.	`SkenraAnimatable`
`constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K]`	Creates a constraint on this Animatable using a fluent API.	`SkenraAnimatable`

Example

const source = new SVGSplineSource({
    path: '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,
});

Used in guides: Scene basics

↑ Documentation home · ← All classes