JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

HTML

<body>
    <svg width="100" height="100">
        <defs>
            <circle id="circle" r="10" class="myCircle" />
        </defs>
        <filter id="hover-glow" y="-30%" height="160%" x="-30%" width="160%">
          <feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="5" />
          <feBlend in="SourceGraphic" in2="blurOut" mode="screen" />
        </filter>
        <use id="circle" xlink:href="#circle" transform="translate(30 30)"  />
    </svg>
    
    <button id="repaint">Repaint</button>
</body>

CSS

.myCircle {
    fill: red;
    filter: url(#hover-glow);
}

.myCircle:hover {
    fill: blue;
}

JavaScript

$(document).ready(function() {
    $('#repaint').click(function(){
        var c = document.querySelector('#circle');
        var parent = c.parentNode;
        parent.removeChild(c);
        parent.appendChild(c.cloneNode(true));
    });
});