SVG Circle morphing

for itchallenges.me task

by Grzegorz Matyszewski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<svg width="200px" height="200px" viewBox="0 0 200 200">
  <path opacity="0.8" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M0.5,100.5c0-55.2,44.8-100,100-100s100,44.8,100,100" data-hover="M0,0.7c44.5-0.5,44.8,0,100,0s55.5,0,100,0"
    />
<path opacity="0.8" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M200.5,100.5c0,55.2-44.8,100-100,100
    s-100-44.8-100-100" data-hover="M200,200.7c-44.5-0.5-44.8,0-100,0s-55.5-0.5-100,0"/>
</svg>

CSS

body { background: #222; }
svg { overflow: visible; position: absolute; left: 50%; top: 50%; margin: -100px; }

JavaScript

$('svg').on('mouseover', function(e) {
	$('path').each(function(i, path) {
  	TweenMax.to(path, 0.5, {
    	attr: {
        d: $(path).data('hover')
      },
      ease: Back.easeOut,
    });
  });
})
.on('mouseleave', function(e) {
	$('path').each(function(i, path) {
  	TweenMax.to(path, 0.5, {
    	attr: {
        d: $(path).data('path')
      },
      ease: Back.easeOut,
    });
  });
});

$('path').each(function(i, path) {
  $(path).data('path', $(path).attr('d'));
});