Как двигать элементы на фоне svg / canvas после наведения курсора мыши?

Всем привет. Я стараюсь сделать анимацию для svg элементов. Вот что есть сейчас - jsfiddle.

var sticky = document.querySelectorAll('path');
sticky.forEach(function(elem){
  $(document).on('mousemove touch', function(e){
    moving(elem, e);
  });
});
function moving(el, e){
  var mX = e.pageX,
      mY = e.pageY;
  const item = $(el);

  const customDistance = item.data('distance') * 20 || 120;
  const centerX = item.offset().left + (item.width()/2);
  const centerY = item.offset().top + (item.height()/2);

  var deltaX = Math.floor((centerX - mX)) * -0.45;
  var deltaY = Math.floor((centerY - mY)) * -0.45;

  var distance = calculateDistance(item, mX, mY);

  if(distance < customDistance){
    TweenMax.to(item, 0.5, {y: deltaY, x: deltaX, scale:1.1});
    item.addClass('move');
  }
  else {
    TweenMax.to(item, 0.6, {y: 0, x: 0, scale:1});
    item.removeClass('move');
  }
}
function calculateDistance(elem, mouseX, mouseY) {
  return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}

Проблема в том, что фотографии svg могут быть разными (от 100-500 строк кода, или от тысячи строк) и встречаться на странице несколько раз. Для той анимации которая есть сейчас, нам нужно иметь svg непосредственно в DOM. И если файл svg состоит из нескольких тысяч строк кода, то анимация загрузит систему и не будет работать гладко(jsfiddle).

Я думаю, что svg нужно превратить в canvas, а затем работать с ним. Если это были бы обычные примитивные фигуры (круг, треугольник, квадрат) и они встретились бы один раз на странице, я мог бы нарисовать их на холсте. Но проблема в том, что это могут быть разные формы рисования( не могу знать какие). Из чего я подумал, что было бы здорово, если бы мы могли svg загрузить определенную маску и отобразить в ней точки, которые были бы анимированы после наведения курсора мыши(как сейчас с SVG по первой ссылке). Такая маска могла бы быть сделана как один path(маска). Однако, честно говоря, я не знаю, как это сделать и возможно ли это сделать. Если я рассуждаю неверно, то поправьте меня пожалуйста, чтобы понял в каком направлении хотя бы искать информацию.

Буду очень благодарен за любую помощь, подсказки и примеры. Спасибо.