Creative Coding

Matt DesLauriers Solved Pixel Coverage for Bézier Curves in Closed Form, in WebGPU

Windfoil computes the box-filtered winding number of quadratic Bézier contours analytically — matching the reference more closely than Skia or Slug, at comparable speed, and differentiable.

Matt DesLauriers is a name a lot of this audience will recognise — generative artist, author of canvas-sketch, the person behind Meridian and a long body of plotter and generative work, and one of the more rigorous technical writers in creative coding.

He has posted a paper, and it is about the thing underneath everything he makes: how a vector shape becomes pixels.

Windfoil: Closed-Form Coverage for Real-Time and Differentiable Vector Graphics, posted 1 October 2026.

What it does

A GPU-optimised algorithm that computes the box-filtered winding number of quadratic Bézier contours in closed form. Implemented in WebGPU, so it runs across browsers and devices.

And it unifies two things that have been separate: rasterisation and differentiable vector graphics.

Why coverage is the hard problem

Rendering a vector shape means answering, for every pixel: how much of this pixel is inside the shape? That number — coverage, between 0 and 1 — is your anti-aliased alpha.

For a straight-edged polygon there are exact answers. For a shape bounded by Bézier curves it is much harder, because you are asking for the area of intersection between a pixel square and a curved region, and there is no simple formula for that in the general case.

So production renderers approximate. The standard approaches:

  • Supersampling — evaluate inside/outside at many points per pixel and average. Simple, robust, and expensive; quality is bounded by sample count, and thin features between samples disappear.
  • Analytic coverage for line segments — flatten the curves into many short straight edges, then compute exact coverage for those. This is roughly what Skia (Chrome, Android, Flutter) does. Accuracy depends on how finely you flatten, and flattening is itself a cost.
  • Signed-distance approaches — Slug and the MSDF family encode the shape as a distance field and threshold it. Extremely fast and resolution-independent, with characteristic failures at sharp corners and thin features.

Windfoil’s claim is that you do not have to approximate. The box-filtered winding number — the winding number convolved with a pixel-sized box filter, which is coverage under a box reconstruction filter — has a closed form for quadratic Béziers. Solve it analytically and you get the exact answer with no sampling and no flattening.

The result, per the paper: it “matches the reference more closely than either” Skia or Slug, at comparable speed to production renderers.

The differentiability is the half that changes what you can build

A closed-form expression is differentiable. Which means you can compute the gradient of every pixel’s coverage with respect to the control points of the curves that produced it.

That turns rendering into something you can optimise through:

  • Vectorise a raster image by gradient descent — start with some curves, render, compare to the target, move the control points. This is how differentiable vector graphics works, and diffvg is the established tool for it.
  • Fit a font or a logo to a scan
  • Optimise a vector representation for a constraint — fewest curves, a pen plotter’s travel distance, a cutting machine’s path
  • Put a vector renderer inside a neural network and train end to end

The paper’s claim here is about cost: the optimiser “reaches equivalent or better reconstruction quality at a fraction of the per-step cost, scaling to tens of thousands of shapes at interactive rates.”

Interactive rates on tens of thousands of shapes is the part to notice. Differentiable vector graphics has historically been an offline process — set up an optimisation, wait. Interactive means you can watch it converge, intervene, and treat it as a tool rather than a batch job. That is a completely different relationship for an artist.

Why WebGPU is the right target

The paper is implemented in WebGPU, and for this audience that is as significant as the algorithm.

It means no install. A vector renderer that runs in a browser tab is a renderer you can hand someone as a URL, embed in documentation, or ship as an artwork. We have covered a steady run of this — Web MIDI synth editors, the browser impulse-response designer, Web Serial for Arduino — and it is the same pattern: the browser became a serious runtime and a lot of tooling is quietly relocating there.

And WebGPU specifically gives you compute shaders, which is what makes a GPU rasteriser feasible at all. This was not buildable in WebGL.

What to do with it

If you work in vector — generative SVG, plotter art, type, motion graphics, laser cutting — this is worth watching for two reasons. The quality claim means better anti-aliasing than Skia for curved shapes, which is directly visible in thin strokes and small type. The differentiability claim means image-to-vector becomes an interactive operation rather than a batch one.

The caveat, as always with a fresh paper: quadratic Béziers. Fonts use quadratics (TrueType) and cubics (PostScript/CFF, and SVG’s C command); cubics can be subdivided into quadratics to arbitrary accuracy, which is standard practice, but it is a step the pipeline has to do.