Anti-aliased graphics
for PixiJS v8, smooth as silk.
pixi-silk draws PixiJS shapes as exact distance fields, so every edge is anti-aliased per pixel at any zoom. You use it like Graphics, with gradients, glows, text and UI widgets on top.
What you can draw with it.
Everything pixi-silk draws, paints and lays out, one page per feature. Each page opens on live demos with their source.
Every shape SilkGraphics draws, how to stroke and dash it, and how to combine shapes.
What goes inside a shape: gradients, shadows and blur, inner shadows, glass and glow.
Labels and readouts drawn from distance fields, and text the reader can click and type into.
Buttons, radial menus, responsive layout, hit testing and motion for canvas interfaces.
The pieces of a design tool canvas: camera, rulers, gizmos, selection, path editing, pickers and panels.
One object draws the scene.
- Reads like Graphics.
- Add shapes to the path, then fill or stroke them. Calls chain.
- Edges from distance.
- Coverage comes from the exact distance to the shape, per pixel.
- Paint on any shape.
- Gradients in OKLab, blur, glows and inner shadows on fills and strokes.
- UI on top.
- Text, layout, widgets and editor tools ship as separate entry points.
import { createSilkApp, SilkGraphics, conic } from 'pixi-silk';
const stage = document.getElementById('stage')!;
const { app } = await createSilkApp({ parent: stage });
const gauge = conic([0x30d158, 0xffd60a, 0xff453a]);
const g = new SilkGraphics();
// a squircle card, and a ring whose gradient follows the arc
g.roundRect(10, 10, 340, 140, 22, 0.6).fill(0x1c1c1e);
g.arcSweep(80, 80, 44, -Math.PI / 2, Math.PI * 1.5)
.stroke({ width: 12, cap: 'round', gradient: gauge });
app.stage.addChild(g);Whole screens, with the source.
Five design sheets rebuilt pixel for pixel, three dashboard scenes and four light scenes, all drawn with pixi-silk. Open any of them in Studio.
Build area and line charts with monotone smoothing that never overshoots, fading gradient fills, dashed guides, bars and dots in SilkGraphics.
Every demo as code next to its canvas. Edit the source and it runs again.