How to make animation on svg by using jQuery

I am trying to make a little animation with <svg>. I have two <svg> <circle>, and I want them slide to each other, and merge together into a larger circle. I search that I can use <animate()> to slide them together, but I also want some animation that merging the two circle. I am not sure how to start and what should I search for. Thank you very much for helping.

My code:

$(document).ready(function() {

  // draw the circle in the displayWindow
  function drawCircle(x, y, r) {
    // store in string of how is the hexagon be drawn
    var str = '<svg class="circle" class="ui-widget-content" style="position:absolute; left:' + x + '; top: ' + y + ';">
			<circle cx="75" cy = "75" r = "' + r + '" fill="none" stroke="red" /></svg>';

    // draw the circle
    var svgElement = $(str);

    // append the circle into the displayWindow
    $("#displayWindow").append(svgElement);
  }

  drawCircle(5, 5, 60);
  drawCircle(200, 5, 60);
  drawCircle(102.5, 200, 84.853);
});

	#display {
	  overflow-x: auto;
	  overflow-y: auto;
	  position: relative height: 500px;
	  width: 100%;
	}
	#draglist {
	  background-color: white;
	  left: 10px;
	  width: 160px;
	  height: 500px;
	  border: 1px solid;
	  float: left;
	}
	#displayWindow {
	  background-color: white;
	  height: 500px;
	  width: 50%;
	  position: relative;
	  border: 1px solid black;
	  float: left;
	  overflow: auto;
	}
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="display">
  <div id="draglist">
    <div id="hexagon">
      <svg height="150" width="150" style="position:relative; left:5; top:5;" class="ui-widget-content">
        <text fill="black" x=75 y=75 style="text-anchor: middle">1</text>
        <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue">
      </svg>
    </div>
    <div id="square">
      <svg height="150" width="150" style="position:relative; left:5; top:5;" class="ui-widget-content">
        <text fill="black" x=75 y=75 style="text-anchor: middle">2</text>
        <rect width="120" height="120" x="15" y="15" fill="none" stroke="blue">
      </svg>
    </div>
  </div>
  <div id="displayWindow" style="left:10">
  </div>
</div>