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;

SVGElement.prototype.setAttributes = function setAttributes(attrs) {
    var name;
    for (name in attrs) {
        if (attrs.hasOwnProperty(name)) {
            this.setAttribute(name, attrs[name]);
        }
    }
    return this;
};

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

pattern.setAttributes({
  id:'test',
  patternUnits: 'userSpaceOnUse',
  width: '10',
  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);');