index.html

## index.html
<!DOCTYPE html>
<style>
  path {
    stroke: #ccc;
    fill: none;
  }
  path.clip {
    stroke: #fff;
    fill: #fc0;
  }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var polygon = {
  type: "Polygon",
  coordinates: [[
    [-30, -30],
    [-30,  30],
    [ 10, -10],
    [-20,  10],
    [-20, -20],
    [ 20, -20],
    [ 20,  10],
    [-10, -10],
    [ 30,  30],
    [ 30, -30],
    [-30, -30]
  ]]
};

var path = d3.geo.path().projection(d3.geo.mercator().translate([width / 2, height / 2]).scale(width));

var svg = d3.select("body").append("svg");

svg.append("path")
    .datum(polygon)
    .attr("d", path);

var circle = d3.geo.circle().origin([0, -90]);

var clipPath = svg.append("path").attr("class", "clip");

d3.timer(function(elapsed) {
  clipPath
      .datum(circle.angle(45 + elapsed / 100).clip(polygon))
      .attr("d", path);
});

</script>