Circle Path

HTML

<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 400 400" enable-background="new 0 0 100 100" xml:space="preserve">
    <defs>
        <path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
    </defs>
    <circle cx="150" cy="100" r="75" fill="none"/>
    <g>
        <use xlink:href="#circlePath" fill="none"/>
        <text fill="#ffb605">
            <textPath xlink:href="#circlePath"> • Fara and Bund • Fara and Bund • </textPath>
        </text>
    </g>
</svg>
</div>

CSS

#container { margin: 0%; margin-top: 0px; margin-bottom: 0px;}

#circle { position: relative; width: 500px; padding-bottom: 0%; overflow: visible; z-index: 2; }

#circle text { 
    margin: 0 calc(.14em * -1) 0 0;
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    font-size: .83em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: black;
    background: linear-gradient(-67deg,#000000 0%,#988d87 28%,#797371 52%,#5e5855 82%,#000000 100%);
    background-size: 100% auto;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    letter-spacing: .32em;
}

#circle svg { position: absolute; left: 140px; top: -110px;  width: 100%; height: 430px;

  -webkit-animation-name: rotate;
     -moz-animation-name: rotate;
      -ms-animation-name: rotate;
       -o-animation-name: rotate;
          animation-name: rotate;
  -webkit-animation-duration: 10s;
     -moz-animation-duration: 10s;
      -ms-animation-duration: 10s;
       -o-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
       -o-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
       -o-animation-timing-function: linear;
          animation-timing-function: linear;

}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0); }
    to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotate {
    from { -moz-transform: rotate(0); }
    to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotate {
    from { -ms-transform: rotate(0); }
    to { -ms-transform: rotate(360deg); }
}
@-o-keyframes rotate {
    from {...