OneTaskBy Tim King · Updated
Particle Background
Connected Dots Animation Without a Library
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Particle Background works
A particle background fills a hero with slowly drifting dots that link up with thin lines when they pass close to each other. Set the number of particles, the link distance, the speed and the colour, then copy the code.
The connected dots look suits tech, data and networking products because it hints at links between things. This version is a lightweight replacement for particle libraries, written in plain JavaScript you can read and change.
How the particle background works
Each particle has a position and a small velocity. Every frame it moves and bounces off the edges of the section. Then every pair of particles is checked, and when two are closer than the link distance a line is drawn between them, fading out as they move apart. The check grows with the square of the particle count, which is why the count is capped at a level that stays smooth.
Accessibility
The canvas is aria-hidden, and visitors who prefer reduced motion see a still network instead
of a moving one. The animation also stops when the section is removed from the page.
FAQ
Is this a particles.js alternative?
Yes, for the common linked dots effect. It covers moving particles, bouncing edges and fading links in about fifty lines, with no download. Libraries add extras like mouse repulsion and image particles.
How many particles should I use?
Between 50 and 100 works well for a full width hero. On small screens the same count looks
denser, so you can scale it with the width, for example Math.round(w / 15) particles.
Why do lines appear and disappear?
A line is only drawn while two particles are within the link distance, and its opacity drops as they move apart. That constant joining and breaking is what makes the network feel alive.
Can the particles react to the mouse?
Yes. Store the pointer position on pointermove and treat it as one extra particle in the link
loop, so lines reach out to the cursor as it moves across the section.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Starfield Background
Make stars stream past as if flying through space.
Snow Effect
Add gently falling, drifting snow behind a section.
Bubble Background
Add see-through bubbles that wobble as they rise.
Cursor Trail
Add a fading dot trail that follows the mouse.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.