JSFiddle - React, Tailwind, and code Playground

HTML

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<svg xmlns="http://www.w3.org/2000/svg" 
         viewBox="0 0 120 100"> 
      <g> 
        <text x="0" y="15" fill="red" xml:space="preserve">I&#160;&#160;&#160;love     SVG!#160;&#160;&#160;#160;&#160;&#160;#160;&#160;&#160;</text>
        <g id="one"> 
          <circle fill="green" cx="50" cy="55" r="20"/> 
        </g> 
        <g id="two"> 
          <circle fill="orange" cx="50" cy="45" r="20"/> 
        </g> 
      </g> 
</svg>

CSS

#one{
    position:absolute;
    z-index:1;
}
#two{
    position:absolute;
    z-index:-1;
}