CSS vs SVG vs CANVAS

programming
1

What do you suggest for someone interested in making animations for mathematics? (vector fields, oscillating stuff, etc.)

I have tried so far SVG, to be precise d3.js. It’s quite easy to get animations up and running but d3.js took a weird direction (too tightly associated with Observable) lately and I’ve mostly given up on it.

I have little experience with Canvas but it’s quite liberal in what you can do, with very decent performance. However it’s a pain in the butt to work with as there is nothing ready for you. Input handling is a chore especially since after an object is drawn, access to it is lost unlike when you work with SVG and the DOM. I guess it’s just a bit more work.

I have no experience with CSS on the other hand but I’ve seen some nice animations. How far can you go with CSS and what does the future look like for CSS?

2

The most impressive web-based math animations I’ve seen came from MathBox2. I haven’t used the API myself, so I can’t comment on how easy it would be to get your own stuff up and running with it.

1 Like
3

For making animations for mathematics, it depends on what exactly you are trying to replicate. Do you have some examples of the types of animations you’d be creating?

My general answer is to find a good charting library like d3.js, which you’ve tried. It’s widely used and has a great ecosystem, so it may be worth giving it one more look. Another charting library that I’ve seen used frequently is Chart.js.

If you do go down the path of implementing your own solutions, I would rank SVG first, Canvas second, and CSS last.

With SVG, you get the advantage of not having to define the visuals manually. There are a lot of great tools that allow you to create the visuals for your chart. SVG elements have great support in the browser’s DOM, so you can fiddle with individual properties of your SVG elements directly using both CSS and JavaScript. This flexibility makes SVG a great solution for many interactive charting and visualization needs.

Canvas is the most complex solution here. You are dealing with drawing pixels to the screen without any of the benefits that the DOM provides. I walk through the differences in my DOM vs. Canvas article. This complexity does give you a lot of flexibility though. You just have to write a lot of code.

CSS is primarily for styling content that already exists either in HTML form or SVG form. Using CSS by itself won’t help, but the animations you make and apply on your HTML and SVG elements can definitely be done using CSS.

Hopefully this helps :slight_smile:

Cheers,
Kirupa

1 Like
4

Yes, d3js was going to be my first choice but some major changes were introduced lately and the only documentation that covers them is the official documentation, which is rigidly organized around Observables. So in order to pick up new stuff, I’d have to also learn how this confusing Observables thing works and this I’m not really down for. :frowning:

I’m not planning on making charts, maybe graphs of planes. It’s mostly an attempt at producing geometrical proofs of certain theorems. I guess I’ll take your advice and use canvas whenever user interaction is not needed, and in most cases I don’t think it will be necessary to gather user input.

Thanks again!

1 Like