Gradients

Gradient covers the three classical fills: linear, radial, and angular (sweep). GradientAlongPath is a fourth, distinct kind, parameterized by the path's arc length rather than screen position.

import { Gradient, GradientAlongPath, vec } from "redraw";

All gradients accept a list of color stops. With colors only, stops are distributed evenly across [0, 1].

Linear

Colors interpolate between two screen-space points:

brush.addFill(
  new Gradient(
    { type: "linear", p1: vec(x1, y1), p2: vec(x2, y2) },
    ["#8D38AA", "#004AA9"],
  ),
);

Use it for backgrounds, sky-style fades, side-lit panels.

Radial

Concentric color bands from a center outward to a radius:

brush.addFill(
  new Gradient(
    { type: "radial", center: vec(cx, cy), radius: 200 },
    ["#2C2C2C", "#080808"],
  ),
);

Use it for vignettes, spotlights, pseudo-3D ball shading.

Angular

A sweep that rotates around a center (0° → 360°):

brush.addFill(
  new Gradient(
    { type: "angular", center: vec(cx, cy) },
    ["#3FCEBC", "#FF645E", "#3FCEBC"],
  ),
);

Use it for hue wheels, conic indicators, watch-face shading.

Along path

GradientAlongPath is fundamentally different. It's parameterized by ctx.t (the path's arc-length parameter [0, 1]), not by screen position:

import { GradientAlongPath, SingleStrokeBrush } from "redraw";

const brush = new SingleStrokeBrush();
brush.addStroke(
  new GradientAlongPath(["#3FCEBC", "#3CBCEB", "#5F96E7", "#816FE3"]),
  25,
);

Colors flow with the curve, regardless of how it bends through space. This requires SingleStrokeBrush because ctx.t is only available on the single-stroke path (see Brushes).

GradientAlongPath is the simplest way to get a multicolor stroke; it's the gradient used by the Hello World example:

GradientAlongPath: 11-color palette interpolated across the path's arc lengthOpen in editor →

For finer control over how colors are sampled (varying offset, blending between palettes, sidedness across the stroke), write a custom color function. See Custom Effects: Colors.

Combining with strokes

A Brush can stack a gradient body with sharp accents on top:

const brush = new Brush();
brush.addStroke(gradient, 10, Feather.blur(30));   // outer glow
brush.addStroke(gradient, 10);                     // sharp body
brush.addStroke("#fff", 3);                        // white inner highlight

Linear gradient per logo sub-path; three stacked strokes give the glow + body + highlightOpen in editor →

Mutating gradients

Both Gradient and GradientAlongPath are nodes. The geometry (points, center, radius) is fixed at construction; the colors are static. To animate a gradient, build it once and mutate a uniform that uses it, or write a custom color function (see Custom Effects: Colors) that does the interpolation directly.