JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
  <circle class="meu-circulo" ></circle>
</svg>

CSS

html, body{
  min-height: 300px;
}

.meu-circulo{
  r: 30;
  cx: 50;
  cy: 40;
  fill: lightgreen;
  stroke: orange;
  stroke-width: 5;
  transition: all 1s ease;
}

.meu-circulo:hover{
  cx: 70;
  fill: green;
  stroke-width: 10;
}

JavaScript

const circle = document.querySelector('.meu-circulo');
let r = 30;

circle.addEventListener('click', () => {
	r += 10;
	circle.style.r = r;
})