Максим Тимофеев

Думаю это явно svg или canvas. Я бы взял любую библиотеку для morth-инга svg (анимация трансформации path) и хранил эти path в json подставляя при перемещении ползунка.
Библиотек таких валом:
https://yandex.ru/search/?text=svg%20morph&clid=22...
Если только под эту задачу, я бы выбрал:
alexk111.github.io/SVG-Morpheus
она маленькая и простая для освоения. d3js - как предложил Stalker_RED тоже подойдет, но это слишком тяжелое и сложное решение для данной задачи (500kb против 22kb). Есть смысл если кроме этого будут использованы и другие ее возможности.

1. button тоже имеет type
2. input type="submit" и button type="submit" отправят форму. Но button может иметь контент, а input нет. Если Вам достаточно иметь просто текст типа "отправить", то годится и то и то, но input лаконичнее.
3. Если управление отправкой идет с помощью js, то иногда удобнее использовать button type="button" потому как она не вызывает отправку формы.

Так что совершенно не важно что использовать, если не имеете весомых аргументов в пользу какого либо варианта. А они появятся только по мере изучения js.

не проще ли в песочнику код кинуть, чем видео делать? Потому как разбираться легче в песочнице.
Поэтому только предположение:
Вы не верно представляете точку вращения. Элементы вращаются не относительно своего центра, как нам бы всем хотелось. Прочитайте эту статью, думаю станет понятно: https://css-tricks.com/transforms-on-svg-elements/

Смотря как реализован таймер. Но скорее всего поможет - вынести его код в отдельный js файл и подключить с параметром mycode.js?v=1234
Но скорее всего проблема в том, что таймер реализован криво. В js коде ведь можно предусмотреть такую ситуацию, проверить стоит ли таймер и если стоит, отправить ajax на сервер и получить свежие данные.

1 вариант: https://jsfiddle.net/59yd1qth/1/
2: clip-path, но https://caniuse.com/#search=clip-path
3: svg маска: css.yoksel.ru/svg-masks

Загружаете везде в src рамку в виде svg картинки. Далее по предложенной Дмитрий схеме, по мере загрузки, заменяете src в картинках. Url картинки при этом можно хранить в дата атрибутах, будет что-то типа такого:

<img src="some_small_simple.svg" width="200px" height="100px" data-img="/some/url/to/img.jpg">

выбираете все картинки с data-img и в цикле выполняете загрузку и замену.
Другие варианты

Медиа запросы тут не в помощь.

Вы ошибаетесь. Фильтры у Вас уходят при ширине 991px и меньше. Собственно в css это прописано:

.query-filters {
    left: -260px;
}
@media (min-width: 992px)
.query-filters {
    left: 0;
}

Итого: изначально left: -260;, а при 992 и больше left: 0; и управляет этим как раз медиа запрос

Не совсем понятно что это и как будет использоваться. Как по мне - это svg или canvas, зависит дальнейшего использования. Городить такое кроссбраузерно на css+html то еще занятие.