<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" color="#FF495F" onclick="vivus.reset().play()">
    <path fill="none" stroke="currentColor" d="M10,100A90,90 0,1,1 190,100A90,90 0,1,1 10,100"></path>
    <path fill="none" stroke="currentColor"
        d="M14.260000000000005,100A85.74,85.74 0,1,1 185.74,100A85.74,85.74 0,1,1 14.260000000000005,100"></path>
    <path fill="none" stroke="currentColor"
        d="M27.052999999999997,100A72.947,72.947 0,1,1 172.947,100A72.947,72.947 0,1,1 27.052999999999997,100"></path>
    <path fill="none" stroke="currentColor" d="M60.26,100A39.74,39.74 0,1,1 139.74,100A39.74,39.74 0,1,1 60.26,100"></path>
    <path fill="none" stroke="currentColor" d="M34.042,131.189L67.047,77.781"></path>
    <path fill="none" stroke="currentColor" d="M31.306,75.416L92.41,60.987"></path>
    <path fill="none" stroke="currentColor" d="M68.81,34.042L122.219,67.046"></path>
    <path fill="none" stroke="currentColor" d="M124.584,31.305L139.013,92.409"></path>
    <path fill="none" stroke="currentColor" d="M165.957,68.809L132.953,122.219"></path>
    <path fill="none" stroke="currentColor" d="M168.693,124.584L107.59,139.012"></path>
    <path fill="none" stroke="currentColor" d="M131.19,165.957L77.781,132.953"></path>
    <path fill="none" stroke="currentColor" d="M75.417,168.693L60.987,107.59"></path>
</svg>
var vivus = new Vivus("mySvg", { duration: 200 }, function () {
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js