JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<div id="mysvg" >
    <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 396 520" enable-background="new 0 0 396 520" xml:space="preserve">

<g id="character">
	<g id="body">
	<path id="path3" fill="#93C01F" d="M102.1,444.3c19.9,2.5,34.2,2.5,34.9,48.9c0.4,28,64.6,37.3,71.7,2.6c5.3-26.1,76-291,48-345.6
		c-23.3-45.3-81.2-51.3-111.3-55S58.7,81.6,23,121.4c-40.2,44.7-32.5,316.4-32,343c0.9,44.2,66.7,43.1,73.3,19.8
		C75.3,445.3,82.1,442,102.1,444.3"/>
	<path id="path5" fill="#DDDB00" d="M109.1,97.9c-14.9-11.4-21.3-29.2-27-50c9.4,8.9,17.8,22.4,29.7,28c-1.9-13.2,0.7-27.1,2.4-40.7
		c2.7,12.8,7.4,35.5,16.6,44.4c6.2-26.5,28.1-50.5,52.5-62.3c-11.5,18.6-12.6,36.5-15,52.6c7.6-5,12.1-8.5,27.2-9.7
		c-6.6,5.6-13.1,13.1-17.3,21c15.6-3.7,25.5-5,38.6-3C198.2,89,190.7,98.4,185.1,107L109.1,97.9z"/>
	<path id="path7" fill="#91A94E" d="M121.2,276.8c-40.7-5-69.8-42.2-64.9-83.1c5-40.7,42.2-69.8,83.1-64.9
		c40.7,5,69.8,42.2,64.9,83.1S162,281.8,121.2,276.8"/>
	<path id="eyeball" fill="#FFFFFF" d="M193.8,215.2c-4.3,35.3-36.4,60.4-71.7,56.1C86.8,267,61.8,234.9,66,199.6
		c4.3-35.3,36.4-60.4,71.7-56.1C172.9,147.8,198,179.9,193.8,215.2"/>
	<path id="path11" fill="#93C01F" d="M298.3,55.4c-5.6,12-19.8,17.2-31.6,11.5c-12-5.6-17.2-19.8-11.5-31.6
		c5.6-12,19.8-17.2,31.7-11.5C298.7,29.3,303.9,43.4,298.3,55.4"/>
	<path id="path13" fill="#93C01F" d="M243.3,137.4c-3.8,7.9-10.8,12.6-15.6,10.3l0,0c-5-2.2-5.8-10.5-2.1-18.6l35.7-76.4
		c3.8-7.9,10.6-12.6,15.6-10.3l0,0c5,2.2,5.7,10.6,2.1,18.7L243.3,137.4z"/>
	<path id="path15" fill="#93C01F" d="M8.6,30.2c2.6,12.9,15,21.4,28,18.9c12.9-2.5,21.4-14.9,18.9-28C53,8.1,40.6-0.3,27.5,2.2
		C14.5,4.7,6.1,17.2,8.6,30.2"/>
	<path id="path17" fill="#93C01F"...

CSS

#mysvg {
    position: absolute;
    left:50px;
    top:100px;
}

svg {
    position: absolute;
    border:1px solid red;
    
    width: 500px;
    height: 500px;
}
svg rect {
	shape-rendering: crispEdges;
}

JavaScript

var S;
var pt;
var svg
var box;

window.onload = function(){
    var svg = $('#mysvg svg')[0];
    var S = Snap(svg);
   
    var pt = svg.createSVGPoint(); // create the point
    
    var circleX = 130, 
        circleY = 206, 
        circleRadius = 30;
    
    var eye = $('#eye')[0];
    var L1 = S.path("M "+circleX+" "+circleY +"L 0 0").attr({
        //stroke: "blue"
    });
    //S.mousemove(
    $(document).on('mousemove',
        function(ev){
            //onmove
		    pt.x = ev.clientX;
			pt.y = ev.clientY;
            // convert the mouse X and Y so that it's relative to the svg element
			var tf = pt.matrixTransform(svg.getScreenCTM().inverse());
            L1.attr({ d: "M "+circleX+" "+circleY +"L "+ tf.x +" "+ tf.y  });
            var totalLength = L1.getTotalLength();
            if (totalLength < circleRadius) {
                console.log('###')
                eye.setAttribute("transform", "translate(" + tf.x + ", " + tf.y + ")");
            } else {
                var PAL = L1.getPointAtLength(circleRadius);
                //c1.attr({ cx: PAL.x , cy: PAL.y });
                eye.setAttribute("transform", "translate(" + (PAL.x - circleX) + ", " + (PAL.y - circleY) + ")");
            }
            //eye.setAttribute("transform", "translate(" + tf.x + ", " + tf.y + ")");
        }
    );
    
}