These Nile pipelines draw the Ghostscript Tiger's 240 SVG paths. Plain
TypeScript lexes each path's d attribute into
PathCommands, and PathCubics interprets them into
cubic curves. SvgFill transforms a path's cubics, flattens them
to quadratic beziers, clips them and rasterizes them into coverage spans;
SvgStroke transforms and flattens them, then outlines them with
gezira's stroker. PaintSpans turns the spans into coloured
pixels, which TypeScript writes to the canvas. The pipelines are
parameterized by the view matrix (zoom and pan), the SVG's own transform,
the clip rectangle and, for strokes, the width, a minimum width, the join and
the cap. On the GPU, rasterizing and compositing run as WGSL.
This page: about 310 lines of Nile and 370 lines of TypeScript, compiled by umgeni.
How to use: double-click to zoom in (100%, 200%, 400%, then back), and drag to pan. The renderer menu switches between the CPU and the GPU.