SVG contenteditable Skills

index.html

<header>
<p>You may edit the percentages below:</p>
</header>
<div id="wrapper">
<div class="innerdiv" contenteditable>
<svg viewBox="10 10 30 30">
  <g id="alpha" transform="translate(25 25) rotate(-90)">
  <circle id="aCirc" r="10"  /> 
  <path id="aPath" d="" ></path>
  </g>
  <text id="aText" x="25" y="25" >19</text>
</svg>
  <p contenteditable="false">alpha skill</p>
</div> 
<div class="innerdiv" contenteditable>
<svg viewBox="10 10 30 30">
  <g id="beta" transform="translate(25 25) rotate(-90)"> 
  <circle id="bCirc" r="10"  /> 
  <path id="bPath" d=""  ></path>
  </g>
  <text id="bText" x="25" y="25" ><tspan>62</text> 
</svg>
   <p contenteditable="false">beta skill</p>
</div>  
<div class="innerdiv" contenteditable>
<svg viewBox="10 10 30 30">
  <g id="gama" transform="translate(25 25) rotate(-90)"> 
  <circle id="gCirc" r="10"  /> 
  <path id="gPath" d="" ></path>
  </g>
  <text id="gText" x="25" y="25" >62</text>
</svg>
  <p contenteditable="false">gama skill</p>
</div>
  </div>

script.babel

let rid = null;
const spring = 0.09;
const friction = 0.8;
let divs = Array.from(document.querySelectorAll(".innerdiv"));

class Chart {
  constructor(path,text,target) {
    this.path = path;
    this.text = text;
    this.text.textContent = target+"%";
    this.R = 10;
    this.start = .01;
    this.divisions = 100;
    this.vel = 0;    
    this.stylePath(target)    
  }
  
  stylePath(target) {
    let d = `M${this.R},0  A${this.R},${this.R} 0 1,1 ${this.R},-.01z`;
    this.path.setAttributeNS(null,"d",d);
    this.pathLength = this.path.getTotalLength();
    this.unit = this.pathLength / this.divisions;
    this.strokeLength = this.start*this.unit;
    this.target = target*this.unit;
    this.path.style.strokeDasharray = `${this.strokeLength},${this.pathLength -
      this.strokeLength}`;
    }
  
    updateStrokeLength() {
    this.dist = this.target - this.strokeLength;
    this.acc = this.dist * spring;
    this.vel += this.acc;
    this.vel *= friction;
    this.strokeLength += this.vel;
    this.path.style.strokeDasharray = `${this.strokeLength},${this.pathLength -
      this.strokeLength}`;
  }  
}

let charts = [];

charts.push(new Chart(aPath,aText,19));
charts.push(new Chart(bPath,bText,62));
charts.push(new Chart(gPath,gText,32));

function Frame() {
  rid = window.requestAnimationFrame(Frame);
  charts.map((c) => c.updateStrokeLength() )
}
Frame();

divs.map((div) =>{
  div.addEventListener("input", function(){  
charts.map((c) => {
 if(isNaN(parseInt(c.text.textContent))){c.text.textContent = 0+"%";}
  if(parseInt(c.text.textContent) > 100) {c.text.textContent = 100+"%";}
  if(rid){window.cancelAnimationFrame(rid)}
  c.target = (parseInt(c.text.textContent) || 0 ) * c.unit;
  if(!c.text.textContent.match("%"))
    {c.text.textContent += "%";}
  Frame();  
});  
});
});

scripts

<script src="https://codepen.io/enxaneta/pen/feac0eae1a56efd57f04e1bf75caeb59"></script>

style.css

body {
  background: #1e2730;
  font-family: Arial;
  font-weight: 100;
  color: rgba(0, 0, 0, 0.2);
}
header {
  height: 10vh;
  color: Linen;
  text-align: center;
}
header p {
  padding: 0.5em;
}
p {
  font-size:5vw;
  color:linen;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#wrapper {
  display: flex;
  flex-direction:column;
  align-items: center;
  /*height: 80vh;
  min-height:20em;*/
  width:80%;
  margin:0 auto;
  
}
.innerdiv{
  display: flex;
  flex-direction:column;
  align-items: center;
  outline: none;
}
svg {
  width:100%
}
circle {
  fill: none;
  stroke-width: 3;
  stroke: #24303a;
}
path {
  fill: transparent;
  stroke-width: 3;
  stroke-linecap: round;
}

#aPath {
  stroke: #1ed5f6;
}
#bPath {
  stroke: #f61ed5;
}
#gPath {
  stroke: #d5f61e;
}

text {
  dominant-baseline: central;
  text-anchor: middle;
  font-size: 5px;
  fill: Linen;
}

@media only screen and (min-width:480px) {
  #wrapper {
  display: flex;
  flex-direction:row;
  height: 60vh;
  min-height:20em;
}
  p {
    font-size:3vw;}
}

svg-contenteditable-skills.markdown

SVG contenteditable Skills

A Pen by Gabi on CodePen.

License.