JSFiddle - React, Tailwind, and code Playground

by chrisfrisina

HTML

<div id="radius-selector">
        </div>

JavaScript

function addSVGGradient(cx, cy, r, fx, fy) {
  var newElem = $('<defs><radialGradient id="areaGradient" gradientUnits="userSpaceOnUse" cx="' + cx + '" cy="' + cy + '" r="' + r + '" fx="' + fx + '" fy="' + fy + '"><stop offset="0%" stop-color="white" /><stop offset="100%" stop-color="orange" /></radialGradient></defs>');
  return newElem;
};
function addSVGElement(shape, type, cx, cy, r, stroke, fill, strokeWidth, radio, count) {
  // ID
    // type-shape1
    if (typeof count != 'undefined') {
      var id = type + "-" + shape + "-" + count;
    // tpye-shape
    } else {
      var id = type + "-" + shape;
    }
  // Data Type   area interval pulse ring
  //radio
    //!null
    // if (radio =!null) {
    // //null
    // } else {
    // }
  var newElem = $('<circle id="' + id + '" data-type="' + type + '" data-radio="' + radio + '" cx="' + cx + '" cy="' + cy + '" r="' + r + '" stroke="' + stroke + '" stroke-width="' + strokeWidth + '" fill="' + fill + '" />');
  return newElem;
};

$('#radius-selector').append([
    addSVGGradient( areaHorizontalCenter, areaVerticalCenter, radius, areaHorizontalCenter, areaVerticalCenter ),
    addSVGElement( "circle", "area", areaHorizontalCenter, areaVerticalCenter, radius, "grey", "url(#areaGradient)", "1", "listener" ), 
    addSVGElement( "circle", "interval", areaHorizontalCenter, areaVerticalCenter, radius, "grey", "none", "1", null, "1" ), 
    addSVGElement( "circle", "interval", areaHorizontalCenter, areaVerticalCenter, radius, "grey", "none", "1", null, "2" ), 
    addSVGElement( "circle", "interval", areaHorizontalCenter, areaVerticalCenter, radius, "grey", "none", "1", null, "3" ), 
    addSVGElement( "circle", "interval", areaHorizontalCenter, areaVerticalCenter, radius, "grey", "none", "1", null, "4" ), 
    addSVGElement( "circle", "pulse", areaHorizontalCenter, areaVerticalCenter, radius, "blue", "none", "10", null, "inner" ), 
    addSVGElement( "circle", "pulse", areaHorizontalCenter, areaVerticalCenter,...