Free online Particles Effect Generator. Create Canvas particle animations with custom count, size, color, speed, and line connections. Live preview, one-click copy HTML+CSS+JS code. Client-side, zero dependencies.
Zero Dependencies · Works OfflineParticle effects are visual effects created by many small graphical elements moving on a canvas. Each particle has independent position, velocity, size, and color properties, drawn and animated via the HTML5 Canvas API. They are widely used for web background decoration, data visualization, and interactive art.
Particle effects are visual effects created by many small graphical elements (particles) moving on a canvas. Each particle has independent position, velocity, size, and color properties, drawn and animated via the Canvas API. They are commonly used for web backgrounds, data visualization, and interactive art.
Line connections are implemented by calculating the distance between each pair of particles. When the distance is below a set threshold, a semi-transparent line is drawn connecting the two particles. The closer the particles, the more opaque the line; the farther apart, the more transparent, creating a mesh-like visual effect. This is an O(n²) algorithm, so be mindful of performance with large particle counts.
Performance tips: 1) Keep particle count under 200 on desktop; 2) Use requestAnimationFrame instead of setInterval; 3) Compare distance squared instead of computing square roots for line detection; 4) Use spatial partitioning (grid method) to reduce collision checks; 5) Wrap particles around the canvas instead of creating new objects.
Yes. The code generated by this tool is completely free and can be used in personal and commercial projects without attribution. The code has no third-party dependencies, and you are free to modify and distribute it.
This tool supports circle, square, and triangle particles. Circles are the most common and perform best; squares suit pixel-style effects; triangles work well for geometric designs. You can also customize other shapes by modifying the generated code.