Chris Collins

Tools · math

Matrix transformations

See what a 2×2 or 3×3 matrix does: the grid, the unit square or cube, the basis vectors and a shape move live as you edit entries or drag the columns — animated from the identity, with the determinant as signed area or volume, eigenvectors, composition, the inverse, presets, the SVD as rotate–stretch–rotate, rotation about a pivot with 3×3 homogeneous matrices, and a neural-network layer folding the plane with ReLU.

Added · updated 14 October 2026

How to use it

A matrix is a recipe for moving space: its columns say where the basis vectors î, ĵ (and k̂) land, and everything else follows along. Type entries (fractions and expressions such as cos(30deg) work) or drag the tips of î and ĵ on the canvas, then press ▶ Play or move the t slider to watch the plane deform smoothly from the identity.

  • Determinant. The unit square (cube) becomes a parallelogram (parallelepiped) whose signed area (volume) is det A. It turns red when the orientation flips (det < 0) and collapses to a line or a point when det = 0.

  • Eigenvectors are drawn as dashed lines. Watch them during the animation: they stay on their own line, only stretched by λ. When the eigenvalues are complex there is no such line, and the readout explains the matrix as a rotation by an angle combined with a scaling by |λ|.

  • Composition. Add presets (or A) to the stack; they are applied top to bottom and animated one after another. Reorder or reverse them to see that AB ≠ BA in general.

  • Undo with A⁻¹ animates the inverse taking everything back to where it started — and refuses, with an explanation, when A is singular.

  • Presets: rotation by θ, scales, shear, reflection in a line, projection onto a line, and in 3-D rotations about the axes or about (1, 1, 1), shear, reflection and projection.

  • SVD plays A = U Σ Vᵀ as three moves: a rotation (or reflection), a stretch along the axes by the singular values, and another rotation.

  • Pivot (3×3) turns a 2-D point (x, y) into (x, y, 1), so a translation is a matrix too. Set a pivot (or drag it), an angle θ, a scale k and an extra move (tx, ty): the tool builds M = T(tx, ty) · T(p) · R(θ) · S(k) · T(−p), shows every 3×3 factor and their product, and plays the shape through the moves one at a time — move the pivot to the origin, rotate, move back — with the move playing highlighted. A table lists each point, M · point and its distance from the pivot (a rotation keeps it). Compare with overlays, dashed in red, the same move about the origin (forgetting the pivot) or the same matrices multiplied in the opposite order, so you can see that order matters. Rotations by multiples of 90° are exact.

  • ReLU layer is the book’s "neurons as directions" lab. Two interleaved spirals go through one layer h = ReLU(W₁x + b) — six sliders set W₁ and b — and then a fixed second layer W₂ = [1 −1; 1 1]. The input panel draws each neuron’s fold line wᵢ·x + bᵢ = 0 with an arrow along wᵢ towards the side where it is positive; the middle panel shows the bent image of a grid. Untick ReLU and the readout shows the two layers collapsing to the single affine map (W₂W₁)x + W₂b.

Determinants and inverses are exact when the entries are rational. The chapter on matrices as transformations in Mathematics, Reconnected walks through these ideas, and Eigenvectors, bases, and applications continues them. For the arithmetic itself — products, RREF, LU, QR — use the Matrix calculator; for vectors on their own, the Vectors playground; and to see A x = b as lines and planes, Linear systems, visually. Eigenvalues also decide how a linear system of differential equations behaves near an equilibrium — node, saddle or spiral — which the ODE solver shows as phase portraits, and the symbolic algebra tool can factor a characteristic polynomial exactly.

Companion to matrices as transformations, translation and homogeneous coordinates and neural network layers (chapter 27), transformations of the plane (chapter 10) and the SVD (chapter 28) of Mathematics, Reconnected.

Related: Matrix calculator, Vectors playground, Linear systems, visually.

Limits

The pivot mode is 2-D only (3×3 homogeneous matrices; the 4×4 matrices of 3-D graphics are not drawn). The ReLU layer is 2 → 2 with a fixed second layer and a fixed, seeded dataset; nothing is trained. Presentation view shows the pivot mode but not the three ReLU panels.

