HTML
<svg width="300px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
<title>Group 5</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="1.44057081%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
<stop stop-color="#99EE62" offset="0%"></stop>
<stop stop-color="#23F7AD" offset="100%"></stop>
</linearGradient>
<mask id="fill-mask">
<rect class="mask-rect" fill="#ffffff" />
</mask>
</defs>
<path d="M66.0079118,16 L0,16 L0,15 L66.0079118,15 C66.2718643,6.67099168 73.1068853,3.31814699e-15 81.5,1.77635684e-15 C90.0604136,-1.57252247e-15 97,6.93958638 97,15.5 C97,24.0604136 90.0604136,31 81.5,31 C73.1068853,31 66.2718643,24.3290083 66.0079118,16 Z" id="Combined-Shape" fill="#fff"></path>
<path d="M66.0079118,16 L0,16 L0,15 L66.0079118,15 C66.2718643,6.67099168 73.1068853,3.31814699e-15 81.5,1.77635684e-15 C90.0604136,-1.57252247e-15 97,6.93958638 97,15.5 C97,24.0604136 90.0604136,31 81.5,31 C73.1068853,31 66.2718643,24.3290083 66.0079118,16 Z" fill=url(#linearGradient-1) id="Combined-Shape" mask=url(#fill-mask)></path>
</svg>
CSS
html, body {
background-color: #e74c3c;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.mask-rect {
animation: fill 2s ease-in-out infinite;
}
@keyframes fill {
0% { width: 0; }
50% { width: 100%; }
100% { width: 0; }
}
