Gradient along SVG circle stroke CSS

Question

Is there a way to set a gradient along the stroke of an SVG circle? I am tryin to mimic Apple's activity rings.

body,
html {
  align-items: center;
  background: #222;
  display: flex;
  justify-content: center;
  color: #fff;
  min-height: 100%;
}

.screen {
  background: #222;
  display: inline-block;
  padding: 64px;
}

#app {
  height: 256px;
  width: 256px;
}

@-webkit-keyframes RingProgress {
  0% {
    stroke-dasharray: 0 100;
  }
}

@keyframes RingProgress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.ActivityRings {
  height: 100%;
  width: 100%;
}

.ActivityRings .ring {
  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;
}

.ring1 .background {
  stroke: rgba(197, 63, 61, 0.2);
}

.ring1 .completed {
  stroke: #c53f3d;
}

.ring2 .background {
  stroke: rgba(148, 213, 90, 0.2);
}

.ring2 .completed {
  stroke: #94d55a;
}

.ring3 .background {
  stroke: rgba(112, 190, 215, 0.2);
}

.ring3 .completed {
  stroke: #70bed7;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<div class="screen">
  <div id="app">

    <svg class="ActivityRings" viewBox='0 0 37 37'>
    <g class="ring ring1" 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="85, 100" />
    </g>
    <!-- Stroke width = 3 / scaling-factor  - SVG Essentials Chapter 5 -->
    <g class="ring ring2" 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="85, 100" />
    </g>
    <!-- Stroke width = 3 / scaling-factor - SVG Essentials Chapter 5 -->
    <g class="ring ring3" 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="85, 100" />
    </g>
</svg>

  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js'></script>

View full code on Codepen