Redraw

Redraw is a 2D graphics library built on top of WebGPU. It supports variable strokes, colors along paths, phyically based renderings. An important feature of Redraw is vector feathering which allows fast blurs that don't require any rasterization step. This enables use-cases such as analytical motion blur or fast backdrop filters.

Variable stroke width and color along the pathOpen in editor →

At the heart of the library is the ability to set TypeScript functions for the stroke and color of the paths. For instance in the example below we set a variable stroke value to the path.

// StrokeWidth is a function compiled and executed on GPU
// It receives geometric information as parameter
// For instance the arclength of the path (ctx.t) or its tangent (ctx.tan)
const StrokeWidth = fn(
  (canvas, ctx) => {
    "use gpu";
    // canvas.field is a generic field value, used here as stroke width,
    canvas.field = std.mix(5, 30, ctx.t);
  },
);

And the same idea for color: ctx.t runs from 0 at the start of the path to 1 at the end, so mixing two colors gives a gradient along the geometry:

// You can also have colors variables to the geometry
const Color = fn(
  (canvas, ctx) => {
    "use gpu";
    const a = parseColor("#3FCEBC");
    const b = parseColor("#DE589F");
    canvas.color = std.mix(a, b, ctx.t);
  },
);

In a typical 2D pipeline, a backdrop filter (frosted glass, blur-behind, inner glow) needs an offscreen surface: render everything below the layer into a separate texture, blur or otherwise filter that texture, then composite it back into the main framebuffer. That's two extra rasterization passes per layer.

Redraw doesn't do that. pushLayer/popLayer is evaluated analytically inside the same render pass: the feather, clip, and tint fold directly into the SDF math, with no offscreen target and no separate rasterization step. Stacking layers compounds at almost no extra cost.

In redraw, layers are fused: everything is computed in a single pass, no rasterization is involvedOpen in editor →