-1
I was studying some sites and came across the site of the cafe pestle (https://www.pilao.com.br/).
If we hover over the menu it makes a very interesting animation. In the case of the image, the capsules menu:
My question would be this: The animation is done through some "animated gif" or is another type of feature?
Code:
<a class="x-main-menu__link" href="/nossos-cafes/capsulas" title="Cápsulas">
<svg xmlns="http://www.w3.org/2000/svg" width="24.523" height="24.068" viewBox="0 0 24.523 24.068" class="SVGcapsulas">
<path id="np_coffee-capsule_2729393_000000" d="M40.824,38.877a2.187,2.187,0,0,1-2.188,2.188H18.549a2.188,2.188,0,0,1-.7-4.28l1.014-2.851,1.458-13.713h0a.543.543,0,0,1,.142-.3l1.921-2.108a.571.571,0,0,1,.313-.175L26.4,17a.357.357,0,0,1,.1,0h4.2a.373.373,0,0,1,.08,0l3.7.631a.571.571,0,0,1,.315.175l1.91,2.111a.543.543,0,0,1,.142.3L38.3,33.932l1.014,2.851h0a2.186,2.186,0,0,1,1.508,2.092ZM18.549,39.971H38.626a1.1,1.1,0,0,0,0-2.209H18.549a1.1,1.1,0,0,0,0,2.209ZM35.8,20.829H21.372l-1.36,12.682H37.149Z" transform="translate(-16.3 -16.998)" fill="#41211F"></path>
</svg>
<p>Cápsulas</p></a>