What is the most versatile tool for working with animation and graphics in js?

Question

JavaScript

Hello! The problem is this
: I have the most diverse tasks on the frontend, I don’t want to use separate tools with my own API for each case - one thing for charts, another for various animations, etc.
I want to find some kind of Swiss knife that can do everything.
Rummaging with Google - most often comes across D3 for these purposes. But there is an opinion that D3 is a rudiment and now everything can be implemented on js frameworks with a virtual DOM, like React and Vue. I am familiar with frameworks, but not with D3. Is there anything that can be done in D3 but not in Vue/React?
Another question - I'm superficially familiar with canvas and svg. But canvas looks more versatile. What are the advantages of SVG over it? What is the best bet? In general, it seems like almost everything can be implemented now on css and html, it breaks me off only to make all sorts of donut diagrams on them and something else where curved lines are needed.
I am especially reluctant to do graphics. She doesn't push me. Need a low-level tool for utilitarian tasks. Because there is simply no one else to do this at work ...

Answer 1

You want to have everything, and you have nothing for it.
But it can't be.
Any, even a super fancy framework, is at least an increase in page size and memory consumption. If you have a simple task, such as draw 7 red lines, then this can be done in native JS, without frameworks.
After all, you yourself said that the tasks are different. So even if you have this Swiss Army knife, each time you will need to study its API for a new task, as if it were a separate library for this task. This makes no sense.
But when there are repeated tasks that are very similar to the previous ones, then something already makes sense that will simplify the solution of typical tasks, automate it. But what prevents you from copying your previous code and slightly modifying it?

Answer 2

Animate CC