Что лучше использовать в реализации такого элемента?

Question

[Slava]

Нужно реализовать такой элемент для будущей игры. Должна быть возможность выбора отдельных частей, как подсвечено на картинке. Ну и плюс адаптивность.



Подскажите, пожалуйста, чем будет его лучше сделать? HTML/CSS, Canvas или может есть какой-то плагин, который поможет.

Спасибо!

Answer 1

[AngReload]

Ратую за SVG

Comments

[Slava]

Спасибо, принял во внимание!

Answer 2

[Кристина]

Самый примитивный и действенный вариант с интерактивом. https://codepen.io/kris-iris/pen/EdgxdO

Нарисуешь за минуту и вперёд, но... Canvas будет впереди, конечно, хотя тут нужно определяться с задачами.

Comments

[dollar]

Как вы такое пишите, да ещё и "за минуту", ума не приложу...

[AngReload]

dollar, такой код генерируют графические редакторы, вручную так никто бы не написал

[Slava]

Скажите, а чем Вы такой код сгенерировали?

[Кристина]

Slava, Я, например, просто картинку в adobe illustrator воткнула, а там есть функция трассировки, т.е. переводит в вектор иллюстрации. Потом просто svg открываешь в любом редакторе и увидешь такой код. Svg - это xml файл... в общем всё просто) Любую svg картинку открой, хоть в блокноте и поймёшь.

[Slava]

Кристина, Спасибо!!!