AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="testApp" ng-controller="testCtrl">
  <pie-chart value="val"></pie-chart>
  {{val}}
  <button ng-click="goRandom()">Random</button>
</div>

CSS

body {
  background: #e0e4e5;
}

JavaScript

var testApp = angular.module('testApp', []);

testApp.controller('testCtrl', function($scope) {
  $scope.goRandom = function() {
    $scope.val = Math.floor((Math.random() * 90) + 10);
  }
  $scope.goRandom();
});



testApp.directive('pieChart', function() {
  var html = 
    '<svg width="510" height="20" style="background: #fff">' +
      '<path d="{{path}}" stroke="red" stroke-width="10" fill="none">' +
        '<animate dur="1s" repeatCount="indefinite" attributeName="d" values="{{path2}}"/>' +
      '</path>' +
    '</svg>';

  return {
    restrict: 'E',
    template: html,
    scope: {
      'value': '='
    },
    
    link: function(scope, elem, attrs) {
      
      scope.$watch('value', function(newValue, oldValue) {
        scope.path = 'M 5 10, L ' + (newValue * 5) + ' 10';
        scope.path2 = 'M 5 10, L ' + (oldValue * 5) + ' 10; M 5 10, L ' + (newValue * 5) + ' 10';
        elem.children().children().beginElement();
      });
      
    }
  };
});