JSFiddle - React, Tailwind, and code Playground

by Léo Durand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<svg id="arrow" width="31" height="15" xmlns="http://www.w3.org/2000/svg">
			<path id="arrow_1" d="M4.824 7.934l-3 3.369a.621.621 0 0 1-.884.025c-.243-.222-.25-.653-.024-.894l2.013-2.302h.696c-.345 0 .067-.283.067-.632 0-.349-.412-.631-.067-.631h-.696L.916 4.566c-.225-.24-.21-.661.024-.893a.621.621 0 0 1 .884.024l3 3.369A.565.565 0 0 1 5 7.5c0 .146-.087.34-.176.434z" fill-rule="nonzero" fill="#FF3708"/>
			<path opacity="0" id="arrow_2" d="M30.824 7.934l-6 6.369a.621.621 0 0 1-.884.025c-.243-.222-.25-.653-.024-.894l5.013-5.302H.625A.628.628 0 0 1 0 7.5c0-.349.28-.631.625-.631h28.304l-5.013-5.303c-.225-.24-.21-.661.024-.893a.621.621 0 0 1 .884.024l6 6.369A.565.565 0 0 1 31 7.5c0 .146-.087.34-.176.434z" fill-rule="nonzero" fill="#FF3708"/>

		</svg>

CSS

svg {
			  padding-top:50
			  display: block;
			  margin: 0 auto;
			}

JavaScript

var svg = document.getElementById("cups");
var s = Snap(svg);

var arrow_1 = Snap.select('#arrow_1');
var arrow_2 = Snap.select('#arrow_2');

var arrow_1Points = arrow_1.node.getAttribute('d');
var arrow_2Points = arrow_2.node.getAttribute('d');


var toFancy = function() {
  arrow_1.animate({
    d: arrow_2Points
  }, 1000, mina.easeinout, toSimple);
}

var toSimple = function() {
  arrow_1.animate({
    d: arrow_1Points
  }, 1000, mina.easeinout, toFancy);
}


toSimple();