Как реализовать анимацию на элементе специфичной формы?

Question

[Искандер Мамедов]

Имеется подобный макет:

Необходимо, чтобы при наведении на цифру, часть серой ломаной линии закрашивалась синим цветом.
Какие технологии помогут в реализации этого? В какую сторону копать?
У меня на уме только canvas, но опыта работы с ним почти нет...
Спасибо!

Comments

[Zhainar]

svg анимация

[Искандер Мамедов]

Zhainar: Можете скинуть какие-либо ресурсы на эту тему?

[Zhainar]

Искандер Мамедов: Такие вещи гуглятся на раз
https://css-tricks.com/guide-svg-animations-smil/

[Faber Estello]

Zhainar: smil уже умер, лучше его не использовать

[Игорь]

Sen Selesss: инфа откуда?

Answer 1

[Faber Estello]

Подсказка:
Можно одним css3 обойтись,
Линии делать фоном
Родственные селекторы ~

Answer 2

[Денис Инешин]

С помощью D3.js
Вот отличный обучающий материал:
chimera.labs.oreilly.com/books/1230000000345/ch01.html

Answer 3

[fetis26]

Сделайте линию в SVG из отдельных кусков, по наведению устанавливайте им fill через CSS