JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="150" height="150" viewBox="0 0 100 100">
  <g class="highlight">
    <g>
      <circle cx="50" cy="50" r="40" />
      <text x="50" y="60" text-anchor="middle" fill="#FFF">Hi!</text>
    </g>
  </g>
</svg>

CSS

text {
  fill: #FFF;
  font: bold 30px sans-serif;
  stroke-width: 0;
}

.highlight {
  stroke: #3F0;
  stroke-width: 0;
  transition: stroke-width 500ms;
}

.highlight:hover {
  stroke-width: 10px;
}

.highlight:hover text {
  stroke-width: 1px;
}