Как создать этот Canvas Animation JS

Ваш вопрос слишком открытый. Но есть несколько библиотек, которые сэкономят вам много времени:

• D3.js
• Processing.js
• Paper.js

Их гораздо больше, но это зависит от того, что вам нужно.

Я не могу сказать, с помощью какой библиотеки была создана эта анимация, потому что она скрыта в связанном коде React, но я могу показать вам способ сделать что-то подобное с Paper.js.

Глядя на анимацию, кажется, что правила следующие:

• на круг влияет указатель мыши, если он находится на определенном расстоянии от него
• Ближайший к указателю мыши кружок:
  • чем больше он становится
  • чем дальше от центра окна он уходит.

Вот Эскиз, реализующий это.

//
// CONSTANTS
//

// user defined
var ROWS_COUNT                = 10;  // number of rows in the grid
var COLUMNS_COUNT             = 10;  // number of columns in the grid
var MOUSE_INFLUENCE_RADIUS    = 350; // maximal distance from mouse pointer to be influenced
var INFLUENCE_SCALE_FACTOR    = 1;   // maximal influence on point scale
var INFLUENCE_POSITION_FACTOR = 15;  // maximal influence on point position

// computed
var STEP_X = view.bounds.width / COLUMNS_COUNT;
var STEP_Y = view.bounds.height / ROWS_COUNT;
var RADIUS = Math.min(STEP_X, STEP_Y) * 0.1;


//
// ITEMS
//

// create a circle for each points in the grid
var circles = [];
for (var i = 0; i < COLUMNS_COUNT; i++)
{
    for (var j = 0; j < COLUMNS_COUNT; j++)
    {
        var gridPoint = new Point((i + 0.5) * STEP_X, (j + 0.5) * STEP_Y);

        circles.push(new Path.Circle({
            center     : gridPoint,
            radius     : RADIUS,
            fillColor  : 'black',
            // matrix application is disabled in order to be able to manipulate scaling property
            applyMatrix: false,
            // store original center point as item custom data property
            data       : {gridPoint: gridPoint}
        }));
    }
}


//
// EVENTS
//

function onMouseMove(event)
{
    for (var i = 0; i < circles.length; i++)
    {
        var circle    = circles[ i ];
        var gridPoint = circle.data.gridPoint;
        var distance  = event.point.getDistance(gridPoint);

        // only influence circles that are in mouse influence zone
        if (distance <= MOUSE_INFLUENCE_RADIUS)
        {
            var influence = 1 - distance / MOUSE_INFLUENCE_RADIUS;

            // the closest the circle is from the mouse pointer
            // the bigger it is
            circle.scaling = 1 + influence * INFLUENCE_SCALE_FACTOR;
            // the farthest it is from view center
            circle.position = gridPoint + (gridPoint - view.center).normalize(influence * INFLUENCE_POSITION_FACTOR);
        }
        else
        {
            // reset circle state
            circle.scaling  = 1;
            circle.position = gridPoint;
        }
    }
}