<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; }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.