⛶ Full screen gives the plane (or space) the whole screen, with the play bar above it — the browser’s full screen where it is allowed, otherwise a full-window layer (iPhone); it is redrawn as the window changes, and ◫ Panels hides the controls beside it. Escape leaves. (F stays with Present.)

Presenting

The transformed grid, shape and basis vectors filling the screen, with the matrix, its determinant and t in the corner — for a lecture or a classroom. Space plays the animation from the identity. Press ⛶ Present (beside Share link) or F to open it; Esc or F closes it and T switches between dark and light.

Share link → Link options can make a link that opens straight into this view and starts the animation. Browsers only allow real full screen after a click, so a link opened cold shows the view filling the window with a “Click for full screen” button.

Sharing

Share link copies a URL that reopens the tool with your matrix, size, mode and stack.

Linking to an example

Add the mode after #: single, compose, svd, affine (pivot, 3×3) or relu. Every setting can be written by hand:

Parameter Meaning Example

example

one of the presets below; any other parameter in the link overrides it

ch27-pivot-rotation

mode

single, compose, svd, affine or relu (the # mode wins if both are given)

affine

n

size, 2 or 3

3

m

the matrix A, rows split by ;, entries by ,; expressions allowed

4,1;2,3 or cos(30deg),-sin(30deg);sin(30deg),cos(30deg)

pts

pivot mode: the points x,y;x,y;… (three or more make a polygon)

2,1;3,1;3,2

px, py

pivot mode: the pivot

2, 1

deg

pivot mode: rotation angle in degrees, anticlockwise

90

k

pivot mode: scale factor about the pivot

1.5

tx, ty

pivot mode: a translation applied last

4, 1

cmp

pivot mode: overlay none, origin (same move about the origin) or reverse (opposite order)

reverse

w

ReLU layer: W₁ as w11,w12;w21,w22

1,0.5;-0.5,1

b

ReLU layer: the bias b1,b2

0.2,0

relu

ReLU layer: 1 on, 0 off

0

In a link ` means a space, so write a plus inside a matrix entry as `%2B` — or just type `: the m parameter reads a space between two parts of an entry as the plus it was. Minus signs, ;, , and brackets need no escaping. For example ?mode=affine&pts=5.

Presets (?example=…):

  • ch27-grid — a shear, the "change a matrix, watch the grid" lab.

  • ch27-pivot-rotation — the worked example: (2, 1), (3, 1), (3, 2) turned 90° about (2, 1) by T(2, 1)·R(90°)·T(−2, −1), giving (2, 1), (2, 2), (1, 2); compared with the same turn about the origin.

  • ch27-house — the figure: a house rotated 40° about the origin, then translated by (4, 1), compared with the opposite order.

  • ch27-scale-translate — the exercise: scale by 2, then translate by (1, −3); (4, 5) goes to (9, 7) and the direction (4, 5) to (8, 10).

  • ch10-rotate-about-c — P(5, 3) rotated 90° about C(2, 1) lands on (0, 4); both distances are √13.

  • ch10-triangle-rot90 — the triangle (1, 1), (4, 1), (1, 3) rotated 90° about the origin.

  • ch10-logo-dilate — a logo enlarged 150% about its centre (10, 5): the corner (12, 8) goes to (13, 9.5).

  • ch10-order-matters — composition: reflect in the x-axis, then rotate 90° (a reflection in y = x); press Reverse order for y = −x.

  • ch27-relu-fold — neurons as directions: one layer with ReLU folding the spirals.

  • ch27-two-layers-collapse — the same layer with ReLU off: two layers are the one matrix W₂W₁.

  • ch28-eigen — A = [4 1; 2 3] with its eigenvectors (1, 1) (λ = 5) and (1, −2) (λ = 2).

  • ch28-svd — the SVD of [3 0; 4 5] played as rotate, stretch by 3√5 and √5, rotate.

Runs entirely in your browser; nothing you type leaves this page.