<style>
  #tacho_svg circle {
  stroke: #666;
  stroke-width: 2em;
}
#tacho_svg .yellow  {
  stroke: #FF9F1E;
}

#tacho_svg .red {
  stroke: red;
}

#tacho_svg .green {
  stroke: green;
}
#tacho_svg .blue {
  stroke: violet;
}
#tacho_svg .pink {
  stroke: blue;
}
#tacho_svg .dark {
  stroke: darkblue;
}

#tacho_svg {
    border: 1px solid #555555;
}
#tage {

  margin: 0px auto;
  background:black;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  color: #ccc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

#RPM {
  font: bold 50px Verdana, Geneva, sans-serif;
}
#rpm_scale {
  font: 24px Verdana, Geneva, sans-serif;
}
#rpm_text {
  font: 24px Verdana, Geneva, sans-serif;
}
#rpm_hobbs {
  font: 20px Verdana, Geneva, sans-serif;
}
#rpm_pointer {
  stroke: white;
}
  #tage{
    border:2px solid red;
  }
</style>
<div id="tage">  
<h1 style="color:white">7-Tage-Inzidenz</h1>
<svg id="tacho_svg" viewBox="-250 -250 500 300" width="320" height="200">
   <defs>
        <style>
            line {
                stroke: white;
                stroke-width: 3px;
            }
          text {
                fill: white;
                text-anchor: middle;
                font-size: 22px;
                font-family: sans-serif;
            }
          #id {
                display: none;
            }
         rect {
                fill: transparent;
            }
          </style>
  </defs>
               <circle id="dark_arc" class="bar dark" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>    
             <circle id="pink_arc" class="bar pink" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>     
         <circle id="blue_arc" class="bar blue" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle> 
    <circle id="red_arc" class="bar red" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>

  
  <circle id = "yellow_arc" class="bar yellow" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>
 
      <circle id="green_arc" class="bar green" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>


  

  
  
  <g id="gauge" transform="rotate(-90)">
            <g id="noon">
                <rect x="-10" y="-220" width="20" height="100"/>
                <line x1="0" y1="-190" x2="0" y2="-180"/>
                <text x="0" y="-200"></text>
            </g>
        </g>
  
  <text id="RPM" x="0" y="-40"></text>
  <text id="rpm_scale" x="190" y="-210">0</text>
  <text id="rpm_text" x="-190" y="-210">0</text>
  <text id="rpm_hobbs" x="-180" y="40"></text>
  
  <path id="rpm_pointer" d="M0 120 L0 175" stroke-width="6" transform="rotate(172 0 0)"/>
  
</svg>
<script>
  async function getUpdate(){
  const data = await fetch('https://api.corona-zahlen.org/germany')
  const json = await data.json()
sieben=json.weekIncidence;
 
  document.getElementById('RPM').innerHTML=sieben.toFixed(2);
//sieben=1100;
 var green=false;
 var orange=false;
 var red=false;
 var blue=false;
 var pink=false;
  var end=12;
  var d=0;
  var z=0;
if(sieben<=50){
    var g=42,o=50,r=0, b=0, p=0, count=60;
  green='true';
  orange='true';
  red='true';
var s=0;
  z=60;
  
  
}
if(sieben>50 && sieben<=150){
    var g=16,o=32,r=50, b=0, p=0,count=160;
    green=true;
  orange=true;
  red=true;
  var s=0;
}

if(sieben>150 && sieben<=250){
    var g=10,o=20,r=238, b=50, p=0,count=260;
  var s=0;
  end=22;
  z=260;
}
 
if(sieben>250 && sieben<=500){
    var g=5,o=9,r=15, b=42, p=50,count=600;
  var s=10;
  end=20;
  z=600;
}
  

  
if(sieben>500 && sieben<=1000){
    var g=2,o=5,r=9, b=23, p=52,count=1100;
  var s=9;
  end=20;
  z=1100;
}

 if(sieben>1000 && sieben<=2000){
    var g=1,o=3,r=6, b=9, p=13,count=2100;
   d=24;
     var s=9;
  end=20;
   z=2100;
} 

  
var pos=((180/count*sieben)+90);
  document.getElementById('rpm_scale').innerHTML=z;

 document.getElementById('rpm_pointer').setAttribute('transform','rotate('+pos+' 0 0)');
 //if(green=='true'){ 
green_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-g/100));
 //}
 //if(yellow=='true'){ 
yellow_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-o/100));
 //}
 //if(red=='true'){ 
 red_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-r/100)); 
// }
 //if(blue=='true'){ 
blue_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-b/100));
// }
// if(pink=='true'){ 
pink_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-p/100));
// }
  pink_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-d/100));
  
for (i=s; i<=180; i = i + end) {
            var new_tick = noon.cloneNode(true);
            new_tick.getElementsByTagName('text')[0].textContent = (i/180 *count).toFixed(0);
            new_tick.removeAttribute("id");
            new_tick.setAttribute("transform", "rotate(" + i + " 0 0)");
            gauge.appendChild(new_tick);
        }
}
function createDayNode(){
  return function (obj) {
  }
}
function compareDate(){
  return function(a, b){
    return a - b 
  }
}

getUpdate()

  
</script>  
</div>