<svg
        xmlns='http://www.w3.org/2000/svg'
        xmlns:svg='http://www.w3.org/2000/svg'
        xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'
        xmlns:cc='http://creativecommons.org/ns#'
        xmlns:dc='http://purl.org/dc/elements/1.1/'
        xmlns:gpa='https://www.gtk.org/grappa'
        gpa:version='1'
        gpa:state-names='play pause'
        gpa:state='pause'
        viewBox='0 0 16 16'
        width='16'
        height='16'>
  <metadata>
    <rdf:RDF>
      <cc:Work>
        <dc:subject>
          <rdf:Bag>
            <rdf:li>animation overlap</rdf:li>
          </rdf:Bag>
        </dc:subject>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <circle
          id='path0'
          fill='none'
          stroke='url(#gpa:foreground) rgb(0,0,0)'
          stroke-opacity='0.2'
          stroke-width='2'
          stroke-linecap='round'
          stroke-linejoin='round'
          cx='8'
          cy='8'
          r='7'
          class='transparent-fill foreground-stroke'
          gpa:states='0'
          gpa:stroke='foreground'
          gpa:transition-type='fade'
          gpa:transition-duration='500ms'>
  </circle>
  <circle
          id='path1'
          fill='none'
          stroke='url(#gpa:foreground) rgb(0,0,0)'
          stroke-width='2'
          stroke-linecap='round'
          stroke-linejoin='round'
          cx='8'
          cy='8'
          r='7'
          class='transparent-fill foreground-stroke'
          gpa:states='0'
          gpa:stroke='foreground'
          gpa:transition-type='fade'
          gpa:transition-duration='500ms'
          gpa:animation-type='automatic'
          gpa:animation-direction='segment'
          gpa:animation-duration='2000ms'>
  </circle>
</svg>