JSFiddle - React, Tailwind, and code Playground

by opherv

HTML

<svg viewbox="0 0 400 400">
  <defs>
       <mask id="myMask" maskUnits="userSpaceOnUse">
          <path d="M 0 0 L 200 200 L 0 200 z" fill="white" />
      </mask>
   </defs>  
    <g transform="rotate(45 100 100)">
        <path id="originalPath" class="test" d="M 100 350 q 150 -300 300 0" stroke="blue"
          stroke-width="5" fill="none"/>             
      <rect width="200" height="300" rx=20 fill="orange"></rect>
    </g>     
    <text x="50" y="50">yay</text>
   
</svg>

CSS

svg{
    width: 50%;
    height: 50%;
    position: absolute;
}