This my experiment result:

To render Tex I use this methods:

• Convert Tex to SVG
• Parse SVG and extract all path
• Render path to canvas

To tween Tex I use this methods:

• Diff path between new and old tex
• Animate diff like in CodeBlock component

You can see Latex component code in this url.

Scene code is this:

import {Latex} from '@motion-canvas/2d/lib/components';
import {makeScene2D} from '@motion-canvas/2d/lib/scenes';
import {waitFor} from '@motion-canvas/core/lib/flow';
import {createRef} from '@motion-canvas/core/lib/utils';

export default makeScene2D(function* (view) {
  const tex = createRef<Latex>();
  view.add(
    <Latex
      ref={tex}
      tex="{\color{white} x = \sin \left( \frac{\pi}{2} \right)}"
      y={0} // height and width can calculate based on each other
    />,
  );

  yield* waitFor(2);
  yield* tex().tweenTex(
    '{\\color{white} x = \\sin \\left( \\frac{\\pi}{2} \\right) + 3}',
    1,
  );
  yield* tex().tweenTex(
    '{\\color{white} x = 1 + \\sin \\left( \\frac{\\pi}{2} \\right) + 3}',
    1,
  );
  yield* tex().tweenTex(
    '{\\color{white} x = 3 + \\sin \\left( \\frac{\\pi}{2} \\right) + 1}',
    1,
  );
  yield* tex().opacity(0, 1);
  yield* waitFor(2);
  yield* tex().opacity(1, 1);
  yield* tex().tweenTex(
    '{\\color{white} x = \\sin \\left( \\frac{\\pi}{2} \\right)}',
    8,
  );
});

@aarthificial Are you accept this?

Thanks for making the issue

I have new way to tweening Latex. First, we need create component SVG Component.

SVG Component will convert SVG node into Motion Canvas Shape and add shape into component as children. We can animate SVG child using normal tweening. This component also can tween between two SVG. Here is my SVG component code.

Latex component will inherit SVG component. We just need convert Latex into SVG. To tween Latex we just tween the SVG component. Here is my Latex component

This will not only resolve this issue. But also resolve this issue.

The result of this way is equal to old one.

I will merge my component into this repository when my SVG component can render most of SVG node.

I have problem when placing my SVG component into Layout.

My SVG component is rendered correctly. However, other component inside layout is gone.

After some investigation. I found that, Layout component does not respect scale.

Layout component does not respect scale.

This is by design, no layout engines support rudimental scaling/rotation - it would be a nightmare to handle.
The SVG node should respect the width and size properties in the same way images do.

This component also can tween between two SVG

Note that your solution to tweening is vastly different than the one Manim uses.
It's good enough for me but that's not what you mentioned in the description of the PR.