svg donut

by jpeter06

HTML

<textarea  id="ta" class="ta"></textarea>

<svg viewBox="0 0 100 100" width="50%" height="50%">
    <path fill="tomato"
        d="M 100 50
          A 50 50 0 0 0 85.35499 14.64500
          L 71.213 28.78700
          A 30 30 0 0 1 80 50"
  />
</svg>

CSS

html, body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  overflow:hidden;
}
.ta{
  width:100%;
}

JavaScript

function getCoordFromDegrees(angle, radius, svgSize) {
    const x = Math.cos(angle * Math.PI / 180);
    const y = Math.sin(angle * Math.PI / 180);
    const coordX = x * radius + svgSize / 2;
    const coordY = y * -radius + svgSize / 2;
    return [coordX, coordY];
}

var ta = document.getElementById('ta');
ta.value = 'value:' + getCoordFromDegrees(45, 50, 100);