JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="0" height="0" style="position:absolute;margin:-100%;">
	<path id="cog-icon" d="M 31.84375 2 C 30.444245 2.028643 29.053781 2.0360801 28.125 3 C 26.717268 4.4609873 26.873078 8.4713374 27.0625 10.6875 C 25.273051 11.092878 23.500812 11.743426 21.84375 12.59375 C 20.577229 10.769876 18.124455 7.640283 16.125 7.4375 C 14.720156 7.2950221 13.587191 8.2606095 12.46875 9.25 C 11.414861 10.182286 10.349218 11.094945 10.25 12.4375 C 10.100081 14.466134 12.726485 17.421584 14.28125 19 C 13.129576 20.522353 12.213366 22.18139 11.5 23.875 C 9.3676995 23.301928 5.5311391 22.451487 3.875 23.59375 C 2.708326 24.398422 2.4470743 25.920814 2.21875 27.40625 C 2.0036034 28.805951 1.754477 30.188255 2.53125 31.28125 C 3.6923356 32.915007 7.5122442 33.483609 9.71875 33.6875 C 9.80532 35.567508 10.141644 37.442892 10.6875 39.25 C 8.6804174 40.208077 5.2872163 42.100172 4.75 44.03125 C 4.3673957 45.406557 5.1063713 46.68232 5.875 47.96875 C 6.5992652 49.180931 7.3044473 50.386739 8.59375 50.71875 C 10.516538 51.21389 13.802504 49.18597 15.625 47.90625 C 16.253211 48.591841 16.930076 49.289629 17.65625 49.90625 C 18.381663 50.522224 19.130827 51.055903 19.90625 51.5625 C 18.977176 53.605849 17.562605 57.208517 18.375 59.03125 C 18.955491 60.33367 20.375318 60.889511 21.78125 61.375 C 23.106034 61.832468 24.395196 62.303074 25.59375 61.71875 C 27.381878 60.846991 28.635779 57.134195 29.21875 54.96875 C 31.067048 55.19714 32.910561 55.208092 34.75 54.96875 C 35.332971 57.134195 36.586872 60.846991 38.375 61.71875 C 39.646966 62.338866 41.052115 61.823864 42.4375 61.28125 C 43.742923 60.76995 45.046762 60.258499 45.59375 59.03125 C 46.411167 57.197248 44.960032 53.567233 44.03125 51.53125 C 45.563772 50.523336 46.993643 49.293907 48.28125 47.875 C 50.091223 49.15151 53.432605 51.218938 55.375 50.71875 C 56.743275 50.366405 57.502149 49.066828 58.21875 47.75 C 58.893989 46.509176 59.579271 45.327179 59.21875 44.03125 C 58.670224 42.059517 55.143347 40.125714 53.15625 39.1875 C...

CSS

body {
    background: #0D6068;
}
#cogs {
	position: absolute;
	top: 30px;
	left: 30px;
}
.cog{
    width: 128px;
    height: 128px;
	fill: #55D0DB;
	position: absolute;
}
#cog1 {
    top: 0;
	left: 0;
}
#cog2 {
	top: 55px;
	left: 95px;
}

JavaScript

$(document).ready(function(){
    	var deg = 0;
      	var rotate_right = $('#cog1 use');
      	var rotate_left = $('#cog2 use');
       	var interval;
      		$("#cogs").hover(
      			function(){
               		interval = setInterval(function(){
		       		if(deg >= 360) deg = 0;
		        		deg += 1;
		        		rotate_right.attr('transform', 'rotate('+deg+',32,32)');
		        		rotate_left.attr('transform', 'rotate('+-deg+',32,32)');
		     	}, 10);
		     	},
		     	function(){
		        	clearInterval(interval);
		        }
            );
   	});