<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
    <circle r="92" cx="204" cy="182" />
    <path d="M102,25L204,182L4,182z" />
  </svg>
</div>
.container { margin: 36px; }
svg { 
  display: block;
  margin: 0 auto;
  background: #fafafa;
}
circle, path {
  fill: none;
  stroke: black;
  animation: draw 3s linear infinite;
}
@keyframes draw { 
  to { stroke-dashoffset: 0 }
}
circle {
  stroke-dasharray: 577.76 ;
  stroke-dashoffset: 577.76;
}
path {
  stroke-dasharray: 572 ;
  stroke-dashoffset: 572;
}

/** Check out the blog post explaining how this works at https://andromedagalactic.com/blog/animating-drawing-svg-shapes-and-paths/ **/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.