Прорисовка поверх div

[232323]

Здравствуйте друзья!

Столкнулся с такой проблемой - дано:
1 div (блок1)
2 div с css, который создает волну
3 div (блок2)

Нужно чтобы 2 div, который с css, при прорисовке волны рисовал её поверх 1 div и 3 div.
В моем нехитром коде 2 div, который с css, прорисовывает волну только на 3 div (блок2)

Как сделать, чтобы 2 div (с css) прорисовывал волну и поверх 1 div (блок1) и поверх 3 div (блок2) одновременно?

Заранее спасибо!


Вот код html:

<div class="block">Блок 1</div>
<div class="curveWrap">
    <svg width="100%" height="100%" viewBox="0 0 1200 100" xmlns="http://www.w3.org/2000/svg">
        <g class="curve" fill="none">
            <path d="M 0, 60 S 200, -60, 400, 60, 900, -120, 1200 60" />
        </g>
    </svg>
</div>
<div class="block" style="margin:-200px 0">Блок 2</div>

Вот код css:

.curveWrap {
    background: #FFF;
    width: 100%;
    height: 300px;
}
.curveWrap .curve {
stroke-linecap: round;
    stroke-opacity: 0.7;
}
.curveWrap .curve path {
    transform-origin: center;
}
.curveWrap .curve path:nth-child(6n + 1) {
    stroke: #ff79B7;
}
.curveWrap .curve path:nth-child(1) {
    stroke-width: 24;
    animation: curve 5s linear 1.4s infinite;
}
 
@keyframes curve {
    0% {
        transform: rotateX(0deg) skewY(0deg);
        stroke-opacity: 0.7;
    }
    50% {
        transform: rotateX(360deg) skewY(8deg);
        stroke-opacity: 1;
    }
    100% {
        transform: rotateX(0deg) skewY(0deg);
        stroke-opacity: 0.7;
    }
}

.block {
  padding: 10px;
  text-align: right;
  color: white;
  opacity: 0.8;
  width: 350px;
  height: 350px;
  background-color: #3a78a1;
}

[uberchel]

.block {
  padding: 10px;
  text-align: right;
  color: white;
  opacity: 0.8;
  width: 350px;
  height: 300px;
  background-color: #3a78a1;
  margin-bottom:5px;
}

.curveWrap {
    width: 100%;
    height: 350px;
    position:absolute; 
    left:0; 
    top: calc(100% / 2);
    z-index:99999;
}
.curveWrap .curve {
stroke-linecap: round;
    stroke-opacity: 0.7;
}
.curveWrap .curve path {
    transform-origin: center;
}
.curveWrap .curve path:nth-child(6n + 1) {
    stroke: #ff79B7;
}
.curveWrap .curve path:nth-child(1) {
    stroke-width: 24;
    animation: curve 5s linear 1.4s infinite;
}
 
@keyframes curve {
    0% {
        transform: rotateX(0deg) skewY(0deg);
        stroke-opacity: 0.7;
    }
    50% {
        transform: rotateX(360deg) skewY(8deg);
        stroke-opacity: 1;
    }
    100% {
        transform: rotateX(0deg) skewY(0deg);
        stroke-opacity: 0.7;
    }
}

[232323]

uberchel, То что нужно! Спасибо!