JSFiddle - React, Tailwind, and code Playground

HTML

<div id="radius-selector" class="broadcaster">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2">
    <defs>
      <radialGradient id="rg" gradientUnits="userSpaceOnUse" cx="452.88" cy="455.2" r="317.016" fx="452.88" fy="265.2">
        <stop offset="0%" stop-color="white" stop-opacity="1"></stop>
        <stop offset="100%" stop-color="orange" stop-opacity="1"></stop>
      </radialGradient>
    </defs>
    <g>
      <circle id="area-circle" cx="452.88" cy="265.2" r="317.016" fill="url(#rg)" stroke="none" stroke-width="1" stroke-dasharray=""></circle>
      <circle id="center" cx="452.88" cy="265.2" r="6.34032" fill="blue" stroke="blue" stroke-width="1" stroke-dasharray=""></circle>
      <circle id="interval1" cx="452.88" cy="265.2" r="63.403200000000005" fill="none" stroke="grey" stroke-width="1" stroke-dasharray="5,5"></circle>
      <circle id="interval2" cx="452.88" cy="265.2" r="126.80640000000001" fill="none" stroke="grey" stroke-width="1" stroke-dasharray="5,5"></circle>
      <circle id="interval3" cx="452.88" cy="265.2" r="190.2096" fill="none" stroke="grey" stroke-width="1" stroke-dasharray="5,5"></circle>
      <circle id="interval4" cx="452.88" cy="265.2" r="253.61280000000002" fill="none" stroke="grey" stroke-width="1" stroke-dasharray="5,5"></circle>
      <circle id="pulse-outer1" cx="611.388" cy="106.69199999999998" r="158.508" fill="none" stroke="green" stroke-width="63.403200000000005" stroke-dasharray="">
        <animate id="pO1r" attributeName="r" from="0" to="221.9112" dur="2s" repeatCount="indefinite"></animate>
        <animate id="pO1o" attributeName="opacity" from="1" to="0" dur="2s" repeatCount="indefinite"></animate>
        <animate id="pO1s" attributeName="stroke-width" from="3" to="25" dur="2s" repeatCount="indefinite"></animate>
      </circle>
      <circle id="pulse-outer2" cx="294.37199999999996" cy="106.69199999999998" r="158.508" fill="none" stroke="green"...

JavaScript

function createRadiusSelector(ths, id, cx, cy, r, fx, fy) {
  var xmlns = 'http://www.w3.org/2000/svg';
  var div = document.getElementById('radius-selector');

  var svg = document.createElementNS(xmlns, 'svg');
    svg.setAttribute('xmlns', xmlns);
    svg.setAttribute('xmlns:xlink', "http://www.w3.org/1999/xlink");
    svg.setAttribute('version', '1.2');

  var defs = document.createElementNS(xmlns, 'defs');

  function createRadialGradient(id, gradientUnits, cx, cy, r, fx, fy){
    var rg = document.createElementNS(xmlns, 'radialGradient');
      rg.setAttribute('id', id);
      rg.setAttribute('gradientUnits', gradientUnits);
      rg.setAttribute('cx', cx);
      rg.setAttribute('cy', cy);
      rg.setAttribute('r', r);
      rg.setAttribute('fx', fx);
      rg.setAttribute('fy', fy);
    return rg;
  };

  function createStop(offset, sc, so){
    var stop = document.createElementNS(xmlns, 'stop');
      stop.setAttribute('offset', offset);
      stop.setAttribute('stop-color', sc);
      stop.setAttribute('stop-opacity', so);
    rg.appendChild(stop);
  }

  function createRing(id, cx, cy, r, fill, stroke, sw, sda){
    var ring = document.createElementNS (xmlns, 'circle');
      ring.setAttribute("id", id);
      ring.setAttribute("cx", cx);
      ring.setAttribute("cy", cy);
      ring.setAttribute("r", r);
      ring.setAttribute("fill", fill);
      ring.setAttribute("stroke", stroke);
      ring.setAttribute("stroke-width", sw);
      ring.setAttribute("stroke-dasharray", sda);
    g.appendChild(ring);
    return ring;
  }

  function createAnimate(parent, id, attr, from, to, dur, repeat){
    var pulse = document.createElementNS (xmlns, 'animate');
      pulse.setAttribute("id", id);
      pulse.setAttribute("attributeName", attr);
      pulse.setAttribute("from", from);
      pulse.setAttribute("to", to);
      pulse.setAttribute("dur", dur);
      pulse.setAttribute("repeatCount", repeat);
    parent.appendChild(pulse);
  }

  var rg =...