Draw a check mark CSS animation from left down to right up

Well, this is my approach using <canvas> and JavaScript.

Demo on Fiddle -----> Square Corners | Round Corners

(Note: To change the animation speed increment or decrement the variable animationSpeed. Lower number yeilds Higher speed)

var start = 100;
var mid = 145;
var end = 250;
var width = 20;
var leftX = start;
var leftY = start;
var rightX = mid - (width / 2.7);
var rightY = mid + (width / 2.7);
var animationSpeed = 20;

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
ctx.lineWidth = width;
ctx.strokeStyle = 'rgba(0, 150, 0, 1)';

for (i = start; i < mid; i++) {
  var drawLeft = window.setTimeout(function() {
    ctx.beginPath();
    ctx.moveTo(start, start);
    ctx.lineTo(leftX, leftY);
    ctx.stroke();
    leftX++;
    leftY++;
  }, 1 + (i * animationSpeed) / 3);
}

for (i = mid; i < end; i++) {
  var drawRight = window.setTimeout(function() {
    ctx.beginPath();
    ctx.moveTo(leftX, leftY);
    ctx.lineTo(rightX, rightY);
    ctx.stroke();
    rightX++;
    rightY--;
  }, 1 + (i * animationSpeed) / 3);
}
<canvas height="160"></canvas>

You could also do this using svg and CSS animation.

1. Square Corners:

#check {
  fill: none;
  stroke: green;
  stroke-width: 20;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  -webkit-animation: draw 2s infinite ease;
  animation: draw 2s infinite ease;
}
-webkit-@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
<svg width="150" height="150">
  <path id="check" d="M10,30 l30,50 l95,-70" />
</svg>

2. Round Corners:

#check {
  fill: none;
  stroke: green;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: draw 2s infinite ease;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
<svg width="150" height="150">
  <path id="check" d="M10,50 l25,40 l95,-70" />
</svg>

I wanted a checkmark that looked like the material done icon, so I adjusted the original answer a little. Posting it here in case it saves someone a bit of time.

.animated-check {
  height: 10em;
  width: 10em;
}

.animated-check path {
  fill: none;
  stroke: #7ac142;
  stroke-width: 4;
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  animation: draw 1s linear forwards;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
<svg class="animated-check" viewBox="0 0 24 24">
  <path d="M4.1 12.7L9 17.6 20.3 6.3" fill="none"/>
</svg>

Tags:

Javascript

Html

Css

Jquery

Animation

Recent Posts