SVG círculo de progreso con porcentaje

Estoy usando el código que se encuentra aquí para crear un círculo de progreso:http://codepen.io/JMChristensen/pen/Ablch

Pero no quiero que sea tan grande, así que cambié el radio del círculo para que el círculo interno y externo sean 40 en lugar de 90. El problema es que después de hacer eso, el círculo que muestra el porcentaje deja de funcionar, sin importar qué porcentaje escriba en el el círculo no cambia y siempre parece estar al 100%.

Aquí está el HTML:

<h1>SVG Circle Progress</h1>
<h2>Based off of CSS3 circle progress bars</h2>

    <div id="cont" data-pct="100">
    <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle r="40" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
      <circle id="bar" r="40" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    </svg>
    </div>
    <label for="percent">Type a percent!</label>
    <input id="percent" name="percent">

Creo que tiene algo que ver con el trazo-dashoffset calculado en js, pero realmente no puedo entender las matemáticas detrás de esto.