Incense, five ways
One subject, five tools, five different jobs. These aren't the same picture drawn five times. Each panel is the thing its tool is actually for, which is why they look nothing like each other.
SVG
For diagrams: sharp at any size, and every part is a thing you can point at.
Hover or tab through the parts to name them. Zoom as far as you like: it is redrawn from shapes, so it never softens.
Canvas 2D
For painting: every mark stays where it lands, and the page never remembers how many.
WebGL
For effects on every pixel: the hot smoke bends whatever is behind it.
Three.js
For real 3D: a scene with depth that you can walk around.
Loading Three.js.
GSAP
For choreography: not a way of drawing, a way of ordering what happens when.
Loading GSAP.
The short version
What each one is for, in a sentence.
- SVG: shapes the browser redraws at any size, each one a real element you can label, style, click and read aloud. Diagrams, icons, charts.
- Canvas 2D: one surface you paint onto. Perfect when marks accumulate, and it forgets each one the moment it's drawn, so ten thousand strokes cost no more than ten.
- WebGL: your own small program run on every pixel, in parallel. The only practical way to bend, blur or light a whole image at speed.
- Three.js: WebGL with the hard parts supplied: cameras, lights, materials, shapes, and puffs that turn to face you.
- GSAP: a different axis entirely. It draws nothing. It moves values over time, with easing, sequencing and a timeline you can scrub, over any of the four above.
Also considered: p5.js is Canvas 2D with a friendlier hand for sketching. Pixi sits between WebGL and Three.js, a 2D scene graph on the GPU. D3 is SVG driven by data. None of them changes the argument, so none of them earns a panel.