JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://adm-co.net/jquery.velocity.min.js"></script>
<svg id='svg' xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="436.25" height="456.5" version="1.1">
    <g transform="translate(-225.94052,-31.584209)">
        <path d="m259.84 71.78c-120.47 0-218.12 102.2-218.12 228.25 0 126.05 97.65 228.25 218.13 228.25 120.47 0 218.13-102.2 218.13-228.25 0-126.05-97.65-228.25-218.12-228.25zm0 4.78c117.95 0 213.56 100.05 213.56 223.47C473.41 423.45 377.8 523.5 259.84 523.5 141.89 523.5 46.25 423.45 46.25 300.03 46.25 176.61 141.89 76.56 259.84 76.56z" transform="translate(184.22177,-40.197041)" fill="#1c1f26" />
    </g>
    <g transform="translate(-81.915798,-31.584205)">
        <g transform="matrix(-0.25881905,-0.96592583,0.96592583,-0.25881905,129.87282,611.33082)" fill="#1c1f26">
            <path transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-135.78147,130.45415)" d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07zM279.91 300.03 279.91 300.03" fill="#1c1f26" />
            <path d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07z" transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-110.83616,87.416816)" fill="#1c1f26" />
            <path transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-160.5781,87.330591)" d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07z" fill="#1c1f26" />
        </g>
        <path class="electron" d="m107.76 150.64c0 6.53-5.3 11.83-11.83 11.83-6.53 0-11.83-5.3-11.83-11.83 0-6.53 5.3-11.83 11.83-11.83 6.53 0 11.83 5.3 11.83 11.83z"  fill="#1c1f26" />
    </g>
</svg>

SCSS

$brown: #FF5200;

body {
    height: 7000px;
}

#svg {
    position: fixed;
    margin: 30px;
}

.s0 {
    fill:#1c1f26;
}
.electron {
    fill: $brown;
    transform-origin: 50% 370px;
    -webkit-transform-origin: 50% 370px;
};

JavaScript

$el = $('.electron');

$(function() {
    $el.velocity({translateX: 200, translateY: -115},{duration: 0});
});

if (document.addEventListener) {
    document.addEventListener("mousewheel", onDocumentMouseWheel, false);
    document.addEventListener("DOMMouseScroll", onDocumentMouseWheel, false);
}
else {
    document.attachEvent("onmousewheel", onDocumentMouseWheel);
}

function onDocumentMouseWheel(e) {
    var sgn = '+';
    if ((e.type == 'mousewheel' && e.wheelDelta > 0) || (e.type == 'DOMMouseScroll' && e.detail < 0)) {
        sgn = '-';        
    }
    $el.velocity({rotateZ: sgn+'=10deg'},{duration: 500, queue:false});
}