Sagrana

Все очень просто. Смотрите, у нас есть массив const numbers = [1, 2, 4, 8];. Мы проходим по нему циклом for, при этом заранее не сохраняя длину массива, таким образом, если удалять в цикле каждый раз текущий индекс, то при следующей итерации будет пересчитано условие i < arr.length, но 1 элемент то мы удалили, и следовательно цикл завершится раньше. Чтобы этого не произошло, i уменьшают на 1. В тот момент, когда удаляется элемент, i при следующей итерации «остается на месте».

Никогда не подумал бы, что пригодится - https://ru.stackoverflow.com/questions/716975/%d0%...

Буквально на днях написал статью о том, как все это делается: Делаем интерактивный план местности за 15 минут. Там все основные вопросы и проблемы разобраны. Конкретно в вашем случае скорее всего (без кода не угадать) нужно перебивать ранее заданные стили, либо добавить заливку контурам, где ее нет - умные браузеры не всегда распознают наведение мыши на не залитые элементы в SVG.

Как я люблю такие вопросы. Очередной вкатывальщик не хочет что-то изучать, потому что сложно и начинается...
Это вопросы, суть которых не получить ответ, а получить... некое самоутешение, что бы что-то не изучать.
"А важен ли git", "А важен ли JavaScript", "А важны ли фреймворки", "А важны ли препроцессоры" и т.д.

Ответ:
По факту - ничего не важно, если вы этим не будете пользоваться.
По сути - важно все, ибо знать нужно все, чем больше знаете - тем лучше для вас же! И тем больше вероятность устроиться на работу, потому что у работодателя будет выбор между вами и точно таким же человеком, но который знает\умеет чуточку больше.

на SVG вырез можно сделать хоть в форме котенка

127.0.0.1
Бесплатно и главное - 100% работает. :)
Правда не очень красивая заглушка, что-то там про попытку соединения и код 404 написано.
Шутки в сторону:
Сделать из github.io заглушку через CNAME.

Исторически предполагалось что будут одинаково востребованы www.example.com, ftp.example.com, smtp.example.com и эти субдомены сделают обращения к ним более понятным для ученых которых работают с сетью (а ведь кому, кроме ученых может понадобиться интернет, правда?).
В наше время лучше предполагать введение адреса с www., просто добавить переадресацию на без-www, потому что во первых некоторые пользователи могут на автомате его добавлять, во вторых как дополнительный запас для распределения нагрузки: https://www.yes-www.org/why-use-www/

есть вот такая библиотека https://salvattore.js.org/

1) Линии через path.
2) Круги на местах соединений - через svg элемент<marker>.
3) Анимацию тегом animate.

<svg viewBox="0 0 140 140" width=100vw height=100vh>
  <defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx=5 cy=5 r=3 />
    </marker>
  </defs>
  <path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
    <animate 
           attributeName="d"
           values="M20 20 L30 40 L70 20 L90 80;
               M20 40 L30 10 L70 60 L90 110;
               M10 10 L15 80 L120 70 L150 75;
               M20 20 L30 40 L70 20 L90 80"
           dur="20s"
           repeatCount="indefinite"
           />
  </path>
</svg>

UPD: круги через svg marker

https://github.com/zalog/placeholder-loading

https://codepen.io/erikrahm/pen/ywrmH

Регулярно сталкиваюсь с подобными глюками Device Mode в браузере Google Chrome.
Попросите заказчика обновить страницу, нажав F5 или проверять в этом же инструменте браузера Firefox или вообще с реального устройства.

Еще жив. Для небольших и несложных сайтов подойдет. Визитки, каталоги или магазин. Не важно. Главное не пытайтесь делать гипермаркет.
Выигрывает в простоте интеграции вёрстки.

На css такое делать весело, но не практично. Лучше поищи какой-нибудь 3d движок на js как советует SmthTo
Например на threejs можно хоть чайники с текстурами крутить https://threejs.org/examples/#webgl_materials_nodes