Javascript-форум - Как реализовать нестандартный roadmap?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как реализовать нестандартный roadmap? (https://javascript.ru/forum/dom-window/75639-kak-realizovat-nestandartnyjj-roadmap.html)

Как реализовать нестандартный roadmap?

Добрый день!
Дизайнер нарисовал roadmap с целью последующей интеграции в тему wordpress.

Каждый пункт roadmapa должен будет редактироваться из админки.
Подскажите, пожалуйста, каким образом можно реализовать такую задачу?
Пробовал размечать области на картинке, но не могу к размеченным координатам привязать div с описанием пункта

Я бы картинку на фон поставил, поверх который реализовал обычный список.
Каждый элемент смещался бы от центра на определенное кол-во пикселей по горизонтали.
Главное сделать так, чтобы фон не масштабировался и маркеры (кружочки) всегда оставались на одной позиции вне зависимости от размеров блока описания.

upd. можно еще вот это вот все попробовать отрисовать на холсте (canvas), правда отрисовать линию, на которой должны располагаться элементы, скорее всего, будет не просто.

Секс вам на сегодня обеспечен )

спасибо, наверное, так и сделаю

<canvas id="canvas" width="900" height="300" style="background-color:black";></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var  rgb = 0;
for(var i = 0; i < 100; i++) {
   if(i < 10) rgb = rgb + 25.5;
   if(i > 89) rgb = rgb - 25.5; 
   ctx.strokeStyle = "rgb(" + rgb + ","+ rgb + "," + rgb + ")";
   ctx.beginPath();
   ctx.arc(1500, 150, 1100, (0.96 + (i * 0.0008))* Math.PI, (0.96 + ((i + 1) * 0.0008)) * Math.PI, false);
   ctx.stroke();
}
</script>