JSFiddle - React, Tailwind, and code Playground

HTML

<!-- I meant to load this svg externally because it seems like the right way to do it, especially when I consider that the final svg will probably have about 100 different grounps inside of it -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g>
	<path id="bicep" d="M337.889,188c0,0-36.11-35.556-98.333-32.222c-62.222,3.333-84.444,43.889-84.444,43.889l1.667,49.445
		c28.749,11.781,95.286,69.204,178.333,3.333L337.889,188z"/>
	<path id="forearm" d="M190.044,215.891c0,0-34.967-21.627-97.195-23.233C30.62,191.053,7.19,212.211,7.19,212.211L7.34,239.6
		c28.344,8.096,93.021,43.48,177.958,11.715L190.044,215.891z"/>
</g>
</svg>

JavaScript

var s = Snap(800,600);

	    // animate rotate the forearm graphic
	    var anim1 = function() {
	        forearm.animate({
	            'transform': 'r45,320,120'
	        }, 1000, mina.linear, anim2);
	    };

	    // animate from the svg images current path coordinates to the ones below
	    var anim2 = function() {
	        bicep.animate({
	            d: 'M337.889,188c-12.064-11.708-28.073-93.482-89.777-92.889c-62.222,3.333-93,104.555-93,104.555l1.667,49.445 c29.608,30.553,96.669,99.406,178.333,3.333L337.889,188z'
	        }, 1000, mina.bounce, anim3);
	    };

	    // animate from the svg images current path coordinates top the ones below
	    var anim3 = function() {
	        forearm.animate({
	            d: 'M174.333,250.938c0,0,19.659-36.111,17.816-98.333c-25.316-59.032-31.731-75.007-24.267-84.445l-27.338,1.667 c-35.496,57.849-82.325,139.528-1.843,178.334L174.333,250.938z'
	        }, 1000, mina.bounce);
	    };

	    // load the svg and grab the #arm and its inner elemmnts
	    Snap.load('body.svg', function(f) {
	        var arm = f.select('#arm'),
	            forearm = f.select('#forearm'),
	            bicep = f.select('#bicep');
	        s.append(arm);
	        s.append(forearm);
	        s.append(bicep);
	        anim1();
	    });