JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="w3SVG" width="256" height="145" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <desc>Example toap01 - simple text on a path</desc>

  <use xlink:href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

JavaScript

var image = new Image();
    var serializer = new XMLSerializer();
    var data = serializer.serializeToString(document.getElementById("w3SVG"));

    var blob = new Blob([data], {
        type: 'image/svg+xml'
    });

    var DOMURL = window.URL || window.webkitURL || window;
    var url = DOMURL.createObjectURL(blob);
	
	console.log("url:", url);

    image.onload = function () {

		var canvas = document.createElement("canvas");
		var ctx = canvas.getContext("2d");
		
		canvas.width = canvas.height = 256;
		document.body.appendChild(canvas);
		
		ctx.drawImage(image, 20, 20);
		
		//DOMURL.revokeObjectURL(url);
	}
	
	image.onerror = function (err) {
        //DOMURL.revokeObjectURL(url);
		console.log(err);
    }
	
	image.src = url;
	
	var canvas2 = document.createElement("canvas");
	var ctx2 = canvas2.getContext("2d");
	document.body.appendChild(canvas2);