Create svg js

by schrodingers

HTML

<svg>

</svg>

CSS

path {
  cursor: pointer;
}

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

JavaScript

var XMAX = 500;
var YMAX = 500;
var _xx = 10;
var _reg = 180;
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;
}