SVG Recipe

Text / textPath

Last modified:

arc

I'm only sleeping. 

<svg width="200" height="124" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="txtp1" d="M100,12 a50,50 0 1,1 0,100 a50,50 0 1,1 0,-100 z"/>
  </defs>
  <circle cx="100" cy="62" r="50" fill="none" stroke="#f5f5f5" stroke-width="1"/>
  <text font-size="11">
    <textPath startOffset="0%" xlink:href="#txtp1">I'm only sleeping.</textPath>
  </text>
</svg>


rotate

I'm only sleeping. 

<svg width="200" height="124" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="txtp2" d="M100,12 a50,50 0 1,1 0,100 a50,50 0 1,1 0,-100 z"/>
  </defs>
  <circle cx="100" cy="62" r="50" fill="none" stroke="#f5f5f5" stroke-width="1"/>
  <text font-size="11">
    <textPath startOffset="0%" xlink:href="#txtp2">I'm only sleeping.</textPath>
    <animateTransform attributeName="transform" type="rotate"
      values="0 100,62;360 100,62" dur="10s" repeatCount="indefinite"/>
  </text>
</svg>