JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="page">
		<div class="lines">
			<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0,M 100 0 L 0 100" class="first-line" vector-effect="non-scaling-stroke" />
				<path d="M 100 100 L 0 0, M 0 0 L 100 50, M 100 50 L 0 100, M 0 100 L 25 0, M 25 0 L 50 100, M 50 100 L 75 0, M 75 0 L 100 100" class="second-line stroke-width="1" vector-effect="non-scaling-stroke" />
				<path d="M 50 100 L 0 0,   M 0 0 L 25 100,   M 25 100 L 50 0,   M 50 0 L 75 100,   M 75 100 L 100 0,   M 100 0 L 50 100" class="third-line"  vector-effect="non-scaling-stroke" />
			</svg>
		</div>  
    </div>
</body>

CSS

body, html{
    overflow: hidden;
    width:100%;
    height:100%;
}

.page{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background: #0099ff;
	overflow: hidden;
}

.page .logo{
    width: 257px;
    height: 54px;
    background-image: url(../images/logo.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 40px;
    left: 120px;
    z-index: 15;
}

 .content{
    display: flex;
    align-items: center;
    color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

 .content .wrapper{
    width: 100%;
    max-width: 100%;
}

 .content .wrapper .title{
    font-weight: 100;
    font-size: 72px;
}

 .content .wrapper .sub-title{
    font-size: 28px;
}

 .page .lines{
    width: 100%;
    height: 100%;
    z-index: 1;
	position:absolute;
	left:0; right:0;
	top:0; bottom:0;
}

 .page .lines .svg-content{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

 .page .lines img{
      width:100%;
  height: 350px;
  background-position:center;
  background-size: cover;
  -o-background-size: cover;
}

 .page .lines svg{}

 .page .lines path{
	fill:none;
	opacity: 0.15;
	stroke-width:1px;
	stroke:red;
}

@supports (-ms-ime-align:auto) {
    .page .lines path {
        stroke-width:0.15px;
    }
}

 .page .lines path.first-line{
	d: path('M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0, M 100 0 L 0 100');
}

 .page .lines path.second-line{
	d: path('M 100 100 L 0 0, M 0 0 L 100 50, M 100 50 L 0 100, M 0 100 L 25 0, M 25 0 L 50 100, M 50 100 L 75 0, M 75 0 L 100 100');
}

.page .lines path.third-line{
	d: path('M 50 100 L 0 0, M 0 0 L 25 100, M 25 100 L 50 0, M 50 0 L 75 100, M 75 100 L 100 0, M 100 0 L 50 100')
}