I learned about color-coded equations from BetterExplained. I read about them again in a paper from Andrew Head, where Andrew calls them augmented formulas.
Color-coded equations, also known as colorized equations, look like this:
I've tried to make a tool (faster than Kalid Azad's) for making these visuals.
I've tried working with the Canvas API directly, using an old JQuery-dependent JS library, and using Rust + WebAssembly. The last option seems to have the best performance ↔ user-experience tradeoff, though something weird is happening.
It seems that the stroke shows up on the screen pretty far from where the mouse presses down. I've been fiddling around in Rust today, and I think I will continue working on this.
I had this issue with vanilla JS - just using the Canvas API - so I'm not sure exactly what is happening.