Is it possible to dynamically change the color of a font glyph used to make an animated video in webm format, in JavaScript? If so, how?

I have a webm video made somewhat like this:

  1. Import .ttf or .otf font into Adobe Illustrator (AI).
  2. Copy/paste individual font glyph from AI to Photoshop.
  3. Create layers of the font glyph for animation in After Effects (AE) next.
  4. Animate the glyph in AE.
  5. Generate a .webm file from the AE animation.

The final result is basically this:

enter image description here

I would like to make this somewhat feel interactive if possible, so when you hover it, it changes color to purple (animates color from black to purple). Sort of like these glyphs which are just font glyphs in HTML with CSS transitions on hover:

enter image description here

Is anything like that possible in this context, using the .webm format? (I’ve never used .webm, or even video really, much before).

Some ideas:

  1. Render/play video on HTML5 canvas at runtime, and somehow animate the black pixels to be purple on hover? (Is anything like that feasible?).
  2. Maybe the .webm format is like an SVG in some ways, and I can just set some color variable on hover, after the .webm file has already been created? Like set some variables at runtime in JS or CSS.
  3. Maybe I can do some CSS overlay/blend-mode magic, to create the purple effect on hover.
  4. Other things?

Wondering if there is any approach to make this a reality.