There's manim [1] from YouTuber 3blue1brown. And while it doesn't work on the web, there is a port [2] that does, which runs on p5.js. If you want a bit more control, you can use a canvas animation library directly. A few popular ones are p5, GreenSock, and PixiJS--but there are so many others. For simpler animations and for the most control over the result, it's pretty rewarding to just use the built-in Canvas API [3] directly.

[1] https://github.com/3b1b/manim

[2] https://github.com/JazonJiao/Manim.js/

[3] https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...

Manim I have tried once. While it's cool - it feels designed for a specific use case. I will check out canvas API!

I've used processing (p5js) but I don't necessarily recommend the library if you are looking for something simple.

I added a comment above the plugs my Svekyll blog tool. I love Svelte for these kind of things. You can view source of the post I made:

https://webiphany.com/2024-04-29-distance-sean-shawn

I have very happily and effectively used Mathematica to build such animations. It's also easy to make interactive animations (sliders to change values etc).

It's a paid product. I will try it out.