JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<div class="svg-graph">
            <svg version="1.1" id="graph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 viewBox="0 0 222 246.6" style="enable-background:new 0 0 222 246.6;" xml:space="preserve">
            <style type="text/css">
                .st0{clip-path:url(#SVGID_2_);fill:#52B3F5;}
                .st1{clip-path:url(#SVGID_2_);fill:#8FDAFF;}
                .st2{clip-path:url(#SVGID_2_);fill:#0468FF;}
                .st3{clip-path:url(#SVGID_2_);fill:none;stroke:#0468FF;stroke-miterlimit:10;}
                .st4{clip-path:url(#SVGID_2_);fill:none;stroke:#8FDAFF;stroke-miterlimit:10;}
                .st5{clip-path:url(#SVGID_2_);fill:none;stroke:#52B3F5;stroke-miterlimit:10;}
            </style>
            <g>
                <defs>
                    <rect id="SVGID_1_" width="222" height="246.6"/>
                </defs>
                <clipPath id="SVGID_2_">
                    <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
                </clipPath>
                <path class="st0" d="M222,233.8c0,3.2-2.6,5.8-5.8,5.8c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8
                    C219.4,228,222,230.6,222,233.8"/>
                <path class="st0" d="M105.2,150c0,2.1-1.7,3.7-3.7,3.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7
                    C103.5,146.2,105.2,147.9,105.2,150"/>
                <path class="st0" d="M34.4,21.1c0,2.5-2,4.5-4.5,4.5s-4.4-2-4.4-4.5c0-2.5,2-4.4,4.4-4.4S34.4,18.6,34.4,21.1"/>
                <path class="st1" d="M110.5,207.1c0,3.3-2.7,5.9-5.9,5.9c-3.3,0-5.9-2.7-5.9-5.9c0-3.3,2.7-5.9,5.9-5.9
                    C107.8,201.2,110.5,203.9,110.5,207.1"/>
                <path class="st2" d="M128.4,207.1c0,3.9-3.2,7.1-7.1,7.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1
                    C125.3,200.1,128.4,203.2,128.4,207.1"/>
             ...

CoffeeScript

var s = new Snap( '#graph' );
var paths = s.selectAll( 'path' );


// This changes the cx/cy attribute properly but I guess what 
// I really need is to change the "d" attribute.
// Not sure how to find it 
function moveFunc( ev, x, y ) {
    //console.log(ev);
    paths.forEach(function(el) {
       el.attr({ cx: x , cy: y });
    });
}

s.mousemove( moveFunc );