Как сделать кривые линии адаптивными и привязанными к точкам на css?

Question

[WebforSelf]

Есть такой блок



НА нем будет общее изображение и к нему 4 точки с линиями ведущими к заголовкам.
Как сделать адаптивными данные линии? уже думал просто взять их всех и наложить фоном, но выходит что при адаптивности приходится просто мега огромное количество брейкпоинтов ставить. Может есть способ легче?

Answer 1

[Максим]

Примерно так

Comments

[WebforSelf]

Отличное решение, а вставить фото посередине тоже через svg? потому что background не будет с точками смещаться при изменении размера же?

[Максим]

WebforSelf, да тоже как в прошлом ответе через тэг image