In a regular 2D library, colors and stroke width are scalar values. In Redraw, you can set a JS function as a callback that will be compiled and executed on the GPU. That callback receives all the geometry information needed to compute the effect: tangent, arc length, distance.

Introducing Project Redraw, a new grade of 2d primitives for Web & Native

For colors, you can build gradients based on the arc length of the path, its distance, or even its tangent. These single-stroke paths support self-intersections.

Self intersections can even be blended with one another

The geometry information on paths is so rich that you can build all sorts of interesting rendering effects. Similar to what ThreeJS does but here your input is an SVG Path, Figma design, not a triangle mesh.

Vector feathering enables a couple of powerful use-cases. Two that I really love: analytical motion blur and fast backdrop filters. These can be built in a single render pass, no extra rasterization needed.

Watch the full announcement at

Redraw is available as a technical preview to subscribers. Your support is what has enabled such an initiative. We are a very early into this project. Lots to figure out.

that's converting or being compiled into a shader, right? kind of like threejs TSL ?

It's TypeGPU

so yeah, it is the same concept, a node system that you write in ts and gets compiled into a shader. I was trying to understand. Looks cool, good job!

@meodai V cool 👌 what does "use gpu" use under the hood?

@meodai The bundler uses that directive to compile the code to WGSL

Congrats, @wcandillon - this is really impressive!!

Thank You 😊😊😊

Did u try a stress test?

I did and for me the best stress test was the postscript tiger. Of course how to accelerate these new primitives is very much an ongoing process 😊