I was trying to add an svg graph to the MMM-Strava module made by @ianperrin.

The idea was to have a yearly or 4-week goal for an activity and having a progress bar showing how much of this goal you reached already .
So I wanted to implement this progress bar:
https://codepen.io/davatron5000/pen/jzMmME

Since we’re bound to Javascript from my understanding I have to set the DOM elements and attributes in the .js file.
I’ve tried it like this:

    createProgressBar: function() {
      var progressWrapper = document.createElement("div");
      //this.log("Created Progress Bar Div")
      progressWrapper.className = "progressBarDiv small";
      var svg = document.createElement("svg");
      svg.className = "progressSVG";
      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
      svg.setAttribute("height", "300px");
      svg.setAttribute("width", "300px");
      svg.setAttribute("viewBox", "0 0 300 300");
      svg.setAttribute("data-value", "40");
      progressBG = document.createElement("path");
      progressBG.className = "bg";
      progressBG.setAttribute("stroke", "#ccc");
      progressBG.setAttribute("d", "M41 149.5a77 77 0 1 1 117.93 0");
      progressBG.setAttribute("fill", "none");
      svg.appendChild(progressBG);
      progressWrapper.appendChild(svg);

      return progressWrapper;
    },

and this is the css:

.MMM-Strava .progressBarDiv {
    display: block;
    width: 300px;
    height: 300px;
}

.MMM-Strava svg {
    width: 300px;
    height: 300px;
}

.MMM-Strava .bg {
    will-change: auto;
    stroke-width: 20px;
    stroke-miterlimit: round;
    transition: stroke-dashoffset 850ms ease-in-out;
}

.MMM-Strava .progressWrapper {
  display: grid;
  justify-content: center;
  align-items: center;
}

Function is called and the wrapper div is returned without errors, but all i get is an empty div 300x300. The svg has a height/width of 0 and does not show anything.
What have I overseen.

Any help highly appreciated!