Raising bar animation

Depends on jQuery and Raphel

HTML

<script src="https://yastatic.net/jquery/2.2.3/jquery.min.js"></script>
<script src="https://yastatic.net/raphael/2.1.0/raphael.min.js"></script>
<div id="paper"></div>

JavaScript

$(function(){

	var paper = Raphael("paper", 500, 500);
	
	var bar = paper.path(
		"M 100, 500" +
		"L 200, 450" +
		"L 300, 500" +
    "L 300, 500" +
		"L 100, 500" +
		"Z"
	).animate({
		path:
			"M 100, 350" +
			"L 200, 300" +
			"L 300, 350" +
			"L 300, 500" +
			"L 100, 500" +
			"Z"
	}, 500).attr(
    {
      fill: "green",
      stroke: "none"
    }
  );

});