Как сделать такой эффект?

Question

[Yes It's matrik]

Как сделать вот такую фичу?Этот что-то типо калькулятора для одной игры. При выборе двух планет, показывает сколько топлива для этого нужно.При этом пропадает все лишнее и подсвечивается только сам путь.А при наведении на какой нибудь конкретный этап (панелька справа) подсвечивается конкретно этот этап.Левая часть максимально адаптивна, и выглядит вообще как картинка.Но это все текст с кучей отдельных элементов. Неужели каждый элемент вручную с помощью % нужно высчитывать и рисовать?
Карта в обычном виде:

Карта когда есть две выбранные планеты:

Карта когда наводишь на конкретный этап полета:


Если что, вот сам сайт: https://ksp.loicviennois.com/
Всем спасибо.

Answer 1

[Михаил Р.]

Но это все текст с кучей отдельных элементов. Неужели каждый элемент вручную с помощью % нужно высчитывать и рисовать?

- Svg, с расположением каждой части в нужном месте, например: d: path("M 1072.8 952.661 V 336.358").
- Каждый элемент svg имеет свой id (например: id="path12523-5"), к которому можно обратиться из css/js.
- Для каждого разрешения дисплея - отдельный svg, но со старыми id.
- JS передает логику по id элементов в svg, не задумываясь, как они там расположены.

КартинкО