JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<svg id="ner" width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
    <defs>
      <circle id="Oval" fill="#F57600" cx="50" cy="50" r="50"></circle>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <use href="#Oval" fill="blue" />
    </g>
</svg>

<div>
  
</div>

CSS

#ner{
  /* display:none; */
  /* this makes it hidden from bg too! */
  /* anything done here effects the background too... */
}
div{
  height:100px;
  width:100px;
  background-color:teal;
  background-image:-webkit-element(#ner);
  background-image:-moz-element(#ner);
}

#Oval:hover{
  /* background usage updates when original is modified */
  fill:red;
}

div #Oval{
  /* doesn't work because it's not really in the DOM */
  fill:blue;
}