Как получить желаемый svg элемент?

Question

[Pasher123]

Я ни разу не работал с SVG, но нужно получить данный результат.

Благо у меня есть с чем работать nisnom.com/veb-razrabotki/interesnaya-animatsiya-d...
Но у меня не получается изменить так, как мне нужно.

Comments

[Pasher123]

Уточняю. Нужна именно форма, цвет изменить просто

Answer 1

[Варлам Ерофеич]

Если надо на чёрном фоне, то вот:

Всё-таки придётся пройти по ссылке, иначе не видно...
Да и вопрос не совсем понятен, ведь по вашей ссылке уже всё есть. нужно лишь поэкспериментировать и всё.

Answer 2

[Dima Polos]

Можно в самом svg сделать тег style и прописать svg:hover path{ fill: #234567; }
Можно сделать это в css, но тогда svg должен быть прямо в html. Не через img, а прямо в разметке.

Comments

[Pasher123]

А что на счёт закруглений и расположения "прерывания"?

[Dima Polos]

Pasher123, рисуете в иллюстраторе или просите того, кто вам прислал дизайн, чтобы нарисовал картинку как надо, а круг можно добавить через css с помощью :before/:after при наведении задавать цвет кругу, а по умолчанию цвет круга сделать прозрачным.