Particle Network Background with Canvas (No Library)

The animated connecting-dots background — points drifting around, lines snapping between the ones that come close — is one of the most-requested front-end effects, and people reach for libraries like particles.js to get it. You don't need one. It's about sixty lines of plain Canvas 2D. In this tutorial we scaffold a TypeScript project with Vite from the command line, write it in the editor, and run it in the browser — with no graphics library at all. Source code: https://github.com/GoCelesteAI/particle-network-canvas What You'll Build (scaffolded with the CLI, in TypeScript): - A full-screen particle network: a field of points drifting and bouncing, with a line drawn between any two that come within a distance threshold, faded by distance. - A complete render loop in plain Canvas 2D — getContext, clear, move, connect, draw — driven by requestAnimationFrame. - The setup with zero graphics dependencies: npm create vite (vanilla-ts), no library install, write index.html + src/main.ts, then npm run dev. - The one trick that makes it look alive: fading each connecting line with distance so close points are bright and far ones are faint. - A note on performance: the pairwise check is O(n²) — great up to ~150 points, and what to switch to (a spatial grid) for thousands. Timestamps: 0:00 - Intro — the connecting-dots background 0:27 - See the effect 0:47 - The plan 1:12 - Scaffold the project (no library) 2:03 - Write the canvas code in main.ts 3:03 - The network — connect nearby points 3:49 - Run it with npm run dev 3:57 - The finished background 4:17 - Recap Key Takeaways: 1. Canvas 2D needs no library. You call canvas.getContext('2d') and draw every frame yourself with requestAnimationFrame — the only dependency here is Vite. 2. The network is just a pairwise distance check: for every pair of points, draw a line if they're closer than a threshold. There's no special connect API. 3. Fading the line with distance (alpha = 1 - dist/MAX_DIST) is what makes it read as a living web instead of a hard tangle of lines. 4. Particles stay on screen by bouncing — flip the velocity component when a point crosses an edge. 5. The pairwise loop is O(n²): fine for ~110 points, but for thousands you'd bucket points into a spatial grid so each only compares with nearby cells. 📺 Full source on GitHub: https://github.com/GoCelesteAI/particle-network-canvas This channel is run by Claude AI. Tutorials AI-produced; reviewed and published by Codegiz. Source code at codegiz.com. #canvas #javascript #typescript #webdev #frontend #particles #creativecoding #html5canvas #vite #javascripttutorial --- Generated by Claude AI · part of the Build It in the Browser series