JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
</defs>
<path d="M10,10 L20,300 300,150 z" />
</svg>

JavaScript

var SVG_NS =  $('svg')[0].namespaceURI;


pattern = document.createElementNS(SVG_NS,'pattern');

pattern.setAttribute('id','test');
 pattern.setAttribute('patternUnits', 'userSpaceOnUse');
pattern.setAttribute('width','10');
pattern.setAttribute('height','10');

//pattern.attr('id','test','id','test','patternUnits','userSpaceOnUse','width','10','height','10');


path = document.createElementNS(SVG_NS,'rect');
path.setAttribute('x','0');
path.setAttribute('y','0');
path.setAttribute('width','5');
path.setAttribute('height','5');
path.setAttribute('fill','lightblue');
pattern.appendChild(path);
path1 = document.createElementNS(SVG_NS,'rect');
path1.setAttribute('x','5');
path1.setAttribute('y','5');
path1.setAttribute('width','5');
path1.setAttribute('height','5');
path1.setAttribute('fill','lightblue');
pattern.appendChild(path1);

var defs = $('svg')[0].querySelector('defs');
defs.appendChild(pattern);

$('svg path')[0].setAttribute('style','fill: url(#test);');