<svg id="check-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 473.11 474.6">
    <defs>
        <style>.cls-1,.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}.cls-1{stroke-width:25px;}.cls-2{stroke-width:7px;}</style>
    </defs>
  <g id="circle">
        <path d="M229.09,53.5A187.5,187.5,0,0,1,361.67,373.58,187.5,187.5,0,1,1,96.51,108.42,186.24,186.24,0,0,1,229.09,53.5m0-15c-111.84,0-202.5,90.66-202.5,202.5s90.66,202.5,202.5,202.5,202.5-90.66,202.5-202.5S340.93,38.5,229.09,38.5Z"/>
    </g>
    <polyline id="mark" class="cls-1" points="99.84 198.5 229.24 331.5 434.34 112"/>
    
    <g id="highlights">
      <line class="cls-2" x1="64.59" y1="62.5" x2="23.59" y2="18.5"/>
      <line class="cls-2" x1="41.66" y1="81.91" x2="1.59" y2="61.5"/>
      <line class="cls-2" x1="82.18" y1="44.75" x2="68.59" y2="2.5"/>
      <line class="cls-2" x1="418.52" y1="56.07" x2="459.52" y2="12.07"/>
      <line class="cls-2" x1="431.46" y1="73.48" x2="471.52" y2="53.07"/>
      <line class="cls-2" x1="394.93" y1="45.33" x2="408.52" y2="3.07"/>
      <line class="cls-2" x1="406.52" y1="413.48" x2="447.52" y2="457.48"/>
      <line class="cls-2" x1="430.46" y1="395.07" x2="470.52" y2="415.48"/>
      <line class="cls-2" x1="381.93" y1="426.22" x2="395.52" y2="468.48"/>
      <line class="cls-2" x1="64.68" y1="414.53" x2="23.68" y2="458.53"/>
      <line class="cls-2" x1="41.74" y1="395.12" x2="1.68" y2="415.53"/>
      <line class="cls-2" x1="84.27" y1="428.27" x2="70.68" y2="470.53"/>
    </g>
</svg>
<div>Hover me! 
</div>
body {
  text-align: center;
}

#check-icon {
  width: 250px;
  height: auto;
}

#circle {
  fill: #1c55ff;
}

#highlights line, 
#mark {
  opacity: 0;
}

#check-icon:hover {
  #mark {
    stroke: #86cef7;
	  animation: check-animation 4s ease infinite;
	  stroke-dasharray: 500;
	  stroke-dashoffset: 500;
	  transform-origin: center;
    opacity: 1;
    transform: scale(0);
  }
  #highlights line {
    stroke: #7ff3f1;
    animation: highlight-animation 4s infinite;
    animation-delay: 1s;
  	stroke-dasharray: 30;
	  stroke-dashoffset: 200;
    opacity: 0;
}
  #circle {
    transition: all 0.4s ease;
    stroke: #86cef7;
    stroke-width: 3px;
  }
} 

@keyframes check-animation {
	50% {
		transform: scale(1.2);
	}
	100% {
		stroke-dashoffset: 0;
		transform: scale(1);
	}
}

@keyframes highlight-animation {
  to {
     stroke-dashoffset: 0; 
     opacity: 1;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.