Just a small clip to show a stress test I've worked on for my new visual programming system.. maybe not super impressive, but at least it is performing better then my old system. It uses purely DOM, svg and css (transforms). Creating all the nodes from javascript takes still quite long, they do all have different shapes though (using css clip-path).

cool. have you thought about virtualizing the graph so that you can only draw the nodes that are visible to the user? Doesn't look like having that many nodes visible at once would ever be necessary?

No not yet, I am currently depending on the browser for handling that when zooming and panning. In the stress test of the video that's no problem, at least on my hardware (apple m2 macbook pro and a recent windows laptop).. I'll also run this test on my much older iPad. My current rendering approach is quite naiev.. just adding all dom nodes and wires to dom and transform and scale a wrapper div when zooming/panning. Only the wrapper div has a "will-change:transform" applied. Since I have reference to all dom nodes, when moving a single node, the relevant dom node including connection nodes are changes directly

Very nice!

Thanks!