# pixi-silk

> Smooth vector graphics for PixiJS v8. pixi-silk draws shapes as exact signed distance fields, so every edge is anti-aliased per pixel. Edges stay smooth at any zoom, rotation and device pixel ratio, without MSAA, and each object is one draw call.

pixi-silk 0.1.0 is an MIT-licensed TypeScript library. It needs pixi.js ^8 (peer dependency) and WebGL2.
- `SilkGraphics` is a display object with a Graphics-like API. It draws rects and squircles (per-corner radii), circles, ellipses, arcs, sectors, lines, polylines (smoothed or tapered), Bezier paths (stroke only), chart areas, hearts, stars, polygons and rounded triangles.
- Paint: colours, gradients (linear, radial, conic, along the path), a gaussian `blur` for glows and soft shadows, dashes and dots. Gradients mix in OKLab and are dithered. Strokes align inside, center or outside.
- `createSilkApp` creates a Pixi Application whose canvas maps 1:1 to device pixels, even at fractional ratios. It follows DPR changes, uses no MSAA and renders filters at screen resolution.
- Also: transforms (save, restore, translate, rotate, scale), hit testing against the real shapes, and motion helpers (damp, Spring, ease).
- Limits: WebGL2 only, no WebGPU yet. Free-form paths are stroke-only. Joins are always round.

Site: https://pixi-silk.schmooky.dev
Repository: https://github.com/schmooky/pixi-silk
Package: https://www.npmjs.com/package/pixi-silk

## Quick start

```bash
npm install pixi-silk pixi.js
```

```ts
import { createSilkApp, SilkGraphics, conic, vertical } from 'pixi-silk';

const { app } = await createSilkApp({ parent: document.getElementById('stage')!, background: 0x000000 });
const g = new SilkGraphics();

g.roundRect(10, 10, 340, 140, 22, 0.6).fill(0x1c1c1e);                        // squircle card
g.arcSweep(80, 80, 44, -Math.PI / 2, Math.PI * 1.5)
    .stroke({ width: 12, cap: 'round', gradient: conic([0x30d158, 0xffd60a, 0xff453a]) });
g.area([120, 100, 170, 80, 220, 92, 270, 60, 320, 70], 130, { smooth: 'monotone' })
    .fill(vertical([[0, 0xff9f0a, 0.8], [1, 0xff9f0a, 0]]))
    .stroke({ width: 2, color: 0xff9f0a, cap: 'round' });
app.stage.addChild(g);
```

## Key terms

- Anti-aliasing: Techniques that remove the jagged "staircase" look of edges on a pixel grid. Each edge pixel gets a partial colour proportional to how much of it the shape covers.
- Analytic anti-aliasing: Anti-aliasing computed exactly per pixel from the shape's geometry, not from extra samples. pixi-silk derives coverage from the signed distance to the shape and the size of one device pixel.
- MSAA: A GPU technique that stores several coverage samples per pixel (typically 4) and averages them. In PixiJS, you enable it with antialias: true. By default it covers only the main canvas. Filters and render textures must opt in one by one.
- Signed distance field: A function that returns the distance from any point to the nearest edge of a shape: negative inside, positive outside. Rendering a shape from its SDF gives exact edges at any scale.
- Device pixel ratio: The number of physical screen pixels per CSS pixel: 1 on standard displays, 2 or 3 on retina or HiDPI screens. Many laptops and phones have fractional ratios such as 1.25 or 1.5.
- Squircle: A rounded rectangle whose corners are superellipse arcs, so curvature grows gradually from the straight edge instead of jumping. iOS app icons and cards use it.
- Gradient banding: Visible steps in a smooth gradient caused by 8-bit colour precision, most obvious in dark, wide gradients.

## Docs

