Как вариант, чисто на CSS:
- Горизонтальные линии через градиенты в background
- круглые элементы через бордеры у before и after
Убирать ненужные части можно играясь с first-child, last-child или непосредственно у самих элементов через доп классы.
Из минусов, не помню как делать кастомную длину штриха для бордеров.
Вот набросал быстрый вариант, значения здесь фиксированные, но можно выносить в переменные и считать через calc:
https://codepen.io/Arseny_dp/pen/vYNorjv

Относительными единицами измерения. 1vh = 1% от высоты рабочей области (Viewport Height). 100vh = полная высота.
Так же можно использовать внутри calc для более сложных вычислений, например
height: calc(100vh - 50px);

С линейным не знаю, но можно сделать с радиальным. Накидал тут 3 варианта, с возрастающей степенью упоротости, в зависимости от того насколько принципиально чтобы были квадраты:
https://codepen.io/Arseny_dp/pen/OJMmVvv

А так, с фоновой картинкой довольно чистый вариант. Почему не хотите его использовать?

Есть такая интересная штука, как mix-blend-mode
Использовать можно например так:

Поддержка неплохая, только IE в пролете