Building UI

Transforms

Save, restore, translate, rotate and scale the drawing. Rotated and scaled primitives stay exact, and stroke widths scale with them.

Updated September 26, 2026pixi-silk 0.1.0

Live demo

Source src/demos/transforms.demo.ts

import { SilkGraphics } from 'pixi-silk';
import { defineDemo } from './runtime';

// save / translateTransform / rotateTransform / scaleTransform / restore, like Pixi's GraphicsContext.
export default defineDemo({
    size: [420, 220],
    controls: {
        speed: { type: 'range', label: 'speed', min: 0, max: 3, step: 0.05, value: 1 },
    },
    setup({ stage, params, tick }) {
        const g = new SilkGraphics();
        let a = 0;

        stage.addChild(g);
        tick((_t, dt) => {
            a += dt * params.speed;
            g.clear();
            g.save().translateTransform(210, 110);
            for (let i = 0; i < 12; i++) {
                g.save()
                    .rotateTransform((i / 12) * Math.PI * 2 + a)
                    .translateTransform(70, 0)
                    .scaleTransform(0.6 + 0.4 * Math.sin(a * 2 + i));
                // rotated rects stay exact: rotation is part of the primitive, not a tessellation
                g.roundRect(-14, -8, 28, 16, 8).fill(i % 2 ? 0xff9f0a : 0x5e5ce6);
                g.restore();
            }
            g.star(0, 0, 6, 34, 16, -a, 4).fill(0xffd60a);
            g.restore();
        });
    },
});

SilkGraphics has the same transform stack as Pixi’s GraphicsContext:

g.save()
    .translateTransform(210, 110)
    .rotateTransform(Math.PI / 4)
    .scaleTransform(1.5);
g.roundRect(-20, -10, 40, 20, 8).fill(0xff9f0a);   // drawn in the transformed space
g.restore();

method
`save()` / `restore()`	push / pop the current transform
`translateTransform(x, y = x)`	move
`rotateTransform(angle)`	rotate (radians)
`scaleTransform(x, y = x)`	scale
`setTransform(a, b, c, d, tx, ty)`	replace with a matrix
`resetTransform()`	back to identity

Silk stores shapes already transformed. Rects, ellipses, hearts and polygons carry their rotation into the shader. A rotated rounded rect is still an exact distance field, not a tessellation. Stroke widths, dash lengths and blur radii scale with the transform’s uniform scale.

When to use a Container instead#

Transforms bake into the primitives, which suits icons and repeated parts drawn every frame. For objects that move as a whole (a card sliding in), put them in their own SilkGraphics or Container. Then animate position, rotation or scale, which changes one matrix instead of rebuilding primitives.

API reference: SilkGraphics