Animated Gaussian Elimination Visualizer

I’ve solved enough systems of linear equations by hand that the steps became mechanical: find the pivot, eliminate below, move to the next column, back-substitute. But mechanical doesn’t mean intuitive. Watching the numbers shuffle on paper, it’s easy to lose track of why each operation matters.

So I built a visualizer that makes each step visible — not as a textbook diagram, but as a live animation you can play through, step through, or instantly resolve.

The Visualizer

Try it →

It renders the augmented matrix on an HTML Canvas with a requestAnimationFrame loop. Each step of the algorithm:

1. Highlights the pivot — purple glow on the current diagonal element
2. Shows elimination targets — orange cells for the rows being eliminated
3. Marks source rows — green for the row providing the elimination factor
4. Strikethroughs zeroed cells — red line through entries reduced to zero
5. Reveals the solution — teal highlights during back substitution

Animations

The key thing is that values don’t just snap — they morph. Each cell holds a display value that lerps toward its target every frame at 0.18× the remaining distance. Row swaps get a vertical bounce offset (+35px / −35px) that decays with a 0.85× dampening factor. Pivots and changed cells get a flash that decays at 0.92× per frame.

This makes the difference between “I can read what happened” and “I can see what happened.”

Why Canvas Instead of DOM

The first version used styled <div> elements with CSS classes toggling on each step. It worked, but it felt like a spreadsheet with a filter applied — not an animation.

Canvas gives me per-frame control over every pixel. I can lerp values, apply glow via shadowBlur, draw elimination arrows, and render bracket decorations without fighting CSS transitions. The requestAnimationFrame loop runs at display refresh rate, so the morphing and bouncing feel smooth without any CSS animation timing mismatches.

The Algorithm

The visualizer uses a JavaScript generator function to yield each step:

function* gauss(mat) {
  // Forward elimination with partial pivoting
  for (let col = 0; col < vars && col < n; col++) {
    // Find pivot (largest absolute value in column)
    // Swap if needed → yield 'swap' step
    // Announce pivot → yield 'pivot' step
    // For each row below:
    //   Calculate factor → yield 'factor' step
    //   Eliminate → yield 'elim' step
  }
  // Back substitution
  for (let i = n - 1; i >= 0; i--) {
    // yield 'solve' step for each variable
  }
  yield 'done'
}

Each yield includes the full matrix state, highlight data (which cells are pivots, targets, sources, eliminated), and a human-readable annotation. The playback engine collects all steps, then plays through them with configurable timing.

Presets

Four built-in presets cover the common cases:

You can also type your own matrix values and resize with + Row / − Row / + Var / − Var.

SEO and Accessibility

Since this is a math tool, I wanted it discoverable by both humans and AI:

• JSON-LD: WebApplication schema with EducationalApplication category
• BreadcrumbList: Home → Tools → Gaussian Elimination
• llms.txt: The site’s /llms.txt and /llms-full.txt now reference the tool
• Semantic HTML: The canvas is inside a labelled section with descriptive heading and paragraph
• FAQ schema: Common questions about the method, mobile support, and custom input

What I’d Add Next

• Row operation labels showing the exact arithmetic (e.g., R2 ← R2 − 2·R1)
• Determinant tracking as a side panel
• Eigenvector visualization as a follow-up tool
• Export to LaTeX for the step-by-step solution

The tool is at rioges.xyz/tools/gaussian-elimination/ — free, runs in your browser, no server calls.