HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<circle class="st0" cx="500" cy="500" r="302.8">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 500 500"
to="360 500 500"
dur="100s"
repeatCount="indefinite"/>
</circle>
<circle class="st1" cx="500" cy="500" r="237.7">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 500 500"
to="360 500 500"
dur="40s"
repeatCount="indefinite"/>
</circle>
<circle class="st2" cx="500" cy="500" r="366.8" transform="rotate(0 500 500)";>
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 500 500"
to="-360 500 500"
dur="50s"
repeatCount="indefinite"/>
</circle>
<circle class="st3" cx="500" cy="500" r="385.1"/>
</svg>
SASS
body
background-color: #232323
svg
height: 95vh
width: 95vw
.st0, .st1, .st2, .st3
fill: none
stroke: #00C196
stroke-width: 42
stroke-miterlimit: 10
.st0
stroke-dasharray: 12.1947,12.1947,12.1947,12.1947,12.1947,12.1947
.st1
stroke-dasharray: 50,90,200,30,40,0
.st2
stroke-linecap: square
stroke-dasharray: 120, 20, 110, 20, 140
.st3
stroke-width: 16
stroke-linecap: square
