HTML
<div class="wrapper">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<svg>
<defs>
<filter id="filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="18" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 28 -10" result="filter" />
<feComposite in="SourceGraphic" in2="filter" operator="atop" />
</filter>
</defs>
</svg>
SCSS
$radius: 60px;
body {
background: #3c2b44;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: url('#filter');
}
.ball {
width: $radius;
height: $radius;
position: absolute;
top: calc(50% - #{$radius/2});
left: calc(50% - #{$radius/2});
&:before {
background: #2ecc71;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
}
&:nth-child(1) {
transform: translate(-$radius*1.1);
animation: x-axis-lateral 2s infinite alternate ease-in-out;
&:before {
animation: y-axis-lateral 1s infinite 0.1s alternate ease-in-out;
}
}
&:nth-child(2) {
animation: x-axis 2s infinite alternate ease-in-out;
&:before {
animation: y-axis 1s infinite .5s alternate ease-in-out;
}
}
&:nth-child(3) {
transform: translate($radius*1.1, $radius*1.3);
animation: x-axis-lateral 2s infinite alternate ease;
&:before {
animation: y-axis-lateral 1s infinite .4s alternate ease-in-out;
}
}
}
@keyframes x-axis {
0% {
transform: translate(-$radius*1.6);
}
100% {
transform: translate($radius*1.6);
}
}
@keyframes y-axis {
0% {
transform: translateY($radius*0.7);
}
100% {
transform: translateY(-$radius*1.1) scale(.8);
background: #2ecc71;
}
}
@keyframes x-axis-lateral {
0% {
transform: translate(-$radius*.6);
}
100% {
transform: translate($radius*.6);
}
}
@keyframes y-axis-lateral {
0% {
transform: translateY($radius/5);
}
100% {
transform: translateY(-$radius);
background: #2ecc71;
}
}
