Class: FillChain

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

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:80

Parameters

list?

FillProp[] = []

Returns

FillChain

Properties

list

list: FillProp[] = []

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

Methods

[iterator]()

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

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

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:83

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:138

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:156

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:93

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:126

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:144

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:132

Append a radial gradient between colors.

Parameters

colors

Color[]

options?

FillOptions & object

Returns

FillChain

stripe()

stripe(options?): FillChain

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

Append a stripe (hatch) fill.

Parameters

options?

FillOptions & object

Returns

FillChain

toJSON()

toJSON(): FillProp[]

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

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:112

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:188

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