HTML
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="46px" height="35px" viewBox="0 0 46 35" enable-background="new 0 0 46 35" xml:space="preserve">
<defs>
<clipPath id="check">
<path fill="#00388A" d="M10.684,33.527L0.518,23.359c0,0-0.5-4.166,3.833-4.166c3.5,3.166,8.833,8.166,8.833,8.166L40.852,1.527
c0,0,4.832-0.666,3.666,4c-3.834,4.166-28.667,27-29.5,27.833C14.184,34.193,12.851,35.359,10.684,33.527z"/>
</clipPath>
</defs>
</svg>
<div class="icon">
<div class="circle">
<div class="check"></div>
</div>
</div>
SCSS
*, *::after, *::before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html, body {
background: linear-gradient(to left, #ef32d9, #89fffd);
}
.icon {
width: 260px;
height: 260px;
background: white;
border-radius: 60px;
margin: 10% auto;
position: relative;
box-shadow: 0px 3px 7px -1px #333;
text-align: center;
padding-top: 31px;
&::before {
content: "";
display: block;
width: 198px;
height: 198px;
background-image: linear-gradient(to right, #ef4dbc, #bc4bfd, #5c9cfe, #24cffb);
border-radius: 50%;
margin: 0 auto;
animation: rotate 2s linear infinite;
}
.circle {
width: 185px;
height: 185px;
background: white;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -92px;
margin-top: -92px;
}
.check {
width: 120px;
height: 120px;
position: absolute;
background-image: linear-gradient(to right, #ef4dbc, #bc4bfd, #5c9cfe, #24cffb);
transform: scale(2);
margin-top: 115px;
margin-left: 105px;
-webkit-clip-path: url(#check);
-moz-clip-path: url(#check);
-o-clip-path: url(#check);
clip-path: url(#check);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
