Lab
Full-screen anti-aliasing experiments for PixiJS v8: Graphics vs SDF, infinite zoom, sub-pixel motion, gradients, glows, live widgets and a stress test. Every page has a pixel loupe: press L and hover to see real device pixels.
Foundations
All 24 shape kinds side by side: rects, squircles, circles, arcs, sectors, lines, areas, dashes, icons, blur.
The same scene with Graphics (no AA), Graphics + MSAA 4x and Silk. Hover to magnify device pixels.
Five nested levels, 3000x apart. Curves stay exact, hairlines fade instead of aliasing.
Objects drifting at 2 px/s: tessellation crawls between samples, distance fields glide.
Siemens star, 1-device-pixel grating, live 1x / 1.5x / 2x / 3x switching and 1:1 mapping check.
Why Graphics goes jaggy and blurry behind a filter, and why Silk does not.
Primitives
Per-corner radii and continuous-curvature corners with a live smoothing slider.
Conic gradients that follow each arc, >100% overlap with a soft tip shadow, springs.
Widths from 0.1 to 8 px, translucent joints without double blending, caps, gradients along strokes.
Dash patterns drawn in the shader: caps, closed outlines without a seam, marching ants, spinners.
Sixteen glyphs built from primitives, crisp at 16, 28 and 56 px. Uses save / translateTransform.
Paint
Linear, radial, conic and along-the-path gradients, extend modes, sRGB vs linear vs OKLab, premultiplied alpha.
Half-float ramps with ±0.5 LSB dither. Toggle dither and "reveal x8" to watch the contour lines disappear.
Analytic gaussian blur on the distance field: neon glows, elevation shadows, bokeh. No extra passes.
Widgets from the references
Smoothed series, gradient fill, dotted guides, dashed forecast, NOW marker, eased updates.
Slim bars with a past/future split and chunky stepped bars that grow in.
Heart-rate pills and a live pressure waveform sharing one gradient.
Progress bars with markers, range segments and signal bars, all anti-aliased at any size and pixel ratio.
Ten Apple Health style cards with area, bar, candle and range charts, drawn as smooth distance fields.
ISS flyover, car battery, heading dial with ticks, barometer, UV week, dimmer.
Value-coloured strokes, gradient markers, threshold stops, interactive crosshair.
Stage blocks with transitions, night strip, marching dotted arc.
Espresso ticks with analytic motion blur, run cadence bars and controls.
Flight progress, train stations, delivery route, ride pickup, race track.
Sunset pills with a glowing sun and stars, golden-hour curve, daylight bar.
Reference sheets, rebuilt 1:1
Ten Health cards over the first reference: area, bar, candle and range charts. Compare slider included.
Twenty watch complications from the second reference, laid out in its exact pixels.
Twenty more: calendar week, hike map, sound levels, elevation, water, wind, boarding pass.
Black cards with continuous corners and measured soft shadows on the light sheet, edges cropped like the reference.
Cycling, 2FA, now playing, crosshair, garage, AirPods compass, barometer, moon phases.
Pick any of the 81 widgets and see it large next to its crop of the reference, or overlaid on it.