Конан Варвар

Делаем массив объектов - точки остановки и длительность. На каждом шаге проверяем, есть ли в массиве элемент с текущей координатой и если да - добавляем к дефолтному таймауту длительность из найденного элемента. Типа так.

UPD. Вынесено из комментариев:

а как добавить классы к движущемуся объекту в местах остановки?

Добавляем элементам массива остановок ещё одно свойство - имя класса. При остановке делаем classList.add, после окончания остановки classList.remove (если надо) - ничего сложного.

Вам нужно каждой ячейке дать обертку с фиксированным шириной и высотой. Обертке дать position: relative, а вложенным элементам position: absolute;
https://jsfiddle.net/xdt50yd6/1/

можно так:

<div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="block">1</div>
        <div class="block">4</div>
      </div>
      <div class="col-md-4">
        <div class="block">2</div>
        <div class="block">5</div>
      </div>
      <div class="col-md-4">
        <div class="block">3</div>
        <div class="block">6</div>
      </div>
    </div>
  </div>

а можно использовать плагин типа masonry
https://masonry.desandro.com/

[tabindex='-1']:focus {
    outline: none;
}

Я за svg вариант - можно вывести как кодом, так и как картинку. При любом из этих вариантов данный фон будет легкий, не более 1кб. Картинка растр по любому в высоком разрешении будет тяжелее, к тому же вектор всегда вектор, без потери качества.

Картинкой

Картинка, canvas, svg. Но если ты надеешься на какое-то решение при помощи css, то можешь посмотреть в сторону clip. Естественно будет работать только в самых новых браузерах и то не во всех. Поэтому твой вариант - картинка.

css вариант
Fiddle

https://jsfiddle.net/5ohkwtno/4/

Для мобилы попробуйте поставить!

.owl-carousel-main .owl-stage-outer {overflow: hidden}

type = textarea не существует

Используйте тег <textarea></textarea>

https://jsfiddle.net/owsve5he/1/

https://www.amcharts.com/svg-maps/?map=ukraine
mapsvg.com/maps/ukraine

Еще больше ссылок в гуле.

Или так https://jsfiddle.net/6vcudabe/4/

https://jsfiddle.net/feqz6p04/2/

https://jsfiddle.net/t9v3r7ap/2/

$(document).ready(function() {
  $('.col').on('click', function() {
    $('.col').removeClass('change-color');
  	$(this).addClass('change-color');
  });
});

Небольшая проблема была в том, что у вас этот контур состоял из двух кусков: правого верхнего уголка и всего остального (привет дизайнеру?). Исправил путь так, что теперь это один сплошной путь, без лишних точек и без ненужных групп <g>.

Делаем две копии этого пути, одна под другой. Нижняя – частым синим штрихом. Верхняя – чуть более широким штрихом и цвета фона.

Подобрал на глаз длину штриха 2200, чтобы полностью закрывал всю длину, и на эту же величину смещаю паттерн при наведении мышки. CSS transition делает анимацию плавного перехода от нулевого смещения (паттерн начинается с 0 и полностью закрывает нижнюю копию) до смещения в 2200, чтобы начался пробел и полностью открыл нижний путь.

Чтобы срабатывали стили :hover при наведении мышки пришлось обернуть SVG в <div>

Fiddle