checkmark in circle

by James

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="circle">
    <canvas class="checkmark"></canvas>
</div>

CSS

.circle {
    background-color: #f68d2e;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.checkmark {
    position: absolute;
    top: -5px;
    width: 165px;
    left: -20px;
}

JavaScript

var start = 70;
var mid = 90;
var end = 220;
var width = 7;
var leftX = start;
var leftY = start;
var rightX = mid + 2;
var rightY = mid - 3;
var animationSpeed = 12;

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

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



for (var idx = mid; idx < 130; idx++) {
    var drawRight = window.setTimeout(function () {
        ctx.beginPath();
        ctx.moveTo(leftX + 2, leftY - 3);
        ctx.lineTo(rightX, rightY);
        ctx.stroke();
        rightX++;
        rightY--;
    }, 1 + (idx * animationSpeed) / 3);
}