Redraw

Redraw is a 2D graphics library built on top of WebGPU. It supports variable strokes, colors along paths, and physically 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 write TypeScript functions for the stroke and color of your shapes. These functions are compiled to WGSL at build time and executed on the GPU. For instance, in the example below we define a variable stroke width for a path:

import { strokeWidth } from "redraw";
import { std } from "typegpu";

// A strokeWidth function is compiled and executed on the GPU.
// It receives geometric information as parameters, for instance
// the normalized arc length of the path (ctx.t) or its tangent (ctx.tan).
const Taper = strokeWidth(
  (ctx, tctx, props) => {
    "use gpu";
    return std.mix(props.minWidth, props.maxWidth, ctx.t);
  },
  { minWidth: 0, maxWidth: 0 },
  { maxStrokeWidth: 15 },
);

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:

import { color, Color } from "redraw";
import { std } from "typegpu";

const PathGradient = color(
  (paint, ctx, tctx, props) => {
    "use gpu";
    const a = Color("#3FCEBC");
    const b = Color("#DE589F");
    paint.color = std.mix(a, b, ctx.t);
  },
  { shift: 0 },
);

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 →