1. Search for the 'Layer_1' id inside your HTML file.
2. Replace the code inside it with these lines of code:
<circle cx="300" cy="300" r="150" class="polygon" fill="#FFFFFF" class="inner" stroke="#A7A9AC" stroke-width="8" /> <circle cx="300" cy="300" r="110" fill="#8856A3" class="inner" />
3. You should have something similar to this screenshot.
4. At the end of your CSS code, add these lines of css:
.polygon { stroke-dasharray: 942; stroke-dashoffset: 942; -webkit-animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate; -moz-animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate; -ms-animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate; -o-animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate; animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate; } @-webkit-keyframes draw-circle { 0 {stroke-dashoffset: 0;} 100% {stroke-dashoffset: -942;} } @-moz-keyframes draw-circle { 0 {stroke-dashoffset: 0;} 100% {stroke-dashoffset: -942;} } @-ms-keyframes draw-circle { 0 {stroke-dashoffset: 0;} 100% {stroke-dashoffset: -942;} } @-o-keyframes draw-circle { 0 {stroke-dashoffset: 0;} 100% {stroke-dashoffset: -942;} } @keyframes draw-circle { 0 {stroke-dashoffset: 0;} 100% {stroke-dashoffset: -942;} }