HTML
<div class="l-wrapper">
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="s--circle">
<circle r="10" cx="20" cy="20"></circle>
</symbol>
<g class="g-circles g-circles--v1">
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
</g>
</svg>
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="g-circles g-circles--v2">
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
</g>
</svg>
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="g-circles g-circles--v3">
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
</svg>
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="g-circles g-circles--v4">
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
<g class="g--circle">
<use xlink:href="#s--circle" class="u--circle"/>
</g>
</g>
</svg>
</div>
SCSS
$max: 12;
$angle: 360/$max;
$size: 120px;
$fill: dodgerblue;
BODY {
background:
linear-gradient(45deg,
rgba(255,255,255,0) 48%,
rgba(255,255,255,.05) 50%,
rgba(255,255,255,0) 52%),
linear-gradient(-45deg,
rgba(255,255,255,0) 48%,
rgba(255,255,255,.05) 50%,
rgba(255,255,255,0) 52%);
background-size: 1em 1em;
background-color: #253237;
}
.l-wrapper {
position: absolute;
width: $size*4;
height: $size*2.3;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
text-align: center;
}
svg {
height: $size;
width: $size;
margin: 0 2em 2em;
overflow: visible;
/* border: 1px solid red; */
}
.g-circles {
//transform: scale(.9) translate(7px, 7px);
}
@function transform($item: 1){
$base: rotate(#{-$angle*$item}deg) translate(5px, 5px);
@return $base;
}
.g--circle {
transform-origin: $size/2 $size/2;
fill: $fill;
animation: opacity 1.2s linear infinite;
@for $item from 1 through $max {
&:nth-child(#{$max}n + #{$item}){
animation-delay: -#{$item/10}s;
transform: transform($item) scale(.9);
}
}
}
.g-circles--v1 .g--circle {
fill-opacity: 0;
animation-name: opacity;
}
.g-circles--v2 .g--circle {
fill-opacity: 0;
stroke-opacity: 0;
stroke-width: 1;
stroke: yellowgreen;
animation-name: opacity-stroke, colors, colors-stroke;
.u--circle {
//transform: scale(.6) translate(10px,10px);
//transform-origin: 10px 10px;
animation: transform-2 1.2s linear infinite;
}
}
.g-circles--v2 .g--circle {
@for $item from 1 through $max {
&:nth-child(#{$max}n + #{$item}) .u--circle{
animation-delay: -#{$item/10}s;
}
}
}
.g-circles--v3 .g--circle {
fill-opacity: 1;
animation-name: opacity, colors;
}
.g-circles--v4 {
.g--circle {
fill-opacity: 1;
fill: orange;
animation-name: opacity, colors-3;
}
.u--circle {
animation: transform 1.2s linear infinite;
}
}
.g-circles--v4 .g--circle {
@for $item from 1 through $max {
&:nth-child(#{$max}n + #{$item}) .u--circle{
animation-delay: -#{$item/10}s;
}
}
}
@keyframes opacity {
3% {
fill-opacity: 1;
}
75% {
fill-opacity: 0;
}
}
@keyframes opacity-stroke {
10% {
stroke-opacity: 1;
}
85% {
stroke-opacity: 0;
}
}
@keyframes colors {
0% {
fill: yellowgreen;
}
10% {
fill: gold;
}
75% {
fill: crimson;
}
}
@keyframes colors-stroke {
0% {
stroke: yellowgreen;
}
10% {
stroke: gold;
}
75% {
stroke: crimson;
}
}
@keyframes colors-2 {
0% {
fill: yellow;
}
50% {
fill: red;
}
65% {
fill: orangered;
}
95% {
fill: gold;
}
}
@keyframes colors-3 {
0% {
fill: yellowgreen;
}
50% {
fill: turquoise;
}
65% {
fill: yellow;
}
95% {
fill: orange;
}
}
@keyframes transform {
10% {
transform-origin: 70px 70px;
transform: scale(.75);
}
}
@keyframes transform-2 {
40% {
transform: scale(.85) translate(10px,10px);
}
60% {
stroke-width: 20;
}
}
2 Responses