Draw a check mark CSS animation from left down to right up
Solution 1
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>
Solution 2
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>
wordSmith
Updated on June 07, 2022Comments
-
wordSmith almost 2 years
I'm trying to draw a check mark from the left going down to the right going up with CSS animations. I got the left going down part, but going back up doesn't seem to working. It goes from right to down. Does anyone know how I can make this smoother and actually look like a check being drawn?
setTimeout(function() { $('#kick').addClass('draw2'); }, 500);
#kick { height: 150px; width: 20px; background: green; -webkit-transform: rotate(45deg); position: relative; top: -24px; left: 273px; } #stem { height: 60px; width: 20px; background: green; -webkit-transform: rotate(-45deg); position: relative; top: 100px; left: 200px; } @-webkit-keyframes draw1 { from { height: 0; } to { height: 60px } } @-webkit-keyframes draw2 { from { height: 0; } to { height: 150px; } } .draw1 { -webkit-animation-name: draw1; -webkit-animation-duration: 0.5s; } .draw2 { -webkit-animation-name: draw2; -webkit-animation-duration: 0.5s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="checkmark"> <div class="draw1" id="stem"></div> <div id="kick"></div> </span>
I'd greatly appreciate any help in getting this animation right! Also, since I'm using jQuery anyway, if this can be done more efficiently in jQuery/JavaScript, that's fine too.
-
PhoonOne almost 9 yearsHow do you make the animation once draw once and stay on the screen? For the SVG examples @chipChocolate.py
-
Weafs.py almost 9 years@JennyC Oops sorry I missed that question, @Jonathan is correct, remove
infinite
from theanimation
and-webkit-animation
. -
Lukas over 8 yearsExactly what I wanted, easy to implement, thank you!!
-
Master.Deep over 8 yearsThis works cool in firefox and chrome.But not working in IE9.Do you have a workaround for ie
-
Michiel about 8 years@Master.Deep you need to set the animation-play-state property to 'forward' to make it stay on the screen:
animation
and-webkit-animation
should be set todraw 2s ease forwards