JSFiddle - React, Tailwind, and code Playground

by Godly Mathew

HTML

<svg>
    
</svg>
<textarea id="abc"></textarea>

CSS

path{cursor:pointer} 
path:hover {
    opacity: 0.5;
    background-color:green;
  }

JavaScript

var XMAX = 500;
var YMAX = 500;
var _xx=10;
var _reg=100;
var _l=10;
// Create PATH element
for(var x=1;x<20;x++)
{
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute('d','M'+_l+' 100 Q 100  300 '+_l+' 500' );
pathEl.style.stroke = 'rgb('+(_reg)+',0,0)';
pathEl.style.strokeWidth = '5';
pathEl.style.fill = 'none';
    $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})});
    
document.querySelector('svg').appendChild(pathEl);
_l+=50;
}