А в чем проблема? Как Вы пытались решить эту проблему(написать в интернете "Решите мне задача" не считается)?
Разделите конечную цель на маленькие:
1. Создаете/рисуете точки
2. Добавляете обработчик движения мыши
3. Определяете дистанцию от мышки до точки ( теорема Пифагора )
4. Увеличиваете/уменьшаете значение радиуса точки в зависимости от положения мыши
Все! Самое сложное это теорема Пифагора(5-6 класс).
Остается все разбросать по методам....
Вот
"наговнокодил" пример на коленках(использовал
class поэтому поддержку браузера смотрите сами):
https://codepen.io/janeRivas/full/NMGBvG/ (если лагает у Вас, то удалите функцию на строке 116 и 120 или поменяйте кол. точек на строке 18 )
Если нужно уместить все точки в какой-то фигуре(букве), то поменяйте функцию
Rand, добавив в нее новые условия.
ps если как-то по-другому надо соединить линии между собой, то у нас на каждом кадре есть координаты точек
this.pos.x и
this.pos.y. Ну и меняй метод
lineTo как тебе надо...
psps наверно начинать надо с простого, но если делать нормально, то я бы делал на
three.js или
pixi.js. Логика точно такая же, только перфоманс будет в разы лучше + сможем избежать кучу проблем с картинками и тп...
