Animate SVG Blob

by Jon Fuller

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/AttrPlugin.min.js"></script>
<svg id="svg" width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
	<g transform="translate(300, 300)">
		<path id="path" d="M168.1,-127.9C203.9,-89.3,209.2,-20.199999999999996,188.8,32.7C168.4,85.5,122.4,122,72.7,142.9C23,163.7,-30.4,168.8,-87.6,152.5C-144.9,136.2,-206,98.6,-213.8,52.3C-221.6,5.9,-176.1,-49.1,-131.6,-89.8C-87,-130.4,-43.5,-156.7,11.3,-165.7C66.2,-174.8,132.4,-166.6,168.1,-127.9Z" 
			  fill="rgba(171, 184, 195, 1)" 
			  stroke="none" 
			  stroke-width="0">
		</path>
	</g>
</svg>

<svg id="svg" width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
	<g transform="translate(300, 300)">
		<path id="newpath" d="M168.1,-127.9C203.9,-89.3,209.2,-20.199999999999996,188.8,32.7C168.4,85.5,122.4,122,72.7,142.9C23,163.7,-30.4,168.8,-87.6,152.5C-144.9,136.2,-206,98.6,-213.8,52.3C-221.6,5.9,-176.1,-49.1,-131.6,-89.8C-87,-130.4,-43.5,-156.7,11.3,-165.7C66.2,-174.8,132.4,-166.6,168.1,-127.9Z" 
			  fill="rgba(171, 184, 195, 1)" 
			  stroke="none" 
			  stroke-width="0">
		</path>
	</g>
</svg>

CSS

body {
  background: black;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

JavaScript

$(document).ready(function() {
    TweenLite.to('#path', 2, {
        attr:{d: 'M58.099999999999994,-64.5C82.30000000000001,-16,113.8,8.600000000000001,121,47.9C128.2,87.3,111.2,141.4,66.2,179C21.3,216.5,-51.6,237.6,-102.1,212.9C-152.6,188.3,-180.6,117.9,-192.9,48.4C-205.3,-21,-201.9,-89.7,-167.2,-140.6C-132.4,-191.6,-66.2,-224.8,-24.600000000000005,-205.1C16.9,-185.5,33.900000000000006,-113,58.099999999999994,-64.5Z'}
    });
	 TweenLite.to('#path', 2, {
        attr:{d: 'M168.1,-127.9C203.9,-89.3,209.2,-20.199999999999996,188.8,32.7C168.4,85.5,122.4,122,72.7,142.9C23,163.7,-30.4,168.8,-87.6,152.5C-144.9,136.2,-206,98.6,-213.8,52.3C-221.6,5.9,-176.1,-49.1,-131.6,-89.8C-87,-130.4,-43.5,-156.7,11.3,-165.7C66.2,-174.8,132.4,-166.6,168.1,-127.9Z'}
    }).delay(2);
});

function Tween(){

//TweenLite.fromTo("#rect", 2, { rotation: 20}, { rotation: -20, ease: RoughEase.ease.config({ strength: 5, points: 20,taper:"out", randomize: false}), clearProps: "rotation"});
   
  
TweenLite.fromTo("#newpath", 2, 
		{ 
			rotation: -20,
			transformOrigin:"left top",
			attr:{d: 'M58.099999999999994,-64.5C82.30000000000001,-16,113.8,8.600000000000001,121,47.9C128.2,87.3,111.2,141.4,66.2,179C21.3,216.5,-51.6,237.6,-102.1,212.9C-152.6,188.3,-180.6,117.9,-192.9,48.4C-205.3,-21,-201.9,-89.7,-167.2,-140.6C-132.4,-191.6,-66.2,-224.8,-24.600000000000005,-205.1C16.9,-185.5,33.900000000000006,-113,58.099999999999994,-64.5Z'}
		}, 
		{ 
			rotation: 0,
			ease:Elastic. easeOut.config( 5, 0.2),
			attr:{d: 'M168.1,-127.9C203.9,-89.3,209.2,-20.199999999999996,188.8,32.7C168.4,85.5,122.4,122,72.7,142.9C23,163.7,-30.4,168.8,-87.6,152.5C-144.9,136.2,-206,98.6,-213.8,52.3C-221.6,5.9,-176.1,-49.1,-131.6,-89.8C-87,-130.4,-43.5,-156.7,11.3,-165.7C66.2,-174.8,132.4,-166.6,168.1,-127.9Z'}
		}
	).repeat(5);
};

var tl2 = new TimelineMax()
	.to("#newpath", 0.5, 
		{ 
			rotation: -20, 
			transformOrigin:"left top",
			attr:{d:...