# @pixi/graphics-smooth and PixiJS v8

> @pixi/graphics-smooth, the anti-aliased Graphics plugin, targets PixiJS v7. For smooth, anti-aliased lines and shapes on PixiJS v8, use SilkGraphics.

Source: https://pixi-silk.schmooky.dev/docs/graphics-smooth-v8/

[`@pixi/graphics-smooth`](https://github.com/pixijs-userland/graphics-smooth) is the community plugin
that made PixiJS `Graphics` smooth. Its drop-in `SmoothGraphics` class anti-aliases shapes in the
shader (HHAA), without MSAA. The current release is built for PixiJS v7. Its 1.1 line requires
PixiJS 7.2 or a newer v7 and was last published in 2024. As of September 2026, there is no v8
release on npm. If you move to PixiJS v8 and need the same smoothness, use pixi-silk's
`SilkGraphics`. It fills that role with a v8-style API.

## What changes

| | `@pixi/graphics-smooth` (v7) | `SilkGraphics` (v8) |
|---|---|---|
| PixiJS version | 7.x | 8.x |
| Class | `SmoothGraphics` | `SilkGraphics` |
| API style | `beginFill`, `lineStyle`, `drawRect`, `endFill` | shapes on a path, then `fill()` or `stroke()` |
| Anti-aliasing | in the shader, per line or shape | analytic signed distance fields, per pixel |
| Curves | tessellated | exact circles, ellipses, arcs, rounded corners |
| Extras | | squircles, dashes, OKLab gradients, blur, tapered strokes, DPR-exact app |

## Porting `SmoothGraphics` code

```ts nocheck
// PixiJS v7 + @pixi/graphics-smooth
const g = new SmoothGraphics();
g.lineStyle({ width: 2, color: 0xffffff });
g.beginFill(0x1c1c1e);
g.drawRoundedRect(0, 0, 200, 80, 16);
g.endFill();
g.drawCircle(40, 40, 12);
```

```ts
// PixiJS v8 + pixi-silk
const g = new SilkGraphics();
g.roundRect(0, 0, 200, 80, 16).fill(0x1c1c1e).stroke({ width: 2, color: 0xffffff });
g.circle(40, 40, 12).stroke({ width: 2, color: 0xffffff });
```

| v7 call | SilkGraphics (v8) |
|---|---|
| `beginFill(c, a)` to `endFill()` | `shape().fill({ color: c, alpha: a })` |
| `lineStyle({ width, color, alpha })` | `shape().stroke({ width, color, alpha })` |
| `drawRect`, `drawRoundedRect`, `drawCircle`, `drawEllipse` | `rect`, `roundRect`, `circle`, `ellipse` |
| `moveTo`, `lineTo`, `bezierCurveTo` | the same, then `stroke()` |
| `arc(...)` | `arc(...)` (starts its own subpath) or `arcSweep(...)` |
| `LINE_SCALE_MODE.NONE` (constant screen width) | not built in, so divide the width by the scale (hairlines never drop below 1 px) |

## Also new in PixiJS v8

PixiJS v8 itself changed the Graphics API. It adds `GraphicsContext`, and you now call `fill()` or
`stroke()` after the shapes. The [PixiJS v8 migration guide](https://pixijs.com/8.x/guides/migrations/v8)
covers the rest of the upgrade. [Migrating from Graphics](/docs/migrating-from-graphics/) covers how
v8 `Graphics` and `SilkGraphics` differ.