<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>recreating some weave-gif in pure CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pane">
<div class="box">
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
</div>
<div class="box">
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
<div class="line">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
/*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);
}
}