SVG arc modes

SVG pathData has 4 arc modes...

by Wray Bowling

HTML

<svg>
    <defs>
      <marker id='head' orient='auto' markerWidth='4' markerHeight='4'
            refX='0' refY='2'>
        <path d='M0,0 V4 L2,2 Z' />
      </marker>
    </defs>
    
    <g id="reference">
      <circle r="40" cx="100" cy="100"/>
      <circle r="40" cx="100" cy="200"/>
      <circle r="40" cx="100" cy="300"/>
      <circle r="40" cx="100" cy="400"/>
    </g>

    <g id="modes">
      <path data-big="0" data-sweep="1" />
      <path data-big="1" data-sweep="1" />
      <path data-big="0" data-sweep="0" />
      <path data-big="1" data-sweep="0" />
    </g>
    
    <g id="labels">
      <text x="175" y="100">big NO, sweep YES (0–180 clockwise)</text>
      <text x="175" y="200">big YES, sweep YES (180–360 clockwise)</text>
      <text x="175" y="300">big NO, sweep NO (0–180 anticlockwise)</text>
      <text x="175" y="400">big YES, sweep NO (180–360 anticlockwise)</text>
    </g>
  </svg>

CSS

html,body,svg{
  margin:0;
  border:0;
  padding:0;
  height:100%;
  width:100%;
}

circle{
  fill:#e8e8e8;
}

#modes path{
  stroke:red;
  stroke-width:2px;
  fill:none;
  marker-end: url(#head);
}

text{
  font-family:helvetica
}

JavaScript

var startTime;
var paths = document.querySelectorAll('#modes path');

function animate(time){
  if(startTime === undefined){
    startTime = time;
  }
  

  
  for(var i=0; i<paths.length; i++){
    var angleA = time * 0.00017;
    var angleB = time * 0.001;
    
    if(i>1){
      angleA *= -1;
      angleB *= -1;
    }  
    
    var d = ['M'];
    d.push(Math.cos(angleA) * 40 + 100);
    d.push(Math.sin(angleA) * 40 + (i*100 + 100));
    d.push('A 40 40 0');
    d.push(paths[i].getAttribute('data-big'));
    d.push(paths[i].getAttribute('data-sweep'));
    d.push(Math.cos(angleB) * 40 + 100);
    d.push(Math.sin(angleB) * 40 + (i*100 + 100));
    paths[i].setAttributeNS(null,'d',d.join(' '));
  }
  window.requestAnimationFrame(animate);
}
window.requestAnimationFrame(animate);