Two.js ArcSegments

index.slim

.row
  #draw-shapes
#controls
  .row
    .column.small-6
      label starting angle
      input#startAngle(type="range")
    
    .column.small-6
      label ending angle
      input#endAngle(type="range")

script.babel

function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else {
  document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function() {
  var elem = document.getElementById('draw-shapes');
  var two = new Two({
    width: 250,
    height: 250,
  }).appendTo(elem);

  var ir = 0;
  var or = 100;
  var sa = Math.PI;
  var ea = Math.PI;

  var arc;

  function updateArc() {
    if (arc) {
      two.remove(arc);
    }

    arc = two.makeArcSegment(
      two.width / 2, two.width / 2,
      ir, or,
      sa, ea
    );
    arc.stroke = "#001f3f";
    arc.linewidth = 1.5;

    two.update();
  }

  updateArc();

  function pctToRads(pct) {
    var proportion = parseFloat(pct) / 100;
    return proportion * 2 * Math.PI;
  }

  document.querySelector("#startAngle").addEventListener("input", function(evt) {
    sa = pctToRads(evt.target.value);
    console.log("startAngle: " + sa * 180 / Math.PI);
    updateArc();
  });
  document.querySelector("#endAngle").addEventListener("input", function(evt) {
    ea = pctToRads(evt.target.value);
    console.log("endAngle: " + ea * 180 / Math.PI);
    updateArc();
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.js"></script>

style.scss

body {
  text-align: center;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css" rel="stylesheet" />

two-js-arcsegments.markdown

Two.js ArcSegments

A Pen by Dylan Rosario on CodePen.

License.