Class: FillChain

Defined in: attributes/shape/fill/chain.ts:80

Immutable, chainable list of fill layers.

Each builder method returns a new FillChain with the layer appended, so chains are safe to share and branch — mirroring EffectChain.

Example

const bg = Fills.image('./background.jpg', { blend: 'overlay', opacity: 0.2 })
                .color('red', { opacity: 0.3 });
node.fill = bg;                 // assign directly
node.fill = [...bg, 'white'];   // spread into an array

Constructors

Constructor

new FillChain(list?): FillChain

Defined in: attributes/shape/fill/chain.ts:81

Parameters

list?

FillProp[] = []

Returns

FillChain

Properties

list

list: FillProp[] = []

Defined in: attributes/shape/fill/chain.ts:81

Methods

[iterator]()

[iterator](): Generator<FillProp, void, unknown>

Defined in: attributes/shape/fill/chain.ts:222

Allows spreading the chain into an array: [...Fills.color('red')].

Returns

Generator<FillProp, void, unknown>

color()

color(color, options?): FillChain

Defined in: attributes/shape/fill/chain.ts:84

Append a solid color fill. A CSS string or normalized [r,g,b,a].

Parameters

color

Color

options?

FillOptions

Returns

FillChain

conicGradient()

conicGradient(colors, options?): FillChain

Defined in: attributes/shape/fill/chain.ts:139

Append a conic gradient between colors.

Parameters

colors

Color[]

options?

FillOptions & object

Returns

FillChain

fractalNoise()

fractalNoise(options?): FillChain

Defined in: attributes/shape/fill/chain.ts:157

Append a fractal (fBm) noise fill — a continuous field rather than the speckle noise paints. Cloud, marble, smoke, terrain, plasma.

Tween offset to travel through the field (it flows); tween seed to shift to a different field entirely (it churns).

Parameters

options?

FillOptions & Omit<FractalNoiseFillProp, "type" | "opacity" | "blend">

Returns

FillChain

image()

image(src, options?): FillChain

Defined in: attributes/shape/fill/chain.ts:94

Append an image fill from src.

Parameters

src

string

options?

FillOptions & MediaPlacementOptions & object

Returns

FillChain

Example

Fills.image('./city.jpg', { zoom: 1.4, anchor: 'topCenter', crop: { bottom: 0.2 } })

linearGradient()

linearGradient(colors, options?): FillChain

Defined in: attributes/shape/fill/chain.ts:127

Append a linear gradient between colors.

Parameters

colors

Color[]

options?

FillOptions & object

Returns

FillChain

noise()

noise(options?): FillChain

Defined in: attributes/shape/fill/chain.ts:145

Append a noise (speckle) fill. Tween seed to make the static crawl.

Parameters

options?

FillOptions & object

Returns

FillChain

radialGradient()

radialGradient(colors, options?): FillChain

Defined in: attributes/shape/fill/chain.ts:133

Append a radial gradient between colors.

Parameters

colors

Color[]

options?

FillOptions & object

Returns

FillChain

shader()

shader(source, options?): FillChain

Defined in: attributes/shape/fill/chain.ts:191

Append a custom SkSL shader fill — the escape hatch past noise and fractalNoise, where the author writes the fragment function.

source must declare vec4 main(vec2 fragCoord) and return premultiplied rgba, without folding opacity in (the layer's opacity is already on the paint, so applying it twice squares it). Uniforms are keyed by their declared name and bound by reflecting the compiled program, so order is irrelevant; the renderer supplies u_size, u_origin, u_resolution, u_aspect, u_time and u_scale to whichever of them the source declares.

Keep source constant — it is the compile-cache key, so it snaps at a tween's midpoint and rebuilding it per frame compiles a program per frame. Everything that changes belongs in a uniform, which is an in-place write.

Parameters

source

string

options?

FillOptions & Omit<ShaderFillProp, "type" | "opacity" | "blend" | "source">

Returns

FillChain

Example

Fills.shader(GLOW, { uniforms: { u_amount: 0.6 }, coords: 'centered' })

stripe()

stripe(options?): FillChain

Defined in: attributes/shape/fill/chain.ts:200

Append a stripe (hatch) fill.

Parameters

options?

FillOptions & object

Returns

FillChain

toJSON()

toJSON(): FillProp[]

Defined in: attributes/shape/fill/chain.ts:227

Serializes to the raw fill array so frameworks that call toJSON get a plain value.

Returns

FillProp[]

video()

video(src, options?): FillChain

Defined in: attributes/shape/fill/chain.ts:113

Append a video fill from src. Plays by default: its source timestamp is derived as it paints, from how long the node carrying the fill has existed — so the clip runs wherever the fill is used (fill, overlay, stroke, shadow, a custom node's Graphics) with nothing to advance.

Parameters

src

string

options?

VideoFillOptions

Returns

FillChain

view3D()

view3D(graphics3D, options?): FillChain

Defined in: attributes/shape/fill/chain.ts:216

Append a 3D scene, painted through the shape's own path.

Takes a built Graphics3D, never a builder — per-frame freshness comes from where the value is produced (a renderSelf, or a () => … reactive binding), like every other fill.

Note two same-type 3D layers hard-cut rather than cross-fading, because a command list has no meaningful in-between. To dissolve between two scenes, stack them and tween their opacities in opposite directions.

Parameters

graphics3D

Graphics3D

options?

FillOptions & object

Returns

FillChain