Amirali Amirifar Amirali Amirifar - 2 years ago 101
HTML Question

How to make this Gorgeous canvas

I was viewing this website and something in it's slider caught my attention.
It's some dots moving around the canvas and if you move your mouse on them they connect together with lines and its awesome.

Do you know whats the plugin or how to make something like that? [Because I saw something like this on another website]

Its the image I captured from

I Captured this image from I will appreciate you for your help.

Answer Source

The idea of this canvas is to plot some random particles that float around the screen, and whenever they intercept a certain radiance, they get connected with each other. This code is to give you an idea on how the particles are drawn:

function() {
  var pos = [round(this.position[0]), round(this.position[1])]
    , connections = 0;
  context.globalAlpha = 0.1;
  for (var i = 0; i < maxPoolSize; i++) {
    var boid = pool[i]
      , distance = this.distanceTo(boid)
      , opacity = 1-( distance/distanceThreshold )
    if(distance <= distanceThreshold) {
      if(!this.isConnectedTo( boid )){
        context.moveTo( pos[0], pos[1]);
        context.lineTo(round( boid.position[0] ), round( boid.position[1] ));
  context.globalAlpha = 0.5;

You can use a library called particles.js or else look for some examples on codepen, like the following one.

I hope that my answer helps you.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download