all the shapes svg animation

by Chris Ball

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="http://placehold.it/600x400" alt=""></div>
		<div class="swiper-slide"><img src="http://placehold.it/800x600" alt=""></div>
	</div>
</div>

JavaScript

let swiper = new Swiper('.swiper-container')

let leftArrow = {
	1: 'M40,10 L40,10 c-11,0-20,9-20,20 s9,20,20,20 l0,0 c-11,0-20-9-20-20 S29,10,40,10z',
	2: 'M40,10 L40,10 L20,30 l20,20 l0,0 L20,30 L40,10z',
	3: 'M40,10 L40,10 v20 v20 l0,0 L20,30 L40,10z',
	4: 'M40,10 L40,10 L30,30 l10,20 l0,0 L20,30 L40,10z',
	5: 'M30,10 h10 v20 v20 H30 L20,30 L30,10z',
	6: 'M30,10 h10 L30,30 l10,20 H30 L20,30 L30,10z'
}

s = Snap(60, 60)

let path = s.path(leftArrow[0])

path.attr({
	fill           : 'none',
	stroke         : '#000',
	strokeWidth    : 2,
	strokeLinecap  : 'round',
	strokeLinejoin : 'round'
})

function loopIt(i) {
	if (i < Object.keys(leftArrow).length)
		path.animate({d: leftArrow[i]}, 1000, mina.elastic, () => loopIt(i + 1))
	else
		path.animate({d: leftArrow[i]}, 1000, mina.elastic, () => loopIt(1))
}

loopIt(1)