Reference
API reference
Classes#
| Class | Description |
|---|---|
| ConicGradient | An angular ramp around a centre. On arcs it follows the arc. Create it with conic. |
| Gradient | Base class of all gradients. Stops are interpolated premultiplied (OKLab by default), baked into a shared half-float atlas and dithered when sampled, so gradients stay smooth without banding. |
| GradientAtlas | All gradient ramps live in one RGBA16F texture (one ramp per row), shared by every SilkGraphics. Half floats keep ~11 bits per channel so dark and low-alpha ramps don’t get quantised before the shader dithers them to the 8-bit framebuffer. |
| LinearGradient | A straight ramp between two points. Create it with linear, vertical or horizontal. |
| PathGradient | A ramp that follows a stroke from its first point (t = 0) to its last (t = 1). Create it with along. |
| RadialGradient | A ramp from a centre outwards, optionally starting at an inner radius. Create it with radial. |
| SilkGeometry | Geometry behind every SilkGraphics: one unit quad plus an interleaved instance buffer (40 floats per primitive). You rarely need it directly. |
| SilkGraphics | A PixiJS display object with a Graphics-like API. Every primitive is a signed distance field evaluated per pixel, so edges are smooth at any scale, rotation and device pixel ratio. Each object is one instanced draw call. |
| Spring | Damped harmonic spring (semi-implicit Euler with fixed sub-steps). stiffness / damping follow the usual UI spring convention (e.g. 170 / 26). |
Interfaces#
| Interface | Description |
|---|---|
| AreaOptions | Options of area(): monotone smoothing of the series and its sample spacing. |
| ConicGradientOptions | Options of conic: stops plus centre, start angle and sweep. |
| FillStyle | How a fill is painted: a colour, a gradient, opacity and an optional gaussian blur for glows and soft shadows. |
| GradientOptions | Options shared by every gradient: colour stops, interpolation space, easing, extend mode and units. |
| LinearGradientOptions | Options of linear: stops plus the start and end points of the ramp. |
| PolylineOptions | Options of polyline(): closed loops and monotone or Catmull-Rom smoothing of the points. |
| RadialGradientOptions | Options of radial: stops plus centre, outer radius and inner radius. |
| SilkApp | What createSilkApp returns: the Pixi application, its CSS size and resolution, and helpers to change or destroy it. |
| SilkAppOptions | Options of createSilkApp: Pixi application options plus the element to fill, DPR limits and touch behaviour. |
| SilkGraphicsOptions | Per-object rendering settings of a SilkGraphics: dithering, anti-aliasing width and hairline threshold. |
| StrokeStyle | How a stroke is painted: width (or tapered widths), alignment, caps, dashes, plus everything in FillStyle. |
Type Aliases#
| Type Alias | Description |
|---|---|
| ColorSpace | Colour space gradients are interpolated in: perceptual OKLab (default), linear light, or plain sRGB. |
| Easing | How the ramp moves between stops. |
| ExtendMode | What a gradient does outside 0..1: hold the end colours (pad), tile (repeat) or mirror (reflect). |
| FillInput | What fill() accepts: any Pixi colour, a gradient or a FillStyle. |
| GradientUnits | Gradient coordinates: shape = fractions of each painted shape’s box, local = the graphics’ local units (one ramp across many shapes). |
| LineCap | Shape of the ends of open paths and of every dash: flat, round or square. |
| PointsInput | Points as a flat [x0, y0, x1, y1, ...] array, a typed array, or an array of { x, y } objects. |
| RGBA | Straight (non-premultiplied) sRGB colour with alpha, all channels 0..1, as returned by parseColor. |
| StopInput | A color stop: a bare color (stops are spread evenly), [offset, color], [offset, color, alpha] or { offset, color, alpha }. |
| StrokeInput | What stroke() accepts: any Pixi colour, a gradient or a StrokeStyle. |
| Vec2 | A point [x, y]. In shape units, x and y are fractions of the painted shape’s box. |
Variables#
| Variable | Description |
|---|---|
| ease | Easing curves for tweens (t from 0 to 1): inOutCubic, outCubic, inOutSine, outExpo. |
Functions#
| Function | Description |
|---|---|
| along | Gradient that follows a stroke from its first point (t = 0) to its last (t = 1). |
| catmullRom | Centripetal Catmull-Rom spline through the points (no cusps or self-loops). |
| conic | Conic (angular) gradient. On arcs and sectors it spans the arc by default, so a ring’s ramp always runs from its start cap to its end cap. |
| createSilkApp | Creates a Pixi application tuned for smooth vector output: |
| damp | Exponential approach: moves current towards target. lambda is about 1/seconds, higher is snappier. |
| dampAngle | Damped angle approach along the shortest path. |
| horizontal | Left-to-right linear gradient across the painted shape. |
| linear | Linear gradient. from / to default to top and bottom of the shape’s box (units: 'shape'). |
| linearToOklab | Converts linear-light sRGB to OKLab (Björn Ottosson’s perceptual colour space), used to interpolate gradients evenly. |
| monotoneX | Monotone cubic interpolation in x (Steffen’s method, same family as d3’s monotoneX). Never overshoots the data: peaks stay at the data points, flat runs stay flat. step is the target spacing of the output samples in local units. |
| oklabToLinear | Converts OKLab back to linear-light sRGB. Out-of-gamut colours fall outside 0..1, so callers clamp. |
| parseColor | Any Pixi ColorSource as straight sRGB [r, g, b, a] (0..1), with alpha multiplied in. Memoised. |
| radial | Radial gradient from center (default the box centre) out to radius, optionally starting at innerRadius. |
| toFlat | Normalises [x0, y0, x1, y1, ...] or [{x, y}, ...] into a flat number array. |
| vertical | Top-to-bottom linear gradient across the painted shape. |