<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
<div class="line-4"></div>
<div class="line-5"></div>
<div class="line-6"></div>
<div class="line-7"></div>
<div class="line-8"></div>
<div class="line-9"></div>
<div class="line-10"></div>
.line-1 {
width:50px;
height:50px;
display: grid;
color: #046D8B;
}
.line-1:before,
.line-1:after {
content: "";
grid-area: 1/1;
--c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
--c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
background:
var(--c1),
var(--c2),
var(--c1),
var(--c2);
background-size:300% 4px,4px 300%;
background-repeat: no-repeat;
animation: l1 1s infinite linear;
}
.line-1:after {
margin: 10px;
transform: scaleX(-1);
animation-delay: -.25s;
}
@keyframes l1 {
0% {background-position: 50% 0,100% 100%,0 100%,0 0}
25% {background-position: 0 0,100% 50% ,0 100%,0 0}
50% {background-position: 0 0,100% 0 ,50% 100%,0 0}
75% {background-position: 0 0,100% 0 ,100% 100%,0 50%}
75.01%{background-position: 100% 0,100% 0 ,100% 100%,0 50%}
100% {background-position: 50% 0,100% 0 ,100% 100%,0 100%}
}
.line-2 {
width:50px;
height:50px;
display: grid;
color: #046D8B;
}
.line-2:before,
.line-2:after {
content: "";
grid-area: 1/1;
margin: 0 0 15px 15px;
--c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
--c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
background:
var(--c1),
var(--c2),
var(--c1),
var(--c2);
background-size:300% 4px,4px 300%;
background-repeat: no-repeat;
animation: l2 1s infinite linear;
}
.line-2:after {
margin: 15px 15px 0 0;
transform: scale(-1,-1);
}
@keyframes l2 {
0% {background-position: 50% 0,100% 100%,0 100%,0 0}
25% {background-position: 0 0,100% 50% ,0 100%,0 0}
50% {background-position: 0 0,100% 0 ,50% 100%,0 0}
75% {background-position: 0 0,100% 0 ,100% 100%,0 50%}
75.01%{background-position: 100% 0,100% 0 ,100% 100%,0 50%}
100% {background-position: 50% 0,100% 0 ,100% 100%,0 100%}
}
.line-3 {
width: 80px;
height: 40px;
display: flex;
color: #046D8B;
}
.line-3:before,
.line-3:after {
content: "";
margin:0 -2px 0 0;
flex: 1;
--c: linear-gradient(currentColor 0 0);
background: var(--c), var(--c), var(--c), var(--c);
background-repeat: no-repeat;
animation: l3-1 1s infinite linear, l3-2 1s infinite linear;
}
.line-3:after {
transform: scale(-1);
margin:0 0 0 -2px;
}
@keyframes l3-1 {
0%,
3% {background-size: 0 4px,4px 0 ,0 4px,4px 0 }
12.5%{background-size: 50% 4px,4px 0 ,0 4px,4px 0 }
25% {background-size: 50% 4px,4px 50%,0 4px,4px 0 }
37.5%{background-size: 50% 4px,4px 50%,50% 4px,4px 0 }
46%,
54% {background-size: 50% 4px,4px 50%,50% 4px,4px 50%}
62.5%{background-size: 0 4px,4px 50%,50% 4px,4px 50%}
75% {background-size: 0 4px,4px 0 ,50% 4px,4px 50%}
87.5%{background-size: 0 4px,4px 0 ,0 4px,4px 50%}
96%,
100% {background-size: 0 4px,4px 0 ,0 4px,4px 0 }
}
@keyframes l3-2 {
0%,49.9%{background-position:0 20px,50% 20px,20px 100%,100% 100%}
50%,100%{background-position:right 20px top 20px,50% 100%,100% 100%,100% 20px}
}
.line-4 {
width: 60px;
height: 30px;
display: grid;
color: #046D8B;
}
.line-4:before,
.line-4:after {
content: "";
grid-area: 1/1;
--c: linear-gradient(currentColor 0 0);
background: var(--c), var(--c), var(--c);
background-repeat: no-repeat;
animation: l4-1 1s infinite linear, l4-2 1s infinite linear;
}
.line-4:after {
transform: scale(-1);
}
@keyframes l4-1 {
0%,
3% {background-size: 0 4px,4px 0 ,0 4px}
16.67%{background-size: calc(50% - 6px) 4px,4px 0 ,0 4px}
33.33%{background-size: calc(50% - 6px) 4px,4px 14px,0 4px}
46%,
54% {background-size: calc(50% - 6px) 4px,4px 14px,calc(50% + 6px) 4px}
66.67%{background-size: 0 4px,4px 14px,calc(50% + 6px) 4px}
83.33%{background-size: 0 4px,4px 0 ,calc(50% + 6px) 4px}
96%,
100% {background-size: 0 4px,4px 0 ,0 4px}
}
@keyframes l4-2 {
0%,49.9%{background-position:0 50%,left calc(50% - 6px) bottom 13px,left 24px top 3px}
50%,100%{background-position:right 36px top 50%,left calc(50% - 6px) top 3px,right 0 top 3px}
}
.line-5 {
width:60px;
height:20px;
display: grid;
color: #046D8B;
}
.line-5:before,
.line-5:after {
content: "";
grid-area: 1/1;
--c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
--c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
background:
var(--c1),
var(--c2),
var(--c1),
var(--c2);
background-size:300% 4px,4px 300%;
background-repeat: no-repeat;
animation: l5 1.5s infinite;
}
.line-5:after {
animation-delay: -.75s;
}
@keyframes l5 {
0% {background-position: 50% 0,100% 100%,0 100%,0 0}
25% {background-position: 0 0,100% 50% ,0 100%,0 0}
50% {background-position: 0 0,100% 0 ,50% 100%,0 0}
75% {background-position: 0 0,100% 0 ,100% 100%,0 50%}
75.01%{background-position: 100% 0,100% 0 ,100% 100%,0 50%}
100% {background-position: 50% 0,100% 0 ,100% 100%,0 100%}
}
.line-6 {
width:60px;
height:16px;
display: grid;
color: #046D8B;
}
.line-6:before,
.line-6:after {
content: "";
grid-area: 1/1;
--c: linear-gradient(currentColor 0 0);
background: var(--c), var(--c), var(--c);
background-repeat: no-repeat;
animation: l6-1 1.5s infinite linear, l6-2 1.5s infinite linear;
transform: scale(var(--s,1)) translate(3px,-3px);
}
.line-6:after {
--s:-1;
}
@keyframes l6-1 {
0%,
3% {background-size: 0 4px,4px 0 ,0 4px}
16.67%{background-size: 100% 4px,4px 0 ,0 4px}
33.33%{background-size: 100% 4px,4px 100%,0 4px}
46%,
54% {background-size: 100% 4px,4px 100%,100% 4px}
66.67%{background-size: 0 4px,4px 100%,100% 4px}
83.33%{background-size: 0 4px,4px 0 ,100% 4px}
96%,
100% {background-size: 0 4px,4px 0 ,0 4px}
}
@keyframes l6-2 {
0%,49.9%{background-position: 0 0,100% 0 ,100% 100%}
50%,100%{background-position: 100% 0,100% 100%,0 100%}
}
.line-7 {
width:50px;
height:50px;
display: flex;
color: #046D8B;
}
.line-7:before,
.line-7:after {
content: "";
flex: 1;
margin:0 0 0 -2px;
--c: linear-gradient(currentColor 0 0);
background:
var(--c) 0 0,
var(--c) 100% 0,
var(--c) 100% 100%,
var(--c) 0 100%,
var(--c) 0 50%;
background-repeat: no-repeat;
animation: l7 1s infinite alternate;
}
.line-7:before {
transform: scale(-1);
margin:0 -2px 0 0;
}
@keyframes l7 {
0%,
5% {background-size: 0 4px,4px 0 ,0 4px,4px 0 ,0 4px}
20% {background-size: 100% 4px,4px 0 ,0 4px,4px 0 ,0 4px}
40% {background-size: 100% 4px,4px 100%,0 4px,4px 0 ,0 4px}
60% {background-size: 100% 4px,4px 100%,100% 4px,4px 0 ,0 4px}
80% {background-size: 100% 4px,4px 100%,100% 4px,4px 50% ,0 4px}
95%,
100% {background-size: 100% 4px,4px 100%,100% 4px,4px 50% ,100% 4px}
}
.line-8 {
width:60px;
height:60px;
padding:10px;
display: grid;
color: #046D8B;
}
.line-8,
.line-8:before,
.line-8:after {
--c: linear-gradient(currentColor 0 0);
background:var(--c), var(--c), var(--c), var(--c);
background-repeat: no-repeat;
animation: l8-1 1.5s infinite cubic-bezier(0,0,1,1), l8-2 1.5s infinite;
}
.line-8:before,
.line-8:after {
content: "";
grid-area: 1/1;
animation-timing-function: cubic-bezier(0,0.2,1,1),linear;
}
.line-8:after {
margin: 10px;
animation-timing-function: cubic-bezier(0,0.4,1,1),linear;
}
@keyframes l8-1 {
0%,
10% {background-size: 0 4px,4px 0 }
40%,
60% {background-size: 100% 4px,4px 100%}
90%,
100% {background-size: 0 4px,4px 0 }
}
@keyframes l8-2 {
0%,49.9%{background-position: 0 0,0 0,100% 100%,100% 100%}
50%,100%{background-position: 100% 0,0 100%,0 100%,100% 0}
}
.line-9 {
width:30px;
height:30px;
display: grid;
color: #046D8B;
}
.line-9,
.line-9:before,
.line-9:after {
--c: linear-gradient(currentColor 0 0);
background:var(--c), var(--c), var(--c), var(--c);
background-repeat: no-repeat;
animation: l9-1 1.5s infinite, l9-2 1.5s infinite;
}
.line-9:before,
.line-9:after {
content: "";
grid-area: 1/1;
transform: translate(calc(50% - 2px),calc(2px - 50%)) rotate(90deg);
animation-delay: -.25s;
}
.line-9:after {
transform: translate(calc(2px - 50%),calc(50% - 2px)) rotate(90deg);
}
@keyframes l9-1 {
0%,
10% {background-size: 0 4px,4px 0 }
40%,
60% {background-size: 100% 4px,4px 100%}
90%,
100% {background-size: 0 4px,4px 0 }
}
@keyframes l9-2 {
0%,49.9%{background-position: 0 0,0 0,100% 100%,100% 100%}
50%,100%{background-position: 100% 0,0 100%,0 100%,100% 0}
}
.line-10 {
width:25px;
height:25px;
display: grid;
color: #046D8B;
}
.line-10,
.line-10:before,
.line-10:after {
--c: linear-gradient(currentColor 0 0);
background:var(--c), var(--c), var(--c), var(--c);
background-repeat: no-repeat;
animation: l10-1 1.5s infinite linear, l10-2 1.5s infinite linear;
}
.line-10:before,
.line-10:after {
content: "";
grid-area: 1/1;
transform: translate(calc(100% - 4px),calc(4px - 100%)) rotate(90deg);
}
.line-10:after {
transform: translate(calc(4px - 100%),calc(100% - 4px)) rotate(-90deg);
}
@keyframes l10-1 {
0% {background-size: 0 4px,4px 0 ,0 4px,4px 0 }
12.5%{background-size: 100% 4px,4px 0 ,0 4px,4px 0 }
25% {background-size: 100% 4px,4px 100%,0 4px,4px 0 }
37.5%{background-size: 100% 4px,4px 100%,100% 4px,4px 0 }
43%,
57% {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
62.5%{background-size: 0 4px,4px 100%,100% 4px,4px 100%}
75% {background-size: 0 4px,4px 0 ,100% 4px,4px 100%}
87.5%{background-size: 0 4px,4px 0 ,0 4px,4px 100%}
100% {background-size: 0 4px,4px 0 ,0 4px,4px 0 }
}
@keyframes l10-2 {
0%,49.9%{background-position: 0 0 ,100% 0 ,100% 100%,0 100%}
50%,100%{background-position: 100% 0,100% 100%,0 100%,0 0 }
}
/**/
body {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-auto-rows: 130px;
place-items:center;
}
* {
box-sizing: border-box;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.