HTML
<div class='squares'>
<div class='square'>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
</div>
<div class='square'>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
</div>
<div class='square'>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
</div>
<div class='square'>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
<div class='snake'></div>
</div>
</div>
SCSS
/*variables*/
$snakeColor: #0096ff;
$snakeSpeed: 5.5s;
$snake-d: 25px;
$square-width: 150px;
$squares-full: #{$square-width*2 + $square-width/3};
*{padding: 0;margin: 0;box-sizing: border-box;}
html,body{
width: 100%;height: 100%;
}
body{
background-color: #140032;
overflow: hidden;
}
.squares{
width: #{$squares-full}; height: #{$squares-full};
transform-origin: center;
transform: rotate(45deg);
animation: squareAnimation 8s linear infinite;
position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
.square{
width: $square-width;height: $square-width;
position: absolute;
&:nth-child(2){
left: #{$square-width + $square-width/3};
transform: scale(-1,1);
}
&:nth-child(3){
top: #{$square-width + $square-width/3};
transform: scale(-1,1);
}
&:nth-child(4){
left: #{$square-width + $square-width/3};
top: #{$square-width + $square-width/3};
}
.snake{
position: absolute;
top: 0;
width: $snake-d;height: $snake-d;
border-radius: 50%;
background-color: $snakeColor;
transform: translate(-#{$snake-d/2},-#{$snake-d/2}) scale(0);
animation: SnakeAnimation $snakeSpeed linear infinite;
@for $i from 1 through 18{
&:nth-child(#{$i}){
animation-delay: -#{$i*$snakeSpeed/18};
}
}
}
}
}
@keyframes SnakeAnimation{
25%{
transform: translate(#{$square-width - $snake-d/2},-$snake-d/2) scale(1);
}
50%{
transform: translate(#{$square-width - $snake-d/2},#{$square-width - $snake-d/2}) scale(0);
}
75%{
transform: translate(-#{$snake-d/2},#{$square-width - $snake-d/2}) scale(1);
}
}
@keyframes squareAnimation{
100%{
transform: rotate(405deg);
}
}
