JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle data-precentage='100' cx="0" cy="0" r="0" fill="red" />
   <circle data-precentage='120' cx="0" cy="0" r="0" fill="black" /> 
</svg>

JavaScript

$(document).ready(function(){
  $('svg circle').each(function(){
    var t = $(this);
    t.data( 'defaults', { rad : t.attr( 'r' ), fill : t.attr( 'fill' ) });
    t.hover(function(){
      t.attr({
        r : ((( t.data('defaults').rad * 2)/100) * t.attr('data-precentage'))/2,
        fill : '#a5a5a5'
      })
    },function(){
      t.attr({
        r : t.data( 'defaults' ).rad,
        fill : t.data( 'defaults' ).fill
      })
    });
  })
});