SCSS
$mix-blend-mode : screen;
@keyframes box {
0%, 100% {
border-radius: 0% 33% 66% 100%;
}
16.66667% {
border-radius: 33% 66% 100% 66%;
}
33.33333% {
border-radius: 66% 100% 66% 33%;
}
50% {
border-radius: 100% 66% 33% 0%;
}
66.66667% {
border-radius: 66% 33% 0% 33%;
}
83.33333% {
border-radius: 33% 0% 33% 66%;
}
}
body {
background: #333;
}
.box {
animation: box 2s linear forwards infinite;
background-color: tomato;
height: 75vh;
margin: 12.5vh auto;
position: relative;
width: 50vw;
&:before, &:after {
animation: box 2s linear forwards infinite;
content: '';
display: block;
height: inherit;
left: 0;
mix-blend-mode: $mix-blend-mode;
opacity: 0.5;
position: absolute;
top: 0;
width: inherit;
z-index: 10;
}
&:before {
animation-delay: 0.66667s;
background-color: red;
}
&:after {
animation-delay: 1.333333s;
background-color: yellow;
}
}
