<head>
<style class="cp-pen-styles">#container {
margin: 0%;
}
#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: 200px;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-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;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
</style>
<style>
body {
#background-color: #333;
font-family: 'Luckiest Guy', cursive;
font-size: 35px;
}
path {
fill: #CCEEFF;
}
text {
fill: #1d8703;
}
</style>
</head><body>
<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 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<defs>
<path id="circlePath"
d="
M 100, 100
m 60, 0
a -60,60 0 0,0 -120,0
a -60,60 0 0,0 120,0
"
/>
</defs>
<g>
<use xlink:href="#circlePath" fill="#CCEEFF" />
<text class="text">
<textPath xlink:href="#circlePath"> <<<<<<< A R T H U R R U N N I N G <<<<<<< </textPath>
</text>
</g>
</svg>
</div>
</div>
<desc><path id="circlePath" d="M 100, 100 m -60, 0 a 60,60 0 0,0 120,0 a 60,60 0 0,0 -120,0 " /></desc>
</body></html>
