RAX7

Можешь в сам фидл вставить нужные данные и сымитировать их запрос

https://docs.jsfiddle.net/async-requests

В панели выравнивания галочку поставь

Через strokeDashoffset не получится сделать анимацию рисования пунктирной линии. Можно для линии сделать маску и ее уже анимировать.

Сделай фильтр на SVG

Поищи примеры SVG морфинга, может найдешь что-то подходящие

1. как тебе удобней
2. wrapperDiv.querySelectorAll(".child") выберет всех потомков врапера с классом child, т.е. аналогично селектору #wrapper .child. Чтобы выбрать только дочерние придется использовать document.querySelectorAll("#wrapper > .child")

.video__item:nth-child(2) .video__item-bg {
	background-image: url(https://avatars.mds.yandex.net/get-pdb/69339/154fa929-3240-406b-a449-26046db6d42d/s1200);
	width: 583px;
	height: 323px;
}

str.replace(/(?:^|\s+)(\w)/g, ' .$1');

Добавь в settings.json

"emmet.preferences": {
      "filter.commentBefore": "<!-- begin [.CLASS] -->\n",
      "filter.commentAfter": "\n<!-- end [.CLASS] -->",
    },

за основу возьми слайдер из этой статьи https://medium.com/better-programming/webgl-enhanc...
и допили под собственные нужды

Держи очень упрощенный вариант, надеюсь так проще будет понять идею как это сделано

Галочку в настройках убери и будет тебе sass

Маска должна быть сплошной черной. Для этого активной маской слоя нажми shift+F5 (изображение -> выполнить заливку) и выбери заливку цветом фона. Цвет фона перед этим поставь чистый черный #000000

В иллюстраторе можно просто разомкнуть контур окружности перед экспортом/копированием

В HTML атрибутах размер канваса поправь
<canvas id="sig-canvas" width="620" height="160">