Ivan Bogachev

Я же делал проверку на Element, значит у объекта точно должно быть это свойство html

if (value instanceof Element) {
    value = getHtml(key);
}

Ну value может быть и является "instanceof Element", но дальше вы вызываете функцию getHTML, передавая в качестве параметра строку. А никакого свойства html у нее, разумеется, нет.

Uncaught SyntaxError: Cannot use import statement outside a module

Скрипту нужно явно задать type="module", чтобы браузер знал, что этот скрипт - модуль, и в нем можно использовать импорты и экспорты. А по умолчанию скрипт за модуль не считается.

Все это строится на шейдерах в WebGL.

Первый пример очень похож на вот эту демку (лучше открыть в отдельном окне):


А вот найти готовое решение один в один как на какой-то гифке из сети очень сложно. Часто его не будет. Дизайнер концепт нарисовал, а на практике никто такое еще не запрограммировал. В такой ситуации - только руками писать. Советую почитать введение в программирование шейдеров для верстальщиков и посмотреть стримы Юрия Артюха (меня терзают смутные сомнения, что он когда-то делал эффект, как во втором вашем примере).

modal.show(...);

Скорее всего проблема тут. На SO много вопросов в стиле "jquery show/hide не работает в safari". В общем случае можно дать рекомендацию не использовать функции show/hide, а добавлять свои CSS-классы к элементу в зависимости от его состояния.

Почему в примере не получается создать снимок

Потому что параметры windowWidth и windowHeight в данном случае задавать не нужно. Уберите их и все заработает.

Очень рекомендую почитать статью про трехмерные презентации товаров на Three.js и разобраться с примером из нее. Там речь в частности идет про загрузку и отображение модели и вращение камеры вокруг нее.

У тега script кроме атрибута async есть еще defer. Скрипты с этим атрибутом загружаются все асинхронно, но выполняются потом в том порядке, в котором записаны в html (только они все должны быть отдельными файлами, не инлайновыми скриптами).

Также, если у вас уже есть много скриптов, да еще и месиво из инлайново вставленных и асинхронно подгружаемых, причем все друг от друга зависят и оперативно это не починить, то можно организовать маленькую систему событий, которая будет в себе хранить информацию о том, кто загрузился, а кто - нет (чтобы не получился классический callback-hell). Она должна быть первым скриптом на странице. А загрузившиеся потом скрипты будут ей сообщать "я загрузился", а потом у нее спрашивать "ну что, вон тот уже загрузился?" а она такая "да", и они будут выполняться сразу, или "нет, пока нет", а они такие "ну ок, когда загрузится, скажи". Что-нибудь в таком духе. Также эта штука может помогать при отладке, чтобы понимать, что реально произошло на странице, а что еще нет.

В postcss-trolling есть готовая CSS анимация под вашу задачу. Нужно лишь задать разный animation-delay элементам (возможно с помощью :nth-of-type или :nth-child).

Попробуйте использовать пресет не "env" из "babel-preset-env", а "@babel/preset-env" из одноименного пакета.

По сути нужно применить фильтр к канвасу, который там спрятан среди элементов карты. Так что если взять разметку вроде:

<div class='my-super-map'>
    <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A07be0313631167b7c9034cf92574b147daa12b122f3d938bc90aa67df29c81ac&amp;width=600&amp;height=449&amp;lang=ru_RU&amp;scroll=true"></script>
</div>

то останется только добавить:

.my-super-map canvas {
    filter: invert(100%);
}

Не то, чтобы это было красивым решением, но оно работает.

Вы можете в графическом редакторе переместить и масштабировать всю свою карту в SVG так, чтобы она была грубо говоря не от 0 до 100 (или какая она у вас там) по горизонтали, а от 19 до 169 (вроде бы, не силен в географии). И по вертикали так же подвинуть. И исходить из соображений, что координаты X/Y в SVG буквально равны нашим обычным координатам по широте и долготе. На восток и север - в плюс, на запад и юг - в минус. А перемещение на экране и масштабирование можно сделать с помощью атрибута viewbox, меняя его по ходу дела. Если вы руками рисуете, то таким образом можно получить точность в 1/4 градуса без умственных усилий, просто представив циферблат (0'/15'/30'/45' -> 0/.25/.50/.75), так что думаю, что для ваших задач, где точность не столь важна, это вполне подойдет.