title: CSS Animated Checkmark
body: <p>I want crate a animated Check-mark CSS(animating drawing of check mark with SVG animation), I tried like the following code but it does not work.what do I do?</p>
  
  <p><strong>DEMO:</strong> <a href="https://jsfiddle.net/b7Ln0jns/" rel="noreferrer">https://jsfiddle.net/b7Ln0jns/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>@import "bourbon";
  
  $color--green: #7ac142;
  $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
  
  .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: $color--green;
    fill: none;
    animation: stroke .6s $curve forwards;
  }
  
  .checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px $color--green;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  }
  
  .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke .3s $curve .8s forwards;
  }
  
  @keyframes stroke {
    100% {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes scale {
    0%, 100% {
      transform: none;
    }
    50% {
      transform: scale3d(1.1, 1.1, 1);
    }
  }
  
  @keyframes fill {
    100% {
      box-shadow: inset 0px 0px 0px 30px $color--green;
    }
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>&lt;svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"&gt;&lt;circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/&gt;&lt;path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/&gt;&lt;/svg&gt;
  </code></pre>