Hello happy coders!
I found this particle code on another post and updated it make it work for my purpose... see codepen. Every time you mouse-over the black area, 300 particles (divs) are added and animated. While it looks pretty smooth in Safari & Firefox - it's not smooth at all in Chrome. And I know the processor load is pretty high in all browsers.
How can I improve the code to make it run more smoothly with less processor load? Maybe using canvas might be a bett
Drawing horizontal and vertical lines may appear blurry. This is by design, and makes more sense if you understand how stroke-width works in SVG. The stroke is centered on a path, so half of it will be on one side of the path, and the other half will be on the other side of the path. So drawing a 1px line at a whole pixel value will cause it to be drawn inside 2 pixels because it is straddling the pixel.
The fix is to translate the context back half a pixel b