DIV-s, SVG or Canvas. What to choose for music visualization (from the point of view of eating resources)?

In his spare time to file an extension for chrome( link to the extension, who cares), which is engaged in the processing of music in the VC using the Web Audio API, a feature which has a visualiser of music(frequency bar graph). In short it is the thing which the input is an array of numbers and output should draw some number of rectangles, the height of which corresponds to the numbers in the array. It is necessary to draw quickly, 30-60 times per second.
The actual question what to choose for implementing such a thing? It is important to eat fewer system resources, and to work quickly. Looked at css transform, stared at optimization of work with canvas, but the final decision can not accept. Help, please, who has experience with such)
July 2nd 19 at 13:39
3 answers
July 2nd 19 at 13:41
Quicker web are no options in native.
July 2nd 19 at 13:43
I would take Pixi.js - render using WebGL, and so on vidyuhi. Much much faster.
Pixi good draws already drawn primitives (PreRender), for dynamic drawing primitives I'd choose a basic code example on WebGL + fragment Shader, there's lots of examples glslsandbox.com - Valentine77 commented on July 2nd 19 at 13:46
July 2nd 19 at 13:45
Of course canvas. SVG performance will be far behind.
PS: But with CSS it is necessary to experiment, as the animation on CSS too eats little resources and it's quite smooth.
Yes CSS is interesting, especially in combination with CSSOM API
it may happen quite quickly. - Valentine77 commented on July 2nd 19 at 13:48

Find more questions by tags SVGCanvasJavaScriptHTML