Stroke Dasharray messing

Lets test StrokeDasharray to get a dial type thing going on


var s = Snap("#svgout");

var innerCircle = s.circle(150, 150, 80).attr({
    fill: "none",
    stroke: 'red',
    strokeWidth: 30,
    strokeDasharray: "10 300 40 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10",
    strokeDashoffset: 50
});

Snap.animate(0,400, function( value ){
       innerCircle.attr({ 'strokeDashoffset': value })

},5000 );

   


        
The actual svg markup looks like this (when you've clicked on run)....