title: svg code HTML 5 path golden spiral
body: <p>i am looking to create a text animation along a spiral path
  something on the lines of this <a href="http://www.html5canvastutorials.com/labs/html5-canvas-spiral-text/" rel="nofollow">http://www.html5canvastutorials.com/labs/html5-canvas-spiral-text/</a></p>
  
  <p>my attempt is to make the path a golden spiral instead of the one in the above code. the svg code for the golden spiral is given below... i have tried replacing the path data, but only the first curve loads...</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve"&gt;
  &lt;g id="ARC"&gt;
  
      &lt;path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M32,87.344c0,327.678,265.635,593.313,593.313,593.313"/&gt;
  &lt;/g&gt;
  &lt;g id="ARC_1_"&gt;
  
      &lt;path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M625.313,680.656C827.829,680.656,992,516.485,992,313.969"/&gt;
  &lt;/g&gt;
  &lt;g id="ARC_2_"&gt;
  
      &lt;path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M992,313.969c0-125.162-101.464-226.625-226.625-226.625"/&gt;
  &lt;/g&gt;
  &lt;g id="ARC_3_"&gt;
  
      &lt;path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062"/&gt;
  &lt;/g&gt;
  &lt;g id="ARC_4_"&gt;
  
      &lt;path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563"/&gt;
  &lt;/g&gt;
  &lt;g id="ARC_5_"&gt;
  
      &lt;path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5"/&gt;
  &lt;/g&gt;
  &lt;g id="ARC_6_"&gt;
  
      &lt;path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064"/&gt;
  &lt;/g&gt;
  &lt;g id="ARC_7_"&gt;
  
      &lt;path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>