<svg class='example' viewBox='0 0 100 100'>
    <circle class='line' cx='50' cy='50' r='30' fill='none' stroke='#504136' stroke-width='20'/>
    <circle cx='50' cy='50' r='10' fill='#689689' stroke='none'/>
    <circle cx='50' cy='50' r='5' fill='#B2E6D4' stroke='none'/>
</svg>

body {
    background: #A49E8D;
}

.example {
    display: block;
    height: 10rem;
    width: 10rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@keyframes transform-line {
    0% {
        stroke-dasharray: 11 53 0 0 13 0 0 31 17 19 29 41;
    }
    33% {
        stroke-dasharray: 11 23 7 27 0 13 31 0 17 19 29 41;
    }
    66% {
        stroke-dasharray: 11 53 7 0 13 0 31 0 17 19 29 41;
    }
    100% {
        stroke-dasharray: 11 53 0 0 13 0 0 31 17 19 29 41;
    }
}

@keyframes rotate-line {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(720deg);
    }
}

.example > .line {
    animation:
        transform-line 5s linear infinite,
        rotate-line 5s linear infinite;
    transform-origin: 50% 50%;
}