JSFiddle - React, Tailwind, and code Playground

by fredericklim

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
   <defs>
      <linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
         <stop offset="0" stop-color="black" />
         <stop offset="1" stop-color="white" />
      </linearGradient>
      <mask id="myMask" x="0" y="0" width="100%" height="100%">
         <rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)" />
      </mask>
      <text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
   </defs>
   <g mask="url(#myMask)">
      <use xlink:href="#myText" transform="translate(0,-50) " fill="red " />
      <use xlink:href="#myText" transform="translate(0,0)" fill="green"  />
      <use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
   </g>
</svg>

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
      <linearGradient id="Gradient1">
         <stop class="stop1" offset="0%"/>
         <stop class="stop2" offset="50%"/>
         <stop class="stop3" offset="100%"/>
      </linearGradient>
      <style type="text/css"><![CDATA[
      #rect1 { fill: url(#Gradient1); }
      .stop1 { stop-color: red; }
      .stop2 { stop-color: black; stop-opacity: 0; }
      .stop3 { stop-color: green; }
      ]]></style>
   </defs>

   <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
2)"/>

</svg>


<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
         <stop offset="0%" stop-color="red"/>
         <stop offset="50%" stop-color="black" stop-opacity="0"/>
         <stop offset="100%" stop-color="green"/>
      </linearGradient>
   </defs>

   <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>

</svg>