JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <text x="5" y="5" font-family="Verdana" font-size="25" fill="skyblue">
  <tspan alignment-baseline="text-before-edge">
    Texto de prueba para 1 para x e y
  </tspan>
  <tspan x="5" y="35" alignment-baseline="text-before-edge">
      Texto de prueba para 2 para x e y
  </tspan>
</text>
    
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
    <line x1="0" y1="0" x2="200" y2="100"
          style="stroke:red;stroke-width:2"/>
    
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
   <defs>
      <radialGradient id="gradient" cx="50%" cy="50%" r="50%"
      fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(200,200,200);
      stop-opacity:0"/>
      <stop offset="100%" style="stop-color:rgb(0,0,255);
      stop-opacity:1"/>
      </radialGradient>
   </defs>
   <ellipse cx="100" cy="50" rx="100" ry="50" 
      style="fill:url(#gradient)" />
</svg>
</svg>