00_Motion_Canvas_TeX.md

1. Create a Motion Canvas project.
2. Run npm install --save mathjax-full
3. Add the script tex.ts below somewhere
4. Do something like the following:

export default makeScene2D(function* (view) {
  const tex = texToBase64SVG('{\\color{white} x = \\sin \\left( \\frac{\\pi}{2} \\right) }');

  const image = createRef<Image>();
  view.add(<Layout x={0}><Image ref={image} src={tex} width={200}></Image></Layout>);

  yield* waitUntil("fadeOut");
  yield image.value.alpha(0, 0.3);
});

tex.ts

import { mathjax } from 'mathjax-full/js/mathjax'
import { TeX } from 'mathjax-full/js/input/tex'
import { SVG } from 'mathjax-full/js/output/svg'
import { AllPackages } from 'mathjax-full/js/input/tex/AllPackages'
import { liteAdaptor } from 'mathjax-full/js/adaptors/liteAdaptor'
import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html'


const adaptor = liteAdaptor();
RegisterHTMLHandler(adaptor);

const jaxDocument = mathjax.document('', {
    InputJax: new TeX({ packages: AllPackages }),
    OutputJax: new SVG({ fontCache: 'local' })
});

export function texToBase64SVG(math: string) {
  const svg = jaxDocument.convert(math);
  const text = `data:image/svg+xml;base64,${btoa(`<?xml version="1.0" encoding="UTF-8" standalone="no" ?>\n${adaptor.innerHTML(svg)}`)}`;
  const img = document.createElement('img');
  img.src = text;

  return text
}