console
<div class='wrap'>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
<div class='segment'></div>
</div>
$g: #00782b;
$y: #ffffa2;
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: radial-gradient(circle at center, rgba(255,255,255,0.5), #fff 1px, transparent 2px, transparent 20px), linear-gradient(to right, #3494e6, #ec6ead);
background-size:60px 65px, 100%;
.wrap {
position: relative;
width: 700px;
height: 700px;
.segment {
position: absolute;
width: 30px;
height: 30px;
background: linear-gradient(
to right,
lighten($g, 30%),
$g,
lighten($g, 30%)
);
border-radius: 100%;
box-shadow: 4px -2px 0px #000, 4px 2px 0px #000;
offset-path: path(
"M 550 550 C 100 600 150 500 100 400 C 0 150 100 200 300 150 C 450 100 700 100 600 200 C 350 400 750 500 550 550 "
);
animation: follow 5s linear infinite;
@keyframes follow {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
@for $i from 1 through 140 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i/-40}s;
width: calc(5px + #{$i}px);
height: calc(5px + #{$i}px);
}
}
@for $i from 50 through 140 {
&:nth-of-type(#{$i}) {
width: 55px;
height: 55px;
z-index: 999;
}
&:nth-of-type(6n){
background:darken($g, 5%);
}
&:last-of-type {
&:before {
content: "";
position: absolute;
width: 175px;
height: 175px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/oprah.svg");
background-size: cover;
left: -15px;
top: -55px;
transform: rotate(90deg);
z-index:2;
box-shadow:none;
}
&:after{
content:'';
position:absolute;
width:120px;
height:90px;
background:$y;
background:radial-gradient(circle at right center, lighten($g, 10%) -30%, $y);
left:20px;
border-radius:100%;
top:50%;
transform:translateY(-50%);
}
}
}
}
}
}