<svg class="shape" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  
  <g class="g-circles" fill="none">
    <circle class="circle"
        r="95" 
        cx="100" 
        cy="100"
        stroke-width="5"   
        stroke="crimson"
        stroke-linecap="round"
        stroke-opacity=".7"
    />
    <circle class="circle2"
        r="95" 
        cx="100" 
        cy="100"
        stroke-width="1"
        stroke="green"
        stroke-opacity=".3"
    />
  </g>
  
</svg>

<p class="info"></p>


<!-- usefull links:
https://css-tricks.com/svg-line-animation-works/

-->

body {
  margin: 4em auto;
  text-align: center;
}

.shape {
  transform: rotate(-90deg);
  filter: drop-shadow(5px 5px 15px crimson);
}

.circle {
  animation: dash 4s linear normal 3;
  stroke-width: 10;
}


@keyframes dash {
  from {
    stroke-dashoffset: var(--num);
  }
  to {
    stroke-dashoffset: 0;
  }
}

var info = document.querySelector('.info');
var circle = document.querySelector('.circle');
var length = circle.getTotalLength();

window.addEventListener("load", function() {
  circle.style.setProperty('--num', length);
});

circle.style.strokeDasharray = length;
//circle.style.strokeDashoffset = length - 10;

info.textContent = 'Circle length = ' + length;