I Rendered 10,000 Dots So You Don’t Have To (But You Probably Will Anyway)

Last time I said I’d build something simple—a scatter plot with a few thousand points. Just to feel the difference between SVG and canvas in my fingers. So I did. And of course, “simple” turned into “why is my fan spinning so loud” pretty quickly. The Setup I made two versions. Same data, same visual. One SVG, one canvas. A thousand random points at first, then ten thousand, then fifty thousand—because I clearly enjoy watching browsers suffer. If you’ve ever wondered where the line is between “SVG is fine” and “your tab is now a jet engine,” here’s what I found. SVG Up to about 500–800 points, everything is smooth. DOM inspector is happy, hover effects work out of the box, tooltips just work. It’s almost too easy. At 3,000 points, the DOM starts to feel heavy. Inspecting elements becomes sluggish. Mouse interactions still work, but you can feel the browser working harder. At 10,000 points, scrolling is a slideshow. The browser’s layout engine is basically crying. If you try to attach i