JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="https://s3.amazonaws.com/www.chicagogrooves.com/js/meteor-reactive-packages.js"></script>
<h1>Make a Pac-Man</h1>
<p>
An interactive tutorial for playing with properties of an SVG Arc command, part of the SVG Path Spec.

Inspiration: <a href="http://tutorials.jenkov.com/svg/path-element.html#arcs">Jenkov's tutorial</a>. 
</p>
<p>
Suggestion: Open Dev Tools and watch the path of the SVG change as you fiddle with the parameters. Go to the <a href="http://meteorpad.com/pad/EGBof8H6ztcusmcbv/SVG">MeteorPad</a> to see the full source.
</p>
  
  <form novalidate="novalidate">

  <div class="form-group">
      
    <div class="form-group">
    
    <label class="control-label">Radius</label>
    
    <input type="range" name="radius" required="" data-schema-key="radius">    

    <span class="help-block"></span>
  </div>    
    <div class="form-group">
    <label class="control-label">Close the Path?</label>
    <div class="af-radio-group" data-schema-key="closed">
    
      <div class="radio">
        <label>
          <input type="radio" value="0" name="closed" required="" checked="1">
          0
        </label>
      </div>
    
      <div class="radio">
        <label>
          <input type="radio" value="1" name="closed" required="">
          1
        </label>
      </div>
  </div>    
    <span class="help-block"></span>
  </div>    
    <div class="form-group">
    <label class="control-label">Sweep</label>
    <div class="af-radio-group" data-schema-key="sweep">
      <div class="radio">
        <label>
          <input type="radio" value="0" name="sweep" required="">
          0
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" value="1" name="sweep" required="" checked="1">
          1
        </label>
      </div>
  </div>    
    <span class="help-block"></span>
  </div>    
    <div...

JavaScript

arc = new ReactiveObject({
  radius: 50,
  closed: 0,
  sweep: 1,
  largeArc: 1
});
  
$("input[type=range]").on("input", function(e){
 arc.radius = Number($(this).val());
});

$("input[type=radio]").on("change", function (e) {
  var name = $(this).attr('name');
  arc[name] = Number($("input[name=" + name + "]:checked").val())
});

Tracker.autorun(function(){
    $("#line-arc").attr("d", 
        "M 100,90 L220,60  A "+
        arc.radius + "," + arc.radius +
        " 1 " + arc.largeArc +
        "," + arc.sweep +
        " 220,140" + (arc.closed==1 ? "Z" : ""));
});