rotating circle text

<!-- full example here: https://codepen.io/tubbox/pen/eYREvVv -->
<style>
#container { margin: 0%; }

#circle { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden;
transform:scale(1.35,1.35);
text-shadow:1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; }

#circle text { font-family: 'Helvetica Neue', Arial; font-size: 6.9px; }

#circle svg { position: absolute; left: 0; top: 0; width: 100%; height: 540px;

animation-name: rotate;

animation-duration: 20s;

animation-iteration-count: infinite;

animation-timing-function: linear;

}
@keyframes rotate {
from { transform: rotate(360deg); }
to { transform: rotate(0); }
}
</style>
<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="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<path id="circlePath" d=" M 150, 150 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="#fff">
<textPath xlink:href="#circlePath">this is not to say that horror is itself a form of religion; rather, horror emerges from the same well of human imagination...</textPath>
</text>
</g>
</svg>
</div>
</div>