RAX7

$('.background').mousemove(function(e) {
    var x = (e.pageX * -1 / 5), y = (e.pageY * -1 / 5);
    $(this).css('background-position', x + 'px ' + y + 'px');
});

неверный background-position
https://codepen.io/anon/pen/MRJENd

Что бы работало как stroke-dasharray нужно рисовать эту линию обводкой (stroke). Есть еще вариант: использовать paht с заливкой (fill) как clipPath, для линии с обводкой и опять же эту обводку анимировать через stroke-dasharray.

у .nav__item убери паддинг в процентах, он рассчитывается от ширины родителя, а ширина родителя зависит от .nav__item.
https://jsfiddle.net/znt5pbhw/

Чуть-чуть увеличь background-size: 50.2% 50.2%;, хром видимо криво переводит проценты background-size в пиксели.

Не слишком адаптивно, но допилить можно.

Чтобы сверстать такое нужна поддержка conic-gradient https://caniuse.com/#feat=css-conic-gradients и mask-image https://caniuse.com/#feat=css-masks поэтому проще будет сделать картинкой.

По моему вы просто свой скрипт build/js/script.js не подключили

Хардкорное решение на SVG

Почитай как делают рукописный текст на SVG https://css-tricks.com/animate-calligraphy-with-svg/

У тебя картинка в png уже полупрозрачная, просто наложи ее поверх фонового цвета

точку между блоков наверное и сам сделаешь

потому что

.jcarousel li {
  width: 250px !important;
}