JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<script src="//cdn.jsdelivr.net/vivus/0.2.1/vivus.min.js"></script>
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 51.759 51.759" width="218" height="208" style="enable-background:new 0 0 51.759 51.759;" xml:space="preserve">
<g>
	<path d="M51.753,24.26c-0.005-0.133-0.041-0.255-0.098-0.368c-0.006-0.013-0.004-0.028-0.011-0.041
		c-3.036-5.394-7.024-9.676-12.192-13.086c-0.414-0.273-0.974-0.16-1.246,0.254c-0.025,0.037-0.03,0.08-0.048,0.119
		c-3.041,3.064-5.973,1.246-6.804,0.612c-2.141-1.639-1.381-4.885-1.373-4.916c0.072-0.297-0.061-0.589-0.303-0.747
		c-0.096-0.098-0.208-0.181-0.347-0.228c-3.557-1.201-5.76-1.48-5.852-1.492c-0.275-0.029-0.547,0.061-0.743,0.254L12.413,14.828
		c-0.201,0.198-0.275,0.466-0.25,0.726c-0.108,0.247-0.069,0.544,0.125,0.754c0.712,0.773,1.057,1.475,1.022,2.082
		c-0.027,0.484-0.304,0.947-0.845,1.416c-1.181,1.023-3.226,0.492-4.005,0.237c-0.02-0.027-0.029-0.059-0.053-0.085
		c-0.343-0.361-0.913-0.377-1.273-0.035l-6.854,6.496c-0.004,0.004-0.007,0.01-0.011,0.014c-0.015,0.015-0.024,0.033-0.038,0.049
		c-0.057,0.065-0.105,0.135-0.141,0.211c-0.014,0.03-0.023,0.061-0.034,0.092c-0.026,0.076-0.041,0.152-0.046,0.232
		C0.01,27.039,0,27.056,0,27.078l0.09,17.269c0.003,0.483,0.384,0.877,0.865,0.895l26.744,1.035c0.012,0,0.023,0.002,0.035,0.002
		c0.155,0,0.295-0.051,0.423-0.121c0.003,0,0.007,0.002,0.01,0.002c0.441-0.027,0.776-0.408,0.749-0.848
		c-0.007-0.117-0.01-0.234-0.005-0.357c0.092-2.908,2.542-5.215,5.442-5.106c2.909,0.094,5.199,2.537,5.106,5.443
		c-0.007,0.186-0.028,0.367-0.059,0.547c-0.066,0.379,0.155,0.728,0.498,0.865c0.141,0.108,0.304,0.189,0.495,0.198l10.424,0.496
		c0.014,0,0.028,0,0.042,0c0.231,0,0.453-0.088,0.621-0.248c0.178-0.17,0.279-0.406,0.279-0.652V24.292
		c0-0.001-0.001-0.003-0.001-0.004C51.758,24.279,51.753,24.27,51.753,24.26z...

CSS

svg path {
    fill: none;
    stroke: #222;
    stroke-width: 1px;
}

JavaScript

var d = 1;

var v = new Vivus('svg', {start: 'manual',speed:300},function(c){
 if(d == 1){
	  d = -1;
	 	v.play(d);
 }else{
		v.stop();
 }
});

v.play(d);