JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<svg width="400" height="200">
        <circle cx="30" cy="30" r="10" id="btnOff" fill="red" style="display: none;">
        <set attributeName="display" attributeType="css" from="none" to="block" 
  end="click" begin="btnOn.click"/>
    </circle>
    <circle cx="30" cy="30" r="10" id="btnOn" fill="green" style="display: block;">
        <set attributeName="display" attributeType="css" from="block" to="none" 
  begin="click" end="btnOff.click"/>
    </circle>
    <text x="60" y="60" opacity="0">Hello circle
  <set attributeName="opacity" from="0" to="1" 
  begin="btnOn.click" end="btnOff.click"/>
</text>
    <text x="30" y="80">Click the green circle to see the text</text>
    <text x="30" y="80">Click the red circle to hide the text</text>
</svg>

CSS

body {
    padding: 1em;
    height: 400px;
}
circle {
    cursor: pointer;
}