How do they do such things?

Question

css

Hello! I looked at the source code and you can see what was done on the canvas. The question is different. How words or numbers are written not just in some kind of font, but in circles or some kind of objects. Type stars on a black background to write "404", etc.
Here is an example.
How do these things get implemented? Libraries or you can stir up your hands?

Answer 1

hotdot.pro/js/404.js is
too complicated to even think about how to do it :D
threejs and your code.
As a result, we get spectacular and very heavy crap ;D

Answer 2

The algorithm is something like this:
- We take a regular canvas, write something on it or display a picture (in this case, strictly 2 colors).
- We take imageData from what happened.
- We go through all the pixels of this imageData with some step, make a "particle" object with the necessary coordinates when the color corresponds to a certain one (if written in black and white, it means if the color of the pixel is black).
- We erase the inscription.
- We pass through the array of particles, draw a small circle (anything, but let it be a circle) in place with the coordinates of this particle.
- PROFIT.
To taste, the "color" parameter (preferably translucent) and "size" are added to the particle. You can make an update function that will change these parameters and coordinates, requestAnimationFrame to help us. The coordinates of a particle change according to a certain law in some radius from its initial position, you can take the parametric equation of any closed curve and use it to calculate the deviation of the particle from its initial position.