Text Circle

by Kai Carver

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="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 -120, 0 a 120,120 0 0,1 240,0 a 120,120 0 0,1 -240,0 "/>
    </defs>
    <circle cx="150" cy="150" r="150" fill="#000"/>
    <g>
        <use xlink:href="#circlePath" fill="none"/>
        <text fill="#fff">
            <textPath xlink:href="#circlePath">“Everything becomes and recurs eternally.” -- <tspan class="author">Friedrich Nietzsche</tspan>   &nbsp;&nbsp;<tspan class="tech">(SVG rotation around a circle)</tspan></textPath>
        </text>
    </g>
</svg>
</div>
</div>

CSS

#container { margin: 5%; }
#circle { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; }
#circle text { font-family: 'Helvetica Neue', Arial; font-size: 16px; font-weight: bold; }
#circle svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
    from { transform: rotate(-360deg); }
    to { transform: rotate(0); }
}
.author { font-style: italic; }
.tech { fill: gray; }