JSFiddle - React, Tailwind, and code Playground

JavaScript

// NON-IFRAME:
document.body.appendChild(makeSVG(document));
// IFRAME:
var iframe = document.createElement('iframe');
iframe.width = 200;
iframe.height = 200;
document.body.appendChild(iframe);
var win = iframe.contentWindow;
setTimeout(function() {
  var iframeSVG = makeSVG(win.document);
  win.document.body.appendChild(iframeSVG);
}, 500);

function makeSVG(doc) {

    console.log(doc, doc.body);

    function create(n) {
        return doc.createElementNS('http://www.w3.org/2000/svg', n);
    }
    var svg = create('svg');
    svg.setAttribute('width', 200);
    svg.setAttribute('height', 200);
    var defs = svg.appendChild(create('defs'));
    
    var path = create('path');
    path.setAttribute('d', 'M 10 10 l 100 100 l -100 0 l 0 -100');
    path.setAttribute('stroke', 'red');
    path.setAttribute('stroke-width', 2);
    
    var grad = create('linearGradient');
    grad.setAttribute('id', 'foo');
    var stop = grad.appendChild(create('stop'));
    stop.setAttribute('offset', '0%');
    stop.setAttribute('stop-color', 'red');
    stop.setAttribute('stop-opacity', 1);
    var stop = grad.appendChild(create('stop'));
    stop.setAttribute('offset', '100%');
    stop.setAttribute('stop-color', 'yellow');
    stop.setAttribute('stop-opacity', 1);
    defs.appendChild(grad);
    svg.appendChild(path);
    path.setAttribute('fill', 'url(#foo)');
    return svg;
}