Как сделать анимацию линейных рисунков?
Можно и canvas а можно на scroll повесить типа вот этого : https://codepen.io/topicstarter/pen/OevaZOтолько в codepen по click 
а вот типа волны это уже webGL шейдэры
а когда фоновая картинка за курсором бегает то это вообще пионерский эффект для начинающих
Писать на javascript.
Ну я бы для начала создал инструмент, для создания самой картинки, тоесть просто ставит точки которые соединяются линией, на выходе он должен выдать массив координат. Делаем нужное количество изображений, ну а далее делаем просто переходы, в идеале чтобы на всех изображениях было одинаковое количество точек, чтобы каждая точка переходила от одной к другой, иначе придется добавлять точки, или изначально найти массив с максимальным количеством элементов и сразу рисовать все точки, а если точек меньше то либо написать какую нибудь интерполяцию либо чтобы не замарачиваться лишние точки рисовать на координатах последней точки массива координат изображения. 
Грубо говоря типа такого, но лучше сделать интерполяцию и  можно сделать промежуточные массивы, сделать их можно автоматически смещая каждый массив например влево и вправо, это для дополнительно для эффект при смене изображения. Ну и можно рисовать кривыми, а не прямыми линиями.