Ольга

const wrappers = document.querySelectorAll('.how_it_works');
const svgLine = document.querySelector('#svg-line');
const line12 = svgLine.querySelector('.line-1-2');
const line23 = svgLine.querySelector('.line-2-3');
const line34 = svgLine.querySelector('.line-3-4');
const line45 = svgLine.querySelector('.line-4-5');

const setAttributes = (element, attrs) => {
	for (const attr in attrs) {
		element.setAttribute(attr, attrs[attr]);
	}
};

const line = (wrapper) => {
	const wrapperBox = wrapper.getBoundingClientRect();
	const items = wrapper.querySelectorAll('.block_line .item');
	const points = [];

	for (const item of items) {
		const element = item.querySelector('.num');
		const box = element.getBoundingClientRect();

		points.push({
			x: box.left + box.width / 2 - wrapperBox.left,
			y: box.top + box.height / 2 - wrapperBox.top
		});
	}

	svgLine.style.setProperty('top', 0);
	svgLine.style.setProperty('left', 0);

	setAttributes(line12, {
		x1: points[0].x,
		y1: points[0].y,
		x2: points[1].x,
		y2: points[1].y
	});
	setAttributes(line12, {
		x1: points[1].x,
		y1: points[1].y,
		x2: points[2].x,
		y2: points[2].y
	});
	setAttributes(line12, {
		x1: points[2].x,
		y1: points[2].y,
		x2: points[3].x,
		y2: points[3].y
	});
	setAttributes(line12, {
		x1: points[3].x,
		y1: points[3].y,
		x2: points[4].x,
		y2: points[4].y
	});
};

const start = () => {
	for (const wrapper of wrappers) {
		line(wrapper);
	}
};

start();

window.addEventListener('resize', start);