recreating some weave-gif in pure CSS

/*Downloaded from https://www.codeseek.co/pixelass/recreating-some-weave-gif-in-pure-css-qOELEb */
body {
  background: #101010;
  ovwerflow: hidden;
}

.pane {
  position: absolute;
  height: 260px;
  width: 260px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  font-size: 0;
  color: #DCDCDC;
}

.box:nth-child(1) .line {
  position: relative;
  height: 20px;
  width: 210px;
  margin: 0;
  box-shadow: 15px 0 0 -5px #F00000, 25px 0 0 -5px #101010, -5px 0 0 -5px #101010, 35px 0 0 -5px #F00000, -15px 0 0 -5px #F00000;
}
.box:nth-child(1) .line .inner {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to left, currentColor 75%, transparent 75%);
  background-size: 40px 10px;
  background-repeat: repeat-x;
  visibility: visible;
  margin-left: 10px;
}
.box:nth-child(1) .line:nth-child(odd) .inner {
  background-position: -20px center;
}
.box:nth-child(1) .line:nth-child(odd):before {
  z-index: 3;
}
.box:nth-child(1) .line:nth-child(odd):after {
  z-index: 1;
}
.box:nth-child(1) .line:nth-child(even) .inner {
  background-position: 40px center;
}
.box:nth-child(1) .line:nth-child(even):before {
  z-index: 1;
}
.box:nth-child(1) .line:nth-child(even):after {
  z-index: 3;
}
.box:nth-child(1) .line:first-child {
  box-shadow: 15px 0 0 -5px #F00000, 25px 0 0 -5px #101010, 35px 0 0 -5px #F00000;
}
.box:nth-child(1) .line:first-child .inner {
  z-index: 4;
}
.box:nth-child(1) .line:first-child:before {
  z-index: 5;
}
.box:nth-child(1) .line:last-child {
  box-shadow: -5px 0 0 -5px #101010, -15px 0 0 -5px #F00000;
}
.box:nth-child(1) .line:last-child .inner {
  z-index: 4;
  z-index: 3;
}
.box:nth-child(1) .line:last-child:after {
  z-index: 6;
  z-index: 4;
}
.box:nth-child(1) .line:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  background: currentColor;
  height: 50%;
  width: 100px;
  -webkit-animation: scaleX 1.25s ease-in-out infinite alternate;
          animation: scaleX 1.25s ease-in-out infinite alternate;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: translateY(-50%) scaleX(1);
          transform: translateY(-50%) scaleX(1);
  border-radius: 2.8571428571px 0 0 2.8571428571px;
  visibility: visible;
  margin-left: 10px;
}
.box:nth-child(1) .line:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  background: currentColor;
  height: 50%;
  width: 100px;
  -webkit-animation: scaleX 1.25s ease-in-out infinite alternate;
          animation: scaleX 1.25s ease-in-out infinite alternate;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: translateY(-50%) scaleX(1);
          transform: translateY(-50%) scaleX(1);
  border-radius: 2.8571428571px 0 0 2.8571428571px;
  visibility: visible;
  margin-right: -10px;
}
.box:nth-child(1) .line:nth-child(1):before {
  -webkit-animation-delay: -1.25s;
          animation-delay: -1.25s;
}
.box:nth-child(1) .line:nth-child(1):after {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.box:nth-child(1) .line:nth-child(2):before {
  -webkit-animation-delay: -1.0576923077s;
          animation-delay: -1.0576923077s;
}
.box:nth-child(1) .line:nth-child(2):after {
  -webkit-animation-delay: -2.3076923077s;
          animation-delay: -2.3076923077s;
}
.box:nth-child(1) .line:nth-child(3):before {
  -webkit-animation-delay: -0.8653846154s;
          animation-delay: -0.8653846154s;
}
.box:nth-child(1) .line:nth-child(3):after {
  -webkit-animation-delay: -2.1153846154s;
          animation-delay: -2.1153846154s;
}
.box:nth-child(1) .line:nth-child(4):before {
  -webkit-animation-delay: -0.6730769231s;
          animation-delay: -0.6730769231s;
}
.box:nth-child(1) .line:nth-child(4):after {
  -webkit-animation-delay: -1.9230769231s;
          animation-delay: -1.9230769231s;
}
.box:nth-child(1) .line:nth-child(5):before {
  -webkit-animation-delay: -0.4807692308s;
          animation-delay: -0.4807692308s;
}
.box:nth-child(1) .line:nth-child(5):after {
  -webkit-animation-delay: -1.7307692308s;
          animation-delay: -1.7307692308s;
}
.box:nth-child(1) .line:nth-child(6):before {
  -webkit-animation-delay: -0.2884615385s;
          animation-delay: -0.2884615385s;
}
.box:nth-child(1) .line:nth-child(6):after {
  -webkit-animation-delay: -1.5384615385s;
          animation-delay: -1.5384615385s;
}
.box:nth-child(1) .line:nth-child(7):before {
  -webkit-animation-delay: -0.0961538462s;
          animation-delay: -0.0961538462s;
}
.box:nth-child(1) .line:nth-child(7):after {
  -webkit-animation-delay: -1.3461538462s;
          animation-delay: -1.3461538462s;
}
.box:nth-child(1) .line:nth-child(8):before {
  -webkit-animation-delay: 0.0961538462s;
          animation-delay: 0.0961538462s;
}
.box:nth-child(1) .line:nth-child(8):after {
  -webkit-animation-delay: -1.1538461538s;
          animation-delay: -1.1538461538s;
}
.box:nth-child(1) .line:nth-child(9):before {
  -webkit-animation-delay: 0.2884615385s;
          animation-delay: 0.2884615385s;
}
.box:nth-child(1) .line:nth-child(9):after {
  -webkit-animation-delay: -0.9615384615s;
          animation-delay: -0.9615384615s;
}
.box:nth-child(1) .line:nth-child(10):before {
  -webkit-animation-delay: 0.4807692308s;
          animation-delay: 0.4807692308s;
}
.box:nth-child(1) .line:nth-child(10):after {
  -webkit-animation-delay: -0.7692307692s;
          animation-delay: -0.7692307692s;
}
.box:nth-child(1) .line:nth-child(11):before {
  -webkit-animation-delay: 0.6730769231s;
          animation-delay: 0.6730769231s;
}
.box:nth-child(1) .line:nth-child(11):after {
  -webkit-animation-delay: -0.5769230769s;
          animation-delay: -0.5769230769s;
}
.box:nth-child(1) .line:nth-child(12):before {
  -webkit-animation-delay: 0.8653846154s;
          animation-delay: 0.8653846154s;
}
.box:nth-child(1) .line:nth-child(12):after {
  -webkit-animation-delay: -0.3846153846s;
          animation-delay: -0.3846153846s;
}
.box:nth-child(1) .line:nth-child(13):before {
  -webkit-animation-delay: 1.0576923077s;
          animation-delay: 1.0576923077s;
}
.box:nth-child(1) .line:nth-child(13):after {
  -webkit-animation-delay: -0.1923076923s;
          animation-delay: -0.1923076923s;
}

.box:nth-child(2) {
  margin: 15px -15px;
  color: #F00000;
}
.box:nth-child(2) .line {
  position: relative;
  display: inline-block;
  height: 210px;
  width: 20px;
  box-shadow: 0 15px 0 -5px #DCDCDC, 0 25px 0 -5px #101010, 0 -15px 0 -5px #DCDCDC, 0 35px 0 -5px #DCDCDC;
}
.box:nth-child(2) .line .inner {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to bottom, currentColor 75%, transparent 75%);
  background-size: 10px 40px;
  background-repeat: repeat-y;
  visibility: visible;
  margin-top: 10px;
}
.box:nth-child(2) .line:nth-child(odd) .inner {
  background-position: center 10px;
}
.box:nth-child(2) .line:nth-child(odd):before {
  z-index: 3;
}
.box:nth-child(2) .line:nth-child(odd):after {
  z-index: 1;
}
.box:nth-child(2) .line:nth-child(even) .inner {
  background-position: center -10px;
  z-index: 5;
}
.box:nth-child(2) .line:nth-child(even):before {
  z-index: 6;
  z-index: 1;
}
.box:nth-child(2) .line:nth-child(even):after {
  z-index: 3;
}
.box:nth-child(2) .line:first-child {
  box-shadow: 0 15px 0 -5px #F00000, 0 25px 0 -5px #101010, 0 35px 0 -5px #DCDCDC;
}
.box:nth-child(2) .line:first-child .inner {
  z-index: 1;
}
.box:nth-child(2) .line:first-child:before {
  z-index: 6;
}
.box:nth-child(2) .line:last-child {
  box-shadow: 0 -5px 0 -5px #101010, 0 -15px 0 -5px #DCDCDC;
}
.box:nth-child(2) .line:last-child .inner {
  z-index: 5;
}
.box:nth-child(2) .line:last-child:after {
  z-index: 6;
}
.box:nth-child(2) .line:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  background: currentColor;
  width: 50%;
  height: 100px;
  -webkit-animation: scaleY 1.25s ease-in-out infinite alternate;
          animation: scaleY 1.25s ease-in-out infinite alternate;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform: translateX(-50%) scaleY(1);
          transform: translateX(-50%) scaleY(1);
  border-radius: 2.8571428571px 0 0 2.8571428571px;
  visibility: visible;
  margin-top: 10px;
}
.box:nth-child(2) .line:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  background: currentColor;
  width: 50%;
  height: 100px;
  -webkit-animation: scaleY 1.25s ease-in-out infinite alternate;
          animation: scaleY 1.25s ease-in-out infinite alternate;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: translateX(-50%) scaleY(1);
          transform: translateX(-50%) scaleY(1);
  border-radius: 2.8571428571px 2.8571428571px 0 0;
  visibility: visible;
  margin-bottom: -10px;
}
.box:nth-child(2) .line:nth-child(1):before {
  -webkit-animation-delay: -1.25s;
          animation-delay: -1.25s;
}
.box:nth-child(2) .line:nth-child(1):after {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.box:nth-child(2) .line:nth-child(2):before {
  -webkit-animation-delay: -1.0576923077s;
          animation-delay: -1.0576923077s;
}
.box:nth-child(2) .line:nth-child(2):after {
  -webkit-animation-delay: -2.3076923077s;
          animation-delay: -2.3076923077s;
}
.box:nth-child(2) .line:nth-child(3):before {
  -webkit-animation-delay: -0.8653846154s;
          animation-delay: -0.8653846154s;
}
.box:nth-child(2) .line:nth-child(3):after {
  -webkit-animation-delay: -2.1153846154s;
          animation-delay: -2.1153846154s;
}
.box:nth-child(2) .line:nth-child(4):before {
  -webkit-animation-delay: -0.6730769231s;
          animation-delay: -0.6730769231s;
}
.box:nth-child(2) .line:nth-child(4):after {
  -webkit-animation-delay: -1.9230769231s;
          animation-delay: -1.9230769231s;
}
.box:nth-child(2) .line:nth-child(5):before {
  -webkit-animation-delay: -0.4807692308s;
          animation-delay: -0.4807692308s;
}
.box:nth-child(2) .line:nth-child(5):after {
  -webkit-animation-delay: -1.7307692308s;
          animation-delay: -1.7307692308s;
}
.box:nth-child(2) .line:nth-child(6):before {
  -webkit-animation-delay: -0.2884615385s;
          animation-delay: -0.2884615385s;
}
.box:nth-child(2) .line:nth-child(6):after {
  -webkit-animation-delay: -1.5384615385s;
          animation-delay: -1.5384615385s;
}
.box:nth-child(2) .line:nth-child(7):before {
  -webkit-animation-delay: -0.0961538462s;
          animation-delay: -0.0961538462s;
}
.box:nth-child(2) .line:nth-child(7):after {
  -webkit-animation-delay: -1.3461538462s;
          animation-delay: -1.3461538462s;
}
.box:nth-child(2) .line:nth-child(8):before {
  -webkit-animation-delay: 0.0961538462s;
          animation-delay: 0.0961538462s;
}
.box:nth-child(2) .line:nth-child(8):after {
  -webkit-animation-delay: -1.1538461538s;
          animation-delay: -1.1538461538s;
}
.box:nth-child(2) .line:nth-child(9):before {
  -webkit-animation-delay: 0.2884615385s;
          animation-delay: 0.2884615385s;
}
.box:nth-child(2) .line:nth-child(9):after {
  -webkit-animation-delay: -0.9615384615s;
          animation-delay: -0.9615384615s;
}
.box:nth-child(2) .line:nth-child(10):before {
  -webkit-animation-delay: 0.4807692308s;
          animation-delay: 0.4807692308s;
}
.box:nth-child(2) .line:nth-child(10):after {
  -webkit-animation-delay: -0.7692307692s;
          animation-delay: -0.7692307692s;
}
.box:nth-child(2) .line:nth-child(11):before {
  -webkit-animation-delay: 0.6730769231s;
          animation-delay: 0.6730769231s;
}
.box:nth-child(2) .line:nth-child(11):after {
  -webkit-animation-delay: -0.5769230769s;
          animation-delay: -0.5769230769s;
}
.box:nth-child(2) .line:nth-child(12):before {
  -webkit-animation-delay: 0.8653846154s;
          animation-delay: 0.8653846154s;
}
.box:nth-child(2) .line:nth-child(12):after {
  -webkit-animation-delay: -0.3846153846s;
          animation-delay: -0.3846153846s;
}
.box:nth-child(2) .line:nth-child(13):before {
  -webkit-animation-delay: 1.0576923077s;
          animation-delay: 1.0576923077s;
}
.box:nth-child(2) .line:nth-child(13):after {
  -webkit-animation-delay: -0.1923076923s;
          animation-delay: -0.1923076923s;
}

@-webkit-keyframes scaleX {
  from {
    -webkit-transform: translateY(-50%) scaleX(1);
            transform: translateY(-50%) scaleX(1);
  }
  to {
    -webkit-transform: translateY(-50%) scaleX(0);
            transform: translateY(-50%) scaleX(0);
  }
}

@keyframes scaleX {
  from {
    -webkit-transform: translateY(-50%) scaleX(1);
            transform: translateY(-50%) scaleX(1);
  }
  to {
    -webkit-transform: translateY(-50%) scaleX(0);
            transform: translateY(-50%) scaleX(0);
  }
}
@-webkit-keyframes scaleY {
  from {
    -webkit-transform: translateX(-50%) scaleY(1);
            transform: translateX(-50%) scaleY(1);
  }
  to {
    -webkit-transform: translateX(-50%) scaleY(0);
            transform: translateX(-50%) scaleY(0);
  }
}
@keyframes scaleY {
  from {
    -webkit-transform: translateX(-50%) scaleY(1);
            transform: translateX(-50%) scaleY(1);
  }
  to {
    -webkit-transform: translateX(-50%) scaleY(0);
            transform: translateX(-50%) scaleY(0);
  }
}