Back to projects
Aug 14, 2026
2 min read

Gaussian Elimination Visualizer

Interactive step-by-step Gaussian elimination on HTML Canvas — row swaps bounce, values morph, pivots glow. Zero frameworks, all client-side.

An interactive linear algebra visualizer that renders Gaussian Elimination on HTML Canvas with requestAnimationFrame animations — not DOM elements with CSS classes, but actual per-pixel canvas drawing at display refresh rate.

What It Does

  • Forward elimination with partial pivoting — row swaps, factor calculation, elimination
  • Back substitution — solves for each variable step by step
  • 4 presets — 2×2, 3×3, 3×3 with pivoting, 4×4
  • Custom input — type any matrix, add/remove rows and columns
  • Playback controls — Play (animated), Step (one at a time), Instant (skip to end)

The Animations

  • Values morph toward their targets each frame (lerp at 0.18×)
  • Row swaps bounce with vertical offsets that decay at 0.85× per frame
  • Pivots glow purple, targets flash orange, eliminated cells get red strikethrough
  • Solution variables highlight in teal during back substitution

Tech

Single Astro page with vanilla JS inside <script is:inline>. Canvas drawing loop runs continuously via requestAnimationFrame. Algorithm is a JS generator function that yields each step with matrix state + highlight metadata. No build step for the JS — it ships as-is in the Astro build.