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="M3.83406531 7.93437494L1.00922324 11.3028771c-.21981415.2438836-.57593075.2721467-.8322041.0246315-.2291129-.2212731-.23482156-.6528299-.02295246-.8931135l1.89609035-2.30268382.51831107-.00013394c-.3250425 0-.58852525-.28275718-.58852525-.63157734 0-.34882017.26348275-.63160893.58852525-.63160893l-.51831107.00013395-1.89609035-2.3026838c-.21183972-.24025202-.19680283-.66119832.02295247-.89308194.23202603-.24479938.61574452-.22300996.83220409.02463151l2.82484207 3.36847058c.1383329.14561015.16360998.2858519.16593469.43414625 0 .146147-.08236413.34019914-.16593469.43436732z" fill-rule="nonzero" fill="#FF3708"/>
			<path opacity="0" id="arrow_2" d="M30.8237804 7.93437494l-5.9999305 6.36850216c-.2334386.2438836-.6116279.2721467-.8837855.0246315-.2433137-.2212731-.2493762-.6528299-.0243751-.8931135l5.0136132-5.30268382H.62500303C.27981385 8.13171128 0 7.8489541 0 7.50013394c0-.34882017.27981386-.63160892.62500303-.63160892H28.9293025l-5.0136132-5.3026838c-.2249699-.24025202-.209001-.66119832.0243751-.89308194.2464074-.24479938.6539094-.22300996.8837855.02463151l5.9999305 6.36847058c.146907.14561014.1737508.28585189.1762196.43414625 0 .146147-.0874692.34019914-.1762196.43436732z" fill-rule="nonzero" fill="#FF3708"/>

		</svg>


</svg>

CSS

svg {
			  padding-top: 100px;
			  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();