<div class="shapes-1"></div>
<div class="shapes-2"></div>
<div class="shapes-3"></div>
<div class="shapes-4"></div>
<div class="shapes-5"></div>
<div class="shapes-6"></div>
<div class="shapes-7"></div>
<div class="shapes-8"></div>
<div class="shapes-9"></div>
<div class="shapes-10"></div>
.shapes-1 {
--c:linear-gradient(orange 0 0);
background:
var(--c) 0 0,
var(--c) 0 50%,
var(--c) 0 100%,
var(--c) 50% 0,
var(--c) 50% 50%,
var(--c) 50% 100%,
var(--c) 100% 0,
var(--c) 100% 50%,
var(--c) 100% 100%;
background-size: 16px 16px;
background-repeat: no-repeat;
animation: sh1 .5s infinite alternate;
}
@keyframes sh1 {
0%,20% {width:45px;height: 45px}
90%,100%{width:65px;height: 65px}
}
.shapes-2 {
--c:linear-gradient(orange 0 0);
background:
var(--c),
var(--c),
var(--c),
var(--c),
var(--c),
var(--c),
var(--c),
var(--c),
var(--c);
background-size: 16px 16px;
background-repeat: no-repeat;
animation:
sh2-1 1s infinite,
sh2-2 1s infinite;
}
@keyframes sh2-1 {
0%,100% {width:45px;height: 45px}
35%,65% {width:65px;height: 65px}
}
@keyframes sh2-2 {
0%,40% {background-position: 0 0,0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0, 50% 50% }
60%,100%{background-position: 0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,0 0, 50% 50% }
}
.shapes-3 {
height: 45px;
--c:linear-gradient(#514b82 0 0);
background:
var(--c) left,
var(--c) center,
var(--c) right;
background-size: 16px 100%;
background-repeat: no-repeat;
animation:
sh3-1 1.5s infinite,
sh3-2 1.5s infinite;
}
@keyframes sh3-1 {
0%,100% {width:45px}
35%,65% {width:65px}
}
@keyframes sh3-2 {
0%,40% {transform: rotate(0) }
60%,100%{transform: rotate(90deg) }
}
.shapes-4 {
height: 60px;
width: 60px;
--c:linear-gradient(#514b82 0 0);
background:
var(--c),var(--c),
var(--c),var(--c),
var(--c),var(--c);
background-repeat: no-repeat;
animation:
sh4-1 2s infinite alternate,
sh4-2 2s infinite alternate;
}
@keyframes sh4-1 {
0%,20% {background-size:20px 20px}
40%,60% {background-size:100% 20px}
80%,100% {background-size:20px 20px}
}
@keyframes sh4-2 {
0%,40% {background-position: 0 0,100% 0, 50% 50%, 50% 50%, 0 100%,100% 100%}
60%,100%{background-position: 50% 0,50% 0, 0 50%,100% 50%, 50% 100%,50% 100%}
}
.shapes-5 {
width:50px;
height: 50px;
display: grid;
}
.shapes-5:before,
.shapes-5:after {
content: "";
grid-area: 1/1;
border-radius: 50%;
background: #f03355;
-webkit-mask:repeating-linear-gradient(#000 0 5px,#0000 0 10px);
animation: sh5 1.5s infinite;
}
.shapes-5:after {
-webkit-mask:repeating-linear-gradient(#0000 0 5px,#000 0 10px);
--s:-1;
}
@keyframes sh5 {
0%,
10% {transform: translate(0) rotate(0)}
35% {transform: translate(calc(var(--s,1)*50%)) rotate(0)}
66% {transform: translate(calc(var(--s,1)*50%)) rotate(calc(var(--s,1)*180deg))}
90%,
100% {transform: translate(0) rotate(calc(var(--s,1)*180deg))}
}
.shapes-6 {
width:50px;
height: 50px;
display: grid;
}
.shapes-6:before,
.shapes-6:after {
content: "";
grid-area: 1/1;
border-radius: 50%;
background: #f03355;
-webkit-mask:repeating-linear-gradient(#000 0 10px,#0000 0 20px);
}
.shapes-6:after {
-webkit-mask:repeating-linear-gradient(#0000 0 10px,#000 0 20px);
animation: sh6 1.5s infinite;
}
@keyframes sh6 {
0%,
10% {transform: rotate(0) translate(0)}
35% {transform: rotate(0) translate(100%)}
66% {transform: rotate(180deg) translate(100%)}
90%,
100% {transform: rotate(180deg) translate(0) }
}
.shapes-7 {
width:60px;
aspect-ratio: 1.154;
color: #25b09b;
--c1:conic-gradient(from 149deg at top ,#0000 ,currentColor 2deg 59deg,#0000 61deg);
--c2:conic-gradient(from -31deg at bottom,#0000 ,currentColor 1deg 61deg,#0000 63deg);
background:
var(--c1) top,
var(--c1) bottom right,
var(--c2) bottom,
var(--c1) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
animation: sh7 1s infinite;
}
@keyframes sh7 {
80%,100%{background-position: bottom right,bottom left,bottom,top}
}
.shapes-8 {
width: 60px;
aspect-ratio: 1.154;
color:#25b09b;
display: grid;
animation: sp8-0 6s infinite linear;
}
.shapes-8:before,
.shapes-8:after {
content: "";
grid-area: 1/1;
}
.shapes-8:before {
clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
background: conic-gradient(from -30deg,#0000 60deg,currentColor 0);
}
.shapes-8:after {
background: conic-gradient(from -30deg,currentColor 60deg,#0000 0);
animation: sp8 0.5s infinite alternate;
}
@keyframes sp8-0 {
0%,16.66% {transform: rotate(0deg)}
16.67%,33.33% {transform: rotate(60deg)}
33.34%,50% {transform: rotate(120deg)}
50.1%,66.66% {transform: rotate(180deg)}
66.67%,83.33% {transform: rotate(240deg)}
83.34%,100% {transform: rotate(300deg)}
}
@keyframes sp8 {
100% {transform: translateY(-20px)}
}
.shapes-9 {
width:50px;
height: 50px;
color: #398EB6;
background: currentColor;
border-radius: 50%;
position: relative;
}
.shapes-9:before {
content: "";
position: absolute;
background:
radial-gradient(farthest-side at bottom right,#0000 94%,currentColor 96%) 0 0 ,
radial-gradient(farthest-side at bottom left ,#0000 94%,currentColor 96%) 100% 0 ,
radial-gradient(farthest-side at top left ,#0000 94%,currentColor 96%) 100% 100%,
radial-gradient(farthest-side at top right,#0000 94%,currentColor 96%) 0 100%;
background-size: 25px 25px;
background-repeat: no-repeat;
animation:
sh9-1 1s infinite,
sh9-2 1s infinite;
}
@keyframes sh9-1 {
0%,10%,90%,100% {inset:0}
40%,60% {inset:-10px}
}
@keyframes sh9-2 {
0%,40% {transform: rotate(0)}
60%,100%{transform: rotate(90deg)}
}
.shapes-10 {
width:50px;
height: 50px;
color: #398EB6;
position: relative;
animation: sh10 .5s infinite alternate;
}
.shapes-10:before,
.shapes-10:after {
content: "";
position: absolute;
inset:0;
background-size: 25px 25px;
background-position: 0 0,100% 0,100% 100%,0 100%;
background-repeat: no-repeat;
}
.shapes-10:before {
background-image:
radial-gradient(farthest-side at top left ,currentColor 96%,#0000),
radial-gradient(farthest-side at top right,currentColor 96%,#0000),
radial-gradient(farthest-side at bottom right,currentColor 96%,#0000),
radial-gradient(farthest-side at bottom left ,currentColor 96%,#0000);
animation: sh10-1 1s infinite;
}
.shapes-10:after {
background-image:
radial-gradient(farthest-side at top left ,#0000 94%,currentColor 96%),
radial-gradient(farthest-side at top right,#0000 94%,currentColor 96%),
radial-gradient(farthest-side at bottom right,#0000 94%,currentColor 96%),
radial-gradient(farthest-side at bottom left ,#0000 94%,currentColor 96%);
animation: sh10-2 1s infinite;
}
@keyframes sh10-1 {
0%,10%,90%,100% {inset:0}
40%,60% {inset:-10px}
}
@keyframes sh10-2 {
0%,40% {transform: rotate(0)}
60%,100%{transform: rotate(90deg)}
}
/**/
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.