Is there a way I can implement a manim-like write animation for texts?

[ItsSunnyMonster]

As the title says. I presume it is not a built-in animation since I have not found it in the docs, but is there any way I can use the built-in functions to create such an animation?

I think the manim animation works by animating the online of each of the characters with a delay in between each one starting and then animating the fill of the character once its outline has finished animating.

[kroltan]

It exists for Path, but I don't know of a way of going from text character to a SVG path string.

[toddync]

I had the same issue and wanted to share a solution I came up with that might be helpful. It may not be a perfect fit, but it comes pretty close to solving the problem you described.

My Approach:

I used Maker.js to convert text into an SVG path, which can then be animated. This method also supports a wide range of fonts, including Google Fonts and custom TTF/WOFF files (via opentype.js).

Code Example:

Helper Functions:

import makerjs from "makerjs";
import { parse } from "opentype.js";
import { parse as parseHTML } from "node-html-parser";

const API_KEY = ""; // Add your Google Fonts API key here

export let fonts = [];
export async function init() {
    let rawFonts = await fetch(
        "https://www.googleapis.com/webfonts/v1/webfonts?key=" + API_KEY
    );
    rawFonts = await rawFonts.json();

    rawFonts.items.map((f) => (fonts[f.family] = f.files.regular));
}

export async function getTextPath(font, text, size = 100) {
    let buffer = await (await fetch(font)).arrayBuffer();
    const fontOBJ = parse(buffer);
    const textModel = new makerjs.models.Text(fontOBJ, text, size);
    const svg = makerjs.exporter.toSVG(textModel);
    let doc = parseHTML(svg);
    return doc.querySelector("path").getAttribute("d");
}

Example Rendering:

yield init(); // Populate fonts array
let d = yield getTextPath(fonts["Doto"], "Test"); // Or use a custom font link
let rect = createRef<Rect>();
let outline = createRef<Path>(),
    gutter = createRef<Path>();

view.add(
    <Rect ref={rect}>
        <Path ref={outline} data={d} end={0} stroke="black" lineWidth={1} />
        <Path ref={gutter} data={d} opacity={0} fill="black" />
    </Rect>
);

// Center the text
yield* rect().x(rect().x().valueOf() - outline().width().valueOf() / 2, 0);
yield* rect().y(rect().y().valueOf() - outline().height().valueOf() / 2, 0);

yield outline().end(1, 2); // Animate outline
yield* waitFor(0.5); // Delay
yield* gutter().opacity(1, 1.5); // Fill the text