Как сверстать диагональные линии?

Question

[Илья Петров]

Как можно сверстать такие диагональные линии?

Вариант с картинкой в svg не рассматривается (имею в виду сохранить линии как картинку и поставить фоном) — изменяется толщина линий

Основная задача, чтобы линии были адаптивные и толщина всегда была одинаковая

Решение на JS подойдет. Можно сделать через расчет длины диагонали, но пока не понимаю, как координаты задать в таком случае

Answer 1

[Сергей Сергей]

Answer 2

[galkinhtml]

https://codepen.io/galkinhtml/pen/bGvMeyR

Comments

[Сергей Сергей]

Полосы в "задании" ограничены по длине и завершаются в пределах прямоугольника изображения. Градиент же бесконечен и до самого конца прямоугольника.

[Илья Петров]

Пробовал такое решение, оно почти верное, но есть нюанс — нужны толстые линии.
Когда изменяешь параметры в calc(), линия размывается

[Илья Петров]

Сергей Сергей, ограничение линий делаю через дополнительный блок, ему задаю параметры

.lines-wrap {
  width: calc(100% - 20px);
  height: calc(100vh - 20px);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

[Ankhena]

Илья Петров, чтобы не размывалась подбирайте разницу между точками перехода градиента. Так чтобы не было ни зазубрин и сильного размытия.
Правда, на разных экранах/видяшках и т.д. всё равно может быть по-разному.