ants_garden

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <script>
    Math.radians = function(degrees) {
      return degrees * Math.PI / 180.0;
    };

Math.degrees = function(radians) {
      return radians * 180.0 / Math.PI;
    };
    
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    var width = 900 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.xml("ant.xml","image/svg+xml", function(xml) {
  var importedNode = document.importNode(xml.documentElement, true);
  importedNode = importedNode.getElementById("whole_ant")
  svg.node().appendChild(importedNode.cloneNode(true));
  svg.node().appendChild(importedNode.cloneNode(true));
  
  ant_g = svg.selectAll("g#whole_ant")
  
  var ant_bbox = ant_g.node().getBBox()
  
  var ant_data = {
    angle: 0,
    bbox: ant_bbox,
    pos: {x: width / 2 - ant_bbox.width / 2, y: height / 2 - ant_bbox.height /2},
    scale: 0.5,
    speed: 5.0,
    moving: true
  }
  
  ant_g.data([ant_data, ant_data])
  ant_g.on("mousemove", function(d){
    d.moving = false
  })
  ant_g.on("mouseout", function(d){
    d.moving = true
    start_moving()
  })
  
  function start_moving(){
    d3.timer(function(){
		var d = ant_g.datum()
    d.angle =+ Math.random() * 100.0 - 200.0
    d.pos.x += Math.cos(Math.radians(d.angle)) * d.speed
    d.pos.y += Math.sin(Math.radians(d.angle)) * d.speed
    update()
    return ! d.moving
  })
  }
  
  function update(){
    ant_g.attr("transform", function(d) {
  			return "translate(" + d.pos.x + ", " + d.pos.y + ") rotate(" + d.angle + ", " + d.bbox.width / 2 + ", " + d.bbox.height / 2 + ")";
  		})
  }
  
  update()
  start_moving()
  
  
  
});
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js