Quick and dirty activity rings clone in SVG

rings.php

<!-- thanks to https://codepen.io/webslingerm/pen/GXxxVx -->

<?php
$move = $_GET["move"] ? $_GET["move"] : 0;
$exercise = $_GET["exercise"] ? $_GET["exercise"] : 0;
$stand = $_GET["stand"] ? $_GET["stand"] : 0;
?>

<style type="text/css">
@-webkit-keyframes RingProgress {
  0% {
    stroke-dasharray: 0 100;
  }
}

@keyframes RingProgress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.ActivityRings {
  height: 100%;
  width: 100%;
}
.ActivityRings .ring {
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
}
.ActivityRings .completed {
  -webkit-animation: RingProgress 1s ease-in-out forwards;
          animation: RingProgress 1s ease-in-out forwards;
  stroke-linecap: round;
}
.ActivityRings circle {
  fill: none;
}

.ring-move .background {
  stroke: rgba(197, 63, 61, 0.2);
}
.ring-move .completed {
  stroke: #c53f3d;
}

.ring-exercise .background {
  stroke: rgba(148, 213, 90, 0.2);
}
.ring-exercise .completed {
  stroke: #94d55a;
}

.ring-stand .background {
  stroke: rgba(112, 190, 215, 0.2);
}
.ring-stand .completed {
  stroke: #70bed7;
}
.ring-container {
    background: black;
    width: 200px;
    height: 200px;
}
</style>

<div class="ring-container">
<svg class="ActivityRings" viewBox='0 0 37 37'>
    <g class="ring ring-move" style="transform: scale(1) rotate(-90deg);">
        <circle stroke-width="3" r="15.915" cx="50%" cy="50%" class="background" />
        <circle stroke-width="3" r="15.915" cx="50%" cy="50%" class="completed" stroke-dasharray="<?= $move ?>, 100" />
    </g>
    <g class="ring ring-exercise" style="transform: scale(0.75) rotate(-90deg);">
        <circle stroke-width="4" r="15.915" cx="50%" cy="50%" class="background" />
        <circle stroke-width="4" r="15.915" cx="50%" cy="50%" class="completed" stroke-dasharray="<?= $exercise ?>, 100" />
    </g>
    <g class="ring ring-stand" style="transform: scale(0.5) rotate(-90deg);">
        <circle stroke-width="6" r="15.915" cx="50%" cy="50%" class="background" />
        <circle stroke-width="6" r="15.915" cx="50%" cy="50%" class="completed" stroke-dasharray="<?= $stand ?>, 100" />
    </g>
</svg>
</div>