manim-web / manim-web

Manim animation engine, for the web

Manim animation engine, for the web.

Changelog | Manim | Suggestions / Improvements | FAQ | Discord Server | Website

Getting started

Look at the Getting Started section of the website.

Examples

You can find a list of examples of animations built with Manim-Web here. Some of them are interactive.

Contributing

Contributions are always welcome whether it's code, documentation, examples or even improvements to make. You can take a look at the contribution document, there are more details about the whole process. If you want to talk, there is a discord server.

manim-web's Issues

Rounded Rectangle Bug in latest manim web version: 1.2.3

Rendered Rounded Rectangle:

There is some sort of error with displaying the Rounded Rectangle as seen in the screenshot. For reference, here is the desired output created using the manim library:

Steps to reproduce:

• Use Manim web version 1.2.3
• Use the following code

Additional Specs:

• Google Chrome v118.0.5993.117
• M1 Macbook air

Contributing to Manim Web for Hacktoberfest

If you want to contribute to Manim Web, there are more details in the HACKTOBERFEST.md file.

Thanks for taking the time contributing,
Good luck!

Choose which canvas to draw to

Hello,

for what is my understanding, the id canvas-container is hard-coded in the code
and cannot be chosen.
I think it would be useful if the user could choose it. Having multiple animations in the same page requires to manually change the id from the generated js file.

I would also suggest changing the user experience such that the animations are added in the following way:

<script src="animation.js"></script>
<script>
let container = document.getElementById('canvas-container');
let anim = new Animation1(container);

// possible to do other stuff such as
anim.stop();
anim.resume();
anim.customAction();
</script>

By doing this it would also possible to make the animation stop rendering when it is not visible in the web page.