<svg class="svg" x="0px" y="0px"
viewBox="0 0 135 110">
<rect class="box" x="5" y="5" width="100" height="100" transform="rotate(90 55 55)"/>
<path class="check" d="M126.8,14L55.7,85.1L29.2,63.4"/>
</svg>
.svg {
display: block;
width: 100px;
margin: 8rem auto;
}
.svg .check {
stroke: #cc181e; /*red*/
stroke: #387ea9; /*blue*/
fill: none;
stroke-width: 12;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: check .75s linear forwards;
}
.svg .box {
stroke: #cc181e; /*red*/
stroke: #387ea9; /*blue*/
stroke-width: 12;
fill: none;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: draw 1s linear forwards;
}
@keyframes draw {
0% { stroke-dashoffset: -400; }
100% { stroke-dashoffset: 400; }
}
@keyframes check {
0% { stroke-dashoffset: -400; }
100% { stroke-dashoffset: 0; }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.