- [Introduction](https://pixi-silk.schmooky.dev/docs/introduction/): pixi-silk is a Graphics-like object for PixiJS v8. It draws shapes as exact signed distance fields, so edges stay smooth and anti-aliased at any zoom and DPR. (Markdown: https://pixi-silk.schmooky.dev/docs/introduction.md)
- [Installation](https://pixi-silk.schmooky.dev/docs/installation/): Install pixi-silk with npm, pnpm, yarn or bun next to pixi.js v8. It needs WebGL2 and ships tree-shakeable ESM with TypeScript types, about 15 kB gzipped. (Markdown: https://pixi-silk.schmooky.dev/docs/installation.md)
- [Quick start](https://pixi-silk.schmooky.dev/docs/quick-start/): Create a DPR-exact PixiJS app with createSilkApp, then draw a squircle card, a gradient gauge and an area chart with SilkGraphics. (Markdown: https://pixi-silk.schmooky.dev/docs/quick-start.md)
- [Migrating from Graphics](https://pixi-silk.schmooky.dev/docs/migrating-from-graphics/): SilkGraphics mirrors the PixiJS v8 Graphics API: shapes on a path, fill and stroke, transforms. See what is the same, what differs and what is new. (Markdown: https://pixi-silk.schmooky.dev/docs/migrating-from-graphics.md)
- [Anti-aliasing in PixiJS v8](https://pixi-silk.schmooky.dev/docs/antialiasing-in-pixijs/): Compare six ways to get smooth graphics in PixiJS v8: MSAA, higher resolution, curve smoothness, supersampling, FXAA and analytic SDF anti-aliasing. (Markdown: https://pixi-silk.schmooky.dev/docs/antialiasing-in-pixijs.md)
- [Smooth graphics in PixiJS v8](https://pixi-silk.schmooky.dev/docs/smooth-graphics-pixijs/): Find the cause and fix for jagged edges, faceted circles, flickering thin lines, blurry retina canvases, blurry filters and banded gradients in PixiJS v8. (Markdown: https://pixi-silk.schmooky.dev/docs/smooth-graphics-pixijs.md)
- [@pixi/graphics-smooth and PixiJS v8](https://pixi-silk.schmooky.dev/docs/graphics-smooth-v8/): @pixi/graphics-smooth, the anti-aliased Graphics plugin, targets PixiJS v7. For smooth, anti-aliased lines and shapes on PixiJS v8, use SilkGraphics. (Markdown: https://pixi-silk.schmooky.dev/docs/graphics-smooth-v8.md)
- [Glossary](https://pixi-silk.schmooky.dev/docs/glossary/): Short definitions of anti-aliasing, MSAA, SSAA, FXAA, signed distance fields, coverage, device pixel ratio, squircles, OKLab, banding and dithering. (Markdown: https://pixi-silk.schmooky.dev/docs/glossary.md)
- [Shapes](https://pixi-silk.schmooky.dev/docs/shapes/): Rects, squircles with per-corner radii, pills, circles, ellipses, hearts, stars, polygons and rounded triangles, each an exact anti-aliased distance field. (Markdown: https://pixi-silk.schmooky.dev/docs/shapes.md)
- [Arcs, sectors & rings](https://pixi-silk.schmooky.dev/docs/arcs-and-rings/): Arcs with round, butt or square caps, pie and donut sectors with rounded corners, and activity rings whose conic gradients follow the arc. (Markdown: https://pixi-silk.schmooky.dev/docs/arcs-and-rings.md)
- [Lines & paths](https://pixi-silk.schmooky.dev/docs/lines-and-paths/): Anti-aliased lines and polylines with monotone or Catmull-Rom smoothing, Bezier paths, tapered strokes and translucent joints without double blending. (Markdown: https://pixi-silk.schmooky.dev/docs/lines-and-paths.md)
- [Fills & strokes](https://pixi-silk.schmooky.dev/docs/fills-and-strokes/): Paint styles, stroke alignment (inside, center or outside), fill and stroke without a seam, and hairlines that fade instead of breaking up. (Markdown: https://pixi-silk.schmooky.dev/docs/fills-and-strokes.md)
- [Dashes & dots](https://pixi-silk.schmooky.dev/docs/dashes/): Dash patterns computed in the shader, with caps on every dash, dots from zero-length dashes, closed outlines without a seam, and marching ants. (Markdown: https://pixi-silk.schmooky.dev/docs/dashes.md)
- [Gradients](https://pixi-silk.schmooky.dev/docs/gradients/): Linear, radial, conic and along-the-path gradients in OKLab, with smooth easing. Half-float ramps and dithering keep dark gradients free of banding. (Markdown: https://pixi-silk.schmooky.dev/docs/gradients.md)
- [Blur, glows & shadows](https://pixi-silk.schmooky.dev/docs/blur-and-shadows/): A gaussian blur applied to each shape's distance field gives neon glows, soft drop shadows and motion blur without filters or extra passes. (Markdown: https://pixi-silk.schmooky.dev/docs/blur-and-shadows.md)
- [Charts](https://pixi-silk.schmooky.dev/docs/charts/): Anti-aliased line and area charts with monotone smoothing that never overshoots, fading gradient fills, dotted guides, bars and dots. (Markdown: https://pixi-silk.schmooky.dev/docs/charts.md)
- [Transforms](https://pixi-silk.schmooky.dev/docs/transforms/): Save, restore, translate, rotate and scale the drawing. Rotated and scaled primitives stay exact, and stroke widths scale with them. (Markdown: https://pixi-silk.schmooky.dev/docs/transforms.md)
- [Hit testing & events](https://pixi-silk.schmooky.dev/docs/hit-testing/): Pointer events test each shape's real distance field: rings are hollow, lines react only within their stroke and rounded corners stay rounded. (Markdown: https://pixi-silk.schmooky.dev/docs/hit-testing.md)
- [Animation](https://pixi-silk.schmooky.dev/docs/animation/): Redraw SilkGraphics cheaply every frame. Animate with damp, dampAngle, Spring and ease so motion feels the same at 60, 120 or 144 Hz. (Markdown: https://pixi-silk.schmooky.dev/docs/animation.md)
- [Resolution & DPR](https://pixi-silk.schmooky.dev/docs/resolution/): createSilkApp maps the canvas 1:1 to device pixels, even at fractional DPRs, follows DPR changes and renders filters at screen resolution. (Markdown: https://pixi-silk.schmooky.dev/docs/resolution.md)
- [Performance](https://pixi-silk.schmooky.dev/docs/performance/): One instanced draw call per SilkGraphics and about 12 ms of CPU to rebuild 50,000 primitives, plus tips for static layers, gradients and fill rate. (Markdown: https://pixi-silk.schmooky.dev/docs/performance.md)
- [How it works](https://pixi-silk.schmooky.dev/docs/how-it-works/): One instanced quad per primitive, exact signed distance functions per pixel, analytic coverage from screen-space derivatives and dithered OKLab ramps. (Markdown: https://pixi-silk.schmooky.dev/docs/how-it-works.md)

## API reference

- [Overview](https://pixi-silk.schmooky.dev/api/): every export, generated from the source JSDoc.
- [ConicGradient](https://pixi-silk.schmooky.dev/api/classes/ConicGradient/): Class. An angular ramp around a centre. On arcs it follows the arc. Create it with conic.
- [Gradient](https://pixi-silk.schmooky.dev/api/classes/Gradient/): Class. Base class of all gradients. Stops are interpolated premultiplied (OKLab by default), baked into a shared half-float atlas and dithered when sampled, so...
- [GradientAtlas](https://pixi-silk.schmooky.dev/api/classes/GradientAtlas/): Class. All gradient ramps live in one RGBA16F texture (one ramp per row), shared by every SilkGraphics.
- [LinearGradient](https://pixi-silk.schmooky.dev/api/classes/LinearGradient/): Class. A straight ramp between two points. Create it with linear, vertical or horizontal.
- [PathGradient](https://pixi-silk.schmooky.dev/api/classes/PathGradient/): Class. A ramp that follows a stroke from its first point (t = 0) to its last (t = 1). Create it with along.
- [RadialGradient](https://pixi-silk.schmooky.dev/api/classes/RadialGradient/): Class. A ramp from a centre outwards, optionally starting at an inner radius. Create it with radial.
- [SilkGeometry](https://pixi-silk.schmooky.dev/api/classes/SilkGeometry/): Class. Geometry behind every SilkGraphics: one unit quad plus an interleaved instance buffer (40 floats per primitive). You rarely need it directly.
- [SilkGraphics](https://pixi-silk.schmooky.dev/api/classes/SilkGraphics/): Class. A PixiJS display object with a Graphics-like API. Every primitive is a signed distance field evaluated per pixel, so edges are smooth at any scale,...
- [Spring](https://pixi-silk.schmooky.dev/api/classes/Spring/): Class. Damped harmonic spring (semi-implicit Euler with fixed sub-steps). stiffness / damping follow the usual UI spring convention (e.g. 170 / 26).
- [along](https://pixi-silk.schmooky.dev/api/functions/along/): Function. Gradient that follows a stroke from its first point (t = 0) to its last (t = 1).
- [catmullRom](https://pixi-silk.schmooky.dev/api/functions/catmullRom/): Function. Centripetal Catmull-Rom spline through the points (no cusps or self-loops).
- [conic](https://pixi-silk.schmooky.dev/api/functions/conic/): Function. Conic (angular) gradient. On arcs and sectors it spans the arc by default, so a ring's ramp always runs from its start cap to its end cap.
- [createSilkApp](https://pixi-silk.schmooky.dev/api/functions/createSilkApp/): Function. Creates a Pixi application tuned for smooth vector output:. Function createSilkApp of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [damp](https://pixi-silk.schmooky.dev/api/functions/damp/): Function. Exponential approach: moves current towards target. lambda is about 1/seconds, higher is snappier.
- [dampAngle](https://pixi-silk.schmooky.dev/api/functions/dampAngle/): Function. Damped angle approach along the shortest path. Function dampAngle of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [horizontal](https://pixi-silk.schmooky.dev/api/functions/horizontal/): Function. Left-to-right linear gradient across the painted shape. Function horizontal of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [linear](https://pixi-silk.schmooky.dev/api/functions/linear/): Function. Linear gradient. from / to default to top and bottom of the shape's box (units: 'shape').
- [linearToOklab](https://pixi-silk.schmooky.dev/api/functions/linearToOklab/): Function. Converts linear-light sRGB to OKLab (Björn Ottosson's perceptual colour space), used to interpolate gradients evenly.
- [monotoneX](https://pixi-silk.schmooky.dev/api/functions/monotoneX/): Function. Monotone cubic interpolation in x (Steffen's method, same family as d3's monotoneX).
- [oklabToLinear](https://pixi-silk.schmooky.dev/api/functions/oklabToLinear/): Function. Converts OKLab back to linear-light sRGB. Out-of-gamut colours fall outside 0..1, so callers clamp.
- [parseColor](https://pixi-silk.schmooky.dev/api/functions/parseColor/): Function. Any Pixi ColorSource as straight sRGB [r, g, b, a] (0..1), with alpha multiplied in. Memoised.
- [radial](https://pixi-silk.schmooky.dev/api/functions/radial/): Function. Radial gradient from center (default the box centre) out to radius, optionally starting at innerRadius.
- [toFlat](https://pixi-silk.schmooky.dev/api/functions/toFlat/): Function. Normalises [x0, y0, x1, y1, ...] or [{x, y}, ...] into a flat number array.
- [vertical](https://pixi-silk.schmooky.dev/api/functions/vertical/): Function. Top-to-bottom linear gradient across the painted shape. Function vertical of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [AreaOptions](https://pixi-silk.schmooky.dev/api/interfaces/AreaOptions/): Interface. Options of area(): monotone smoothing of the series and its sample spacing.
- [ConicGradientOptions](https://pixi-silk.schmooky.dev/api/interfaces/ConicGradientOptions/): Interface. Options of conic: stops plus centre, start angle and sweep. Interface ConicGradientOptions of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [FillStyle](https://pixi-silk.schmooky.dev/api/interfaces/FillStyle/): Interface. How a fill is painted: a colour, a gradient, opacity and an optional gaussian blur for glows and soft shadows.
- [GradientOptions](https://pixi-silk.schmooky.dev/api/interfaces/GradientOptions/): Interface. Options shared by every gradient: colour stops, interpolation space, easing, extend mode and units.
- [LinearGradientOptions](https://pixi-silk.schmooky.dev/api/interfaces/LinearGradientOptions/): Interface. Options of linear: stops plus the start and end points of the ramp. Interface LinearGradientOptions of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [PolylineOptions](https://pixi-silk.schmooky.dev/api/interfaces/PolylineOptions/): Interface. Options of polyline(): closed loops and monotone or Catmull-Rom smoothing of the points.
- [RadialGradientOptions](https://pixi-silk.schmooky.dev/api/interfaces/RadialGradientOptions/): Interface. Options of radial: stops plus centre, outer radius and inner radius. Interface RadialGradientOptions of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [SilkApp](https://pixi-silk.schmooky.dev/api/interfaces/SilkApp/): Interface. What createSilkApp returns: the Pixi application, its CSS size and resolution, and helpers to change or destroy it.
- [SilkAppOptions](https://pixi-silk.schmooky.dev/api/interfaces/SilkAppOptions/): Interface. Options of createSilkApp: Pixi application options plus the element to fill, DPR limits and touch behaviour.
- [SilkGraphicsOptions](https://pixi-silk.schmooky.dev/api/interfaces/SilkGraphicsOptions/): Interface. Per-object rendering settings of a SilkGraphics: dithering, anti-aliasing width and hairline threshold.
- [StrokeStyle](https://pixi-silk.schmooky.dev/api/interfaces/StrokeStyle/): Interface. How a stroke is painted: width (or tapered widths), alignment, caps, dashes, plus everything in FillStyle.
- [ColorSpace](https://pixi-silk.schmooky.dev/api/types/ColorSpace/): Type. Colour space gradients are interpolated in: perceptual OKLab (default), linear light, or plain sRGB.
- [Easing](https://pixi-silk.schmooky.dev/api/types/Easing/): Type. How the ramp moves between stops. Type Easing of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [ExtendMode](https://pixi-silk.schmooky.dev/api/types/ExtendMode/): Type. What a gradient does outside 0..1: hold the end colours (pad), tile (repeat) or mirror (reflect).
- [FillInput](https://pixi-silk.schmooky.dev/api/types/FillInput/): Type. What fill() accepts: any Pixi colour, a gradient or a FillStyle. Type FillInput of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [GradientUnits](https://pixi-silk.schmooky.dev/api/types/GradientUnits/): Type. Gradient coordinates: shape = fractions of each painted shape's box, local = the graphics' local units (one ramp across many shapes).
- [LineCap](https://pixi-silk.schmooky.dev/api/types/LineCap/): Type. Shape of the ends of open paths and of every dash: flat, round or square.
- [PointsInput](https://pixi-silk.schmooky.dev/api/types/PointsInput/): Type. Points as a flat [x0, y0, x1, y1, ...] array, a typed array, or an array of { x, y } objects.
- [RGBA](https://pixi-silk.schmooky.dev/api/types/RGBA/): Type. Straight (non-premultiplied) sRGB colour with alpha, all channels 0..1, as returned by parseColor.
- [StopInput](https://pixi-silk.schmooky.dev/api/types/StopInput/): Type. A color stop: a bare color (stops are spread evenly), [offset, color], [offset, color, alpha] or { offset, color, alpha }.
- [StrokeInput](https://pixi-silk.schmooky.dev/api/types/StrokeInput/): Type. What stroke() accepts: any Pixi colour, a gradient or a StrokeStyle. Type StrokeInput of pixi-silk, smooth anti-aliased graphics for PixiJS v8.
- [Vec2](https://pixi-silk.schmooky.dev/api/types/Vec2/): Type. A point [x, y]. In shape units, x and y are fractions of the painted shape's box.
- [ease](https://pixi-silk.schmooky.dev/api/variables/ease/): Variable. Easing curves for tweens (t from 0 to 1): inOutCubic, outCubic, inOutSine, outExpo.

## Lab and showcase

- [Showcase](https://pixi-silk.schmooky.dev/showcase/): five design reference sheets rebuilt 1:1 (81 widgets).
- [Primitives](https://pixi-silk.schmooky.dev/lab/01-primitives/): All 24 shape kinds side by side: rects, squircles, circles, arcs, sectors, lines, areas, dashes, icons, blur.
- [v8 Graphics vs Silk](https://pixi-silk.schmooky.dev/lab/02-versus/): The same scene with Graphics (no AA), Graphics + MSAA 4x and Silk. Hover to magnify device pixels.
- [Infinite zoom](https://pixi-silk.schmooky.dev/lab/03-zoom/): Five nested levels, 3000x apart. Curves stay exact, hairlines fade instead of aliasing.
- [Sub-pixel motion](https://pixi-silk.schmooky.dev/lab/04-subpixel/): Objects drifting at 2 px/s: tessellation crawls between samples, distance fields glide.
- [Resolution & device pixels](https://pixi-silk.schmooky.dev/lab/05-resolution/): Siemens star, 1-device-pixel grating, live 1x / 1.5x / 2x / 3x switching and 1:1 mapping check.
- [Filters & render textures](https://pixi-silk.schmooky.dev/lab/06-render-texture/): Why Graphics goes jaggy and blurry behind a filter, and why Silk does not.
- [Rounded rects & squircles](https://pixi-silk.schmooky.dev/lab/07-rounded-rects/): Per-corner radii and continuous-curvature corners with a live smoothing slider.
- [Activity rings](https://pixi-silk.schmooky.dev/lab/08-activity-rings/): Conic gradients that follow each arc, >100% overlap with a soft tip shadow, springs.
- [Lines](https://pixi-silk.schmooky.dev/lab/09-lines/): Widths from 0.1 to 8 px, translucent joints without double blending, caps, gradients along strokes.
- [Dashes & dots](https://pixi-silk.schmooky.dev/lab/10-dashes/): Dash patterns drawn in the shader: caps, closed outlines without a seam, marching ants, spinners.
- [Icons](https://pixi-silk.schmooky.dev/lab/11-icons/): Sixteen glyphs built from primitives, crisp at 16, 28 and 56 px. Uses save / translateTransform.
- [Gradients](https://pixi-silk.schmooky.dev/lab/12-gradients/): Linear, radial, conic and along-the-path gradients, extend modes, sRGB vs linear vs OKLab, premultiplied alpha.
- [Banding](https://pixi-silk.schmooky.dev/lab/13-banding/): Half-float ramps with ±0.5 LSB dither. Toggle dither and "reveal x8" to watch the contour lines disappear.
- [Glows & soft shadows](https://pixi-silk.schmooky.dev/lab/14-glow/): Analytic gaussian blur on the distance field: neon glows, elevation shadows, bokeh. No extra passes.
- [Area chart](https://pixi-silk.schmooky.dev/lab/15-area-chart/): Smoothed series, gradient fill, dotted guides, dashed forecast, NOW marker, eased updates.
- [Bar charts](https://pixi-silk.schmooky.dev/lab/16-bar-charts/): Slim bars with a past/future split and chunky stepped bars that grow in.
- [Pills & waveforms](https://pixi-silk.schmooky.dev/lab/17-pills-waves/): Heart-rate pills and a live pressure waveform sharing one gradient.
- [Ranges & levels](https://pixi-silk.schmooky.dev/lab/18-ranges/): Progress bars with markers, range segments and signal bars, all anti-aliased at any size and pixel ratio.
- [Health cards](https://pixi-silk.schmooky.dev/lab/19-health-cards/): Ten Apple Health style cards with area, bar, candle and range charts, drawn as smooth distance fields.
- [Gauges](https://pixi-silk.schmooky.dev/lab/20-gauges/): ISS flyover, car battery, heading dial with ticks, barometer, UV week, dimmer.
- [Sparklines](https://pixi-silk.schmooky.dev/lab/21-sparklines/): Value-coloured strokes, gradient markers, threshold stops, interactive crosshair.
- [Sleep](https://pixi-silk.schmooky.dev/lab/22-sleep/): Stage blocks with transitions, night strip, marching dotted arc.
- [Timers](https://pixi-silk.schmooky.dev/lab/23-timers/): Espresso ticks with analytic motion blur, run cadence bars and controls.
- [Journeys](https://pixi-silk.schmooky.dev/lab/24-journeys/): Flight progress, train stations, delivery route, ride pickup, race track.
- [Sky](https://pixi-silk.schmooky.dev/lab/25-sky/): Sunset pills with a glowing sun and stars, golden-hour curve, daylight bar.
- [Health cards (sheet 1)](https://pixi-silk.schmooky.dev/lab/30-sheet-health/): Ten Health cards over the first reference: area, bar, candle and range charts. Compare slider included.
- [Complications (sheet 2)](https://pixi-silk.schmooky.dev/lab/31-sheet-complications/): Twenty watch complications from the second reference, laid out in its exact pixels.
- [Fitness & home (sheet 3)](https://pixi-silk.schmooky.dev/lab/32-sheet-fitness/): Twenty more: calendar week, hike map, sound levels, elevation, water, wind, boarding pass.
- [Live Activities (sheet 4)](https://pixi-silk.schmooky.dev/lab/33-sheet-live-activities/): Black cards with continuous corners and measured soft shadows on the light sheet, edges cropped like the reference.
- [Watch widgets (sheet 5)](https://pixi-silk.schmooky.dev/lab/34-sheet-watch/): Cycling, 2FA, now playing, crosshair, garage, AirPods compass, barometer, moon phases.
- [Widget viewer](https://pixi-silk.schmooky.dev/lab/35-widget-viewer/): Pick any of the 81 widgets and see it large next to its crop of the reference, or overlaid on it.
- [Dashboard](https://pixi-silk.schmooky.dev/lab/26-dashboard/): Thirty live widgets in a masonry layout with smooth, frame-rate independent scrolling.
- [Stress test](https://pixi-silk.schmooky.dev/lab/27-stress/): Up to 100k primitives in one draw call, rebuilt every frame or static.

## FAQ

- [How do I enable anti-aliasing in PixiJS v8?](https://pixi-silk.schmooky.dev/faq/#how-do-i-enable-anti-aliasing-in-pixijs-v8)
- [Why do PixiJS v8 Graphics look jagged or blurry?](https://pixi-silk.schmooky.dev/faq/#why-do-pixijs-v8-graphics-look-jagged-or-blurry)
- [What is pixi-silk?](https://pixi-silk.schmooky.dev/faq/#what-is-pixi-silk)
- [What is analytic anti-aliasing?](https://pixi-silk.schmooky.dev/faq/#what-is-analytic-anti-aliasing)
- [MSAA or SDF anti-aliasing: which is better for 2D graphics?](https://pixi-silk.schmooky.dev/faq/#msaa-or-sdf-anti-aliasing-which-is-better-for-2d-graphics)
- [Is there a PixiJS v8 version of @pixi/graphics-smooth?](https://pixi-silk.schmooky.dev/faq/#is-there-a-pixijs-v8-version-of-pixi-graphics-smooth)
- [How do I draw smooth circles and curves in PixiJS?](https://pixi-silk.schmooky.dev/faq/#how-do-i-draw-smooth-circles-and-curves-in-pixijs)
- [Why do thin lines flicker or disappear in PixiJS?](https://pixi-silk.schmooky.dev/faq/#why-do-thin-lines-flicker-or-disappear-in-pixijs)
- [Is pixi-silk a replacement for Graphics?](https://pixi-silk.schmooky.dev/faq/#is-pixi-silk-a-replacement-for-graphics)
- [Does pixi-silk need MSAA or antialias: true?](https://pixi-silk.schmooky.dev/faq/#does-pixi-silk-need-msaa-or-antialias-true)
- [How fast is pixi-silk?](https://pixi-silk.schmooky.dev/faq/#how-fast-is-pixi-silk)
- [Does pixi-silk work with WebGPU?](https://pixi-silk.schmooky.dev/faq/#does-pixi-silk-work-with-webgpu)
- [How do I draw a squircle (iOS-style rounded rectangle) in PixiJS?](https://pixi-silk.schmooky.dev/faq/#how-do-i-draw-a-squircle-ios-style-rounded-rectangle-in-pixijs)
- [How do I make gradients in PixiJS without banding?](https://pixi-silk.schmooky.dev/faq/#how-do-i-make-gradients-in-pixijs-without-banding)
- [How do I add a glow or soft shadow to a shape in PixiJS without filters?](https://pixi-silk.schmooky.dev/faq/#how-do-i-add-a-glow-or-soft-shadow-to-a-shape-in-pixijs-without-filters)
- [Why is my PixiJS canvas blurry on retina or high-DPI screens?](https://pixi-silk.schmooky.dev/faq/#why-is-my-pixijs-canvas-blurry-on-retina-or-high-dpi-screens)
- [Can I use pixi-silk in React, Vue or Svelte?](https://pixi-silk.schmooky.dev/faq/#can-i-use-pixi-silk-in-react-vue-or-svelte)
- [Do pointer events work on SilkGraphics?](https://pixi-silk.schmooky.dev/faq/#do-pointer-events-work-on-silkgraphics)
- [How do I draw charts with PixiJS?](https://pixi-silk.schmooky.dev/faq/#how-do-i-draw-charts-with-pixijs)
- [What license is pixi-silk under?](https://pixi-silk.schmooky.dev/faq/#what-license-is-pixi-silk-under)

## Optional

- [llms-full.txt](https://pixi-silk.schmooky.dev/llms-full.txt): all guides with the source of every live demo, the full API reference and the FAQ, as one plain-text file.