Проблемы с анимацией на canvas не получается слизать

Question

https://happyegg.com/ - есть вот такой сайт. В банере анимация( первая секция)

Совсем не понимаю как можно слизать ее с этого сайта, может кто-то пример может предоставить или подскажет куда копать , сижу сутки и ничего не получается

так же ниже есть секция при наведение на картинку они используют санвас, но аналогично как и выше, ничего не выходит

Спасибо заранее!

Answer 1

В оригинале конечно же какая-то более сложная закономерность, но это роли не играет все будет как-то так же, считаем на сколько нужно сдвинуть каждую точку в каждом кадре, в зависимости от того, где сейчас курсор:

let count = 300;
let mouse = [innerWidth/2, innerHeight/2];
let pts = [...Array(count)].map((_, i) => [innerWidth/2, i/(count-1)*innerHeight]);
let svg = document.querySelector('svg')
let path = document.querySelector('svg path')
addEventListener('resize', resize);
addEventListener('mousemove', move);
resize();
requestAnimationFrame(upd);

function upd() {
  let d = ['M', 0, 0];
  pts.forEach(p => {
    let dx = mouse[0] - p[0];
    let dy = mouse[1] - p[1];
    p[0] += dx/30*(Math.cos(dy/innerHeight*6)*0.4+0.6);
    d.push('L', ...p);
  });
  d.push('L', 0, innerHeight, 'Z');
  path.setAttribute('d', d.join(' '))
  requestAnimationFrame(upd);
}

function move(e) {
  mouse[0] = e.x;
  mouse[1] = e.y;
}

function resize(){
  svg.setAttribute('width', innerWidth)
  svg.setAttribute('height', innerHeight)
}

body {
  margin: 0;
  overflow: hidden;
}

<svg>
  <path></path>
</svg>

БЛОГ НА HUSL

Проблемы с анимацией на canvas не получается слизать

Ответы (1 шт):