Stop tap from the designer, beautiful, but you need adaptive?

Question

Layout

I love difficult puzzles, but here I am breaking my head for the second day. I love it so that everything is clear)
You can do it with a swing and as if few people will probably notice, but this is not my approach.
There is a design:

I’m interested in how to do it, so that even when the page is resized in width, the line would clearly come out of the lower right corner, then enter the lower right corner of the block, and break it through the upper left corner ... in general then.
It is clear that you can’t do without js, but I can’t even understand how to count, and what is the best way to draw it

Answer 1

With the thickness of the lines, you still need to have some better fun https://jsfiddle.net/o3yuuuff/

Answer 2

If the proportion of the central block differs from the proportion of the window, then it is impossible to do this with one line.

Answer 3

Draw 7 parallel lines

Answer 4

Cool problem, I tried to throw a solution, but somewhere there is a flaw.)
An attempt here

Answer 5

For starters: the designer should draw 2-3 options for different screen sizes.
You can do without tricky JS if you calculate the location purely mathematically.
For example, if the square is centered, then the lines will always come out of the corners.