<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.