JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" id="parent"></svg>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <clippath id="cut-off-bottom">
        <rect x="0" y="0" width="200" height="100" />
    </clippath>
    <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>

JavaScript

var _svgNS = 'http://www.w3.org/2000/svg';
var parent = document.getElementById('parent');

var clippath = document.createElementNS(_svgNS, 'clipPath');
clippath.setAttributeNS(null, 'id', 'clip');
parent.appendChild(clippath);

var rect = document.createElementNS(_svgNS, 'rect');
rect.setAttributeNS(null, 'x', '0');
rect.setAttributeNS(null, 'y', '0');
rect.setAttributeNS(null, 'width', '200');
rect.setAttributeNS(null, 'height', '100');
clippath.appendChild(rect);

var circle = document.createElementNS(_svgNS, 'circle');
circle.setAttributeNS(null, 'cx', '100');
circle.setAttributeNS(null, 'cy', '100');
circle.setAttributeNS(null, 'r', '100');
circle.setAttributeNS(null, 'clip-path', 'url(#clip)');
parent.appendChild(circle);