Let’s make animated checkmark

I made a cool animated checkmark with only css and html.

Let me explain “How it works?”

As you all now svgs contain paths and paths are essantially bezier curves and they have an ability to be drown partially.
There is a css 2 propereties to draw path partially:

stroke-dasharray is for customizing lengths of parts of the path that are drawn.
stroke-dashoffset is for moving or offsetting the dash array pattern start

In our use case we tell css that we need to show the checkmark fully and we move the shown pattern to the end of the path such so the checkmark is hidden.

stroke-dasharray: 158;
stroke-dashoffset: 158;

Then we create an keyframe animation and set the end state of the pattern offset to be the start(0)

@keyframes check_animate {
  100% {
    stroke-dashoffset: 0;
  }
}

Then we apply that animation we created to the path

animation: 3s forwards check_animate;

and it’s done.
I also animated a circle arround the checkmark the same way, but the path length is different.

How to get path lenght?

You need to use getTotalLength() js method on the path element and it will return path lenght. I used devtools to select element and executed this $0.getTotalLength() in the devtools console

Let’s make animated checkmark

Let me explain “How it works?”

The result