title: How to draw X Sign with SVG+CSS?
body: <p>I need to create an animation of "X" checkmark sign (for failure).</p>
  
  <p>I've found a great example of an animated "v" checkmark sign (for success).
  The code is using curve-bezier design.
  I've tried reading and trying to do an X sign but with no success.</p>
  
  <p>Can you please help me ? </p>
  
  <p>The link for the "v" checkmark is:
  <a href="http://codepen.io/haniotis/pen/KwvYLO" rel="noreferrer">http://codepen.io/haniotis/pen/KwvYLO</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) 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 #7ac142;
    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 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.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 #7ac142;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><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>
  </div>
  </div>
  </p>