Hello All, I have created a SVG code and it animates on hover which works very well. I only need help with the follow:
When I hover, the animation is infinite and alternate. when I hover out the icon just disappear. What I want to do is, when the mouse stays in hover; the icon moves and stops in position and when I hover out; the icon goes back to its original state. Any ideas?
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<title>Anime Js - Training</title>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 626 765" style="enable-background:new 0 0 626 765;" xml:space="preserve">
<g id="browser">
<g class="st0">
<defs>
<path id="SVGID_1_" class="st0" d="M28.1,78.6c-0.4-0.2-0.8-0.9-0.8-1.3"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st1">
<path class="st2" d="M27.4,77.6c0-0.1,0-0.2,0-0.3"/>
<path class="st2" d="M27.3,77.3"/>
<path class="st3" d="M27.5,77.9c-0.1-0.1-0.1-0.3-0.1-0.4"/>
<path class="st3" d="M27.4,77.6"/>
<path class="st4" d="M27.7,78.2c-0.1-0.1-0.1-0.2-0.2-0.3"/>
<path class="st4" d="M27.5,77.9"/>
<path class="st5" d="M28.1,78.6c-0.2-0.1-0.3-0.2-0.4-0.4"/>
<path class="st5" d="M27.7,78.2"/>
</g>
</g>
<g>
<polyline class="st6" points="27.3,77.3 27.4,41.6 35.9,36.7 "/>
</g>
<g>
<path class="st7" d="M28.1,78.6"/>
</g>
<g>
<line class="st8" x1="28.2" y1="41.1" x2="36.7" y2="36.2"/>
</g>
<g>
<path class="st9" d="M82.1,72.2c0.4,0.2,0.8,0.9,0.8,1.3l-0.1,35.7c0,0.5-0.4,0.7-0.8,0.4L28.1,78.6c-0.4-0.2-0.8-0.9-0.8-1.3
l0.1-35.7c0-0.5,0.4-0.7,0.8-0.4L82.1,72.2z"/>
</g>
<path class="st5" d="M466,623.8l-101.3-58.5c-0.4-0.2-0.7-0.4-1-0.7c-0.1-0.1-0.2-0.1-0.3-0.2c-0.3-0.2-0.5-0.4-0.8-0.6
c-0.1-0.1-0.2-0.2-0.3-0.2c-0.7-0.5-1.3-1.2-1.9-1.8c-0.1-0.1-0.2-0.2-0.3-0.3c-0.2-0.2-0.4-0.5-0.7-0.8c-0.1-0.1-0.2-0.2-0.3-0.3
c-0.3-0.4-0.6-0.7-0.8-1.1c-0.4-0.6-0.9-1.2-1.3-1.9c-0.1-0.1-0.2-0.3-0.2-0.4c-0.4-0.6-0.7-1.3-1-1.9c-0.1-0.2-0.2-0.4-0.3-0.7
c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.2-0.2-0.5-0.3-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.2-0.2-0.5-0.2-0.7c-0.1-0.2-0.1-0.4-0.2-0.7
c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.1-0.4-0.2-0.7c-0.1-0.4-0.2-0.8-0.2-1.2c0-0.1,0-0.1,0-0.2c-0.1-0.4-0.1-0.7-0.1-1
c0-0.1,0-0.2,0-0.3c0-0.4-0.1-0.8,0-1.2l0.1-39.1l-79.6-45.9c-0.6-0.3-1.1-0.7-1.6-1c-0.2-0.1-0.3-0.2-0.5-0.3
c-0.4-0.3-0.8-0.6-1.2-0.9c-0.2-0.1-0.3-0.2-0.5-0.4c-0.5-0.4-1-0.9-1.5-1.3c0,0,0,0,0,0c-0.5-0.5-1-1-1.5-1.5
c-0.1-0.2-0.3-0.3-0.4-0.5c-0.4-0.4-0.7-0.8-1-1.2c-0.1-0.2-0.3-0.3-0.4-0.5c-0.4-0.5-0.9-1.1-1.3-1.7c0,0,0,0,0,0
c-0.4-0.6-0.9-1.2-1.3-1.8c-0.1-0.2-0.3-0.4-0.4-0.6c-0.3-0.4-0.5-0.9-0.8-1.3c-0.1-0.2-0.3-0.5-0.4-0.7c-0.2-0.4-0.5-0.9-0.7-1.3
c-0.1-0.2-0.2-0.5-0.4-0.7c-0.2-0.4-0.4-0.8-0.5-1.2c-0.2-0.3-0.3-0.7-0.5-1c-0.2-0.4-0.3-0.8-0.5-1.1c-0.1-0.3-0.3-0.7-0.4-1
c-0.1-0.4-0.3-0.8-0.4-1.2c-0.1-0.3-0.2-0.7-0.3-1c-0.1-0.4-0.2-0.8-0.3-1.2c-0.1-0.3-0.2-0.7-0.3-1c-0.1-0.6-0.3-1.3-0.4-1.9
c0-0.1,0-0.2,0-0.4c-0.1-0.5-0.1-1.1-0.2-1.6c0-0.2,0-0.4,0-0.5c0-0.6-0.1-1.3-0.1-1.9l0.2-53l-63.3-36.6c-0.4-0.2-0.7-0.4-1-0.7
c-0.1-0.1-0.2-0.1-0.3-0.2c-0.3-0.2-0.5-0.4-0.8-0.6c-0.1-0.1-0.2-0.2-0.3-0.2c-0.3-0.3-0.7-0.6-1-0.9c0,0,0,0,0,0
c-0.3-0.3-0.6-0.6-0.9-0.9c-0.1-0.1-0.2-0.2-0.3-0.3c-0.2-0.2-0.4-0.5-0.7-0.8c-0.1-0.1-0.2-0.2-0.3-0.3c-0.3-0.4-0.6-0.7-0.8-1.1
c0,0,0,0,0,0c-0.4-0.6-0.9-1.2-1.3-1.9c-0.1-0.1-0.2-0.3-0.2-0.4c-0.4-0.6-0.7-1.3-1-1.9c-0.1-0.2-0.2-0.4-0.3-0.7
c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.2-0.2-0.5-0.3-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.2-0.2-0.5-0.2-0.7c-0.1-0.2-0.1-0.4-0.2-0.7
c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.1-0.4-0.2-0.7c-0.1-0.4-0.2-0.8-0.2-1.2c0-0.1,0-0.2,0-0.2c-0.1-0.3-0.1-0.7-0.1-1
c0-0.1,0-0.2,0-0.3c0-0.4-0.1-0.8,0-1.2l0.2-81.4c0-0.4,0-0.8,0.1-1.2c0-0.1,0-0.2,0-0.3c0-0.3,0.1-0.5,0.1-0.8
c0-0.1,0-0.2,0.1-0.3c0.1-0.3,0.1-0.6,0.2-0.9c0,0,0-0.1,0-0.1c0.1-0.2,0.2-0.4,0.2-0.6c0.1-0.1,0.1-0.3,0.2-0.4
c0.1-0.2,0.2-0.4,0.3-0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.2,0.3-0.4,0.4-0.6c0,0,0.1-0.1,0.1-0.2c0.2-0.2,0.4-0.4,0.6-0.6
c0.2-0.2,0.5-0.4,0.7-0.5l-8.5,4.9c-0.3,0.1-0.5,0.3-0.7,0.5c0,0,0,0,0,0c-0.2,0.2-0.4,0.4-0.6,0.6c0,0-0.1,0.1-0.1,0.2
c-0.2,0.2-0.3,0.4-0.4,0.6c-0.1,0.1-0.1,0.2-0.2,0.3c-0.1,0.2-0.2,0.3-0.3,0.5c-0.1,0.1-0.1,0.3-0.2,0.4c-0.1,0.2-0.2,0.4-0.2,0.5
c0,0,0,0,0,0c0,0,0,0.1,0,0.1c-0.1,0.3-0.2,0.6-0.2,0.8c0,0.1,0,0.2-0.1,0.3c0,0.3-0.1,0.5-0.1,0.8c0,0.1,0,0.2,0,0.3
c0,0.4-0.1,0.8-0.1,1.2l-0.2,81.4c0,0.4,0,0.8,0,1.2c0,0.1,0,0.2,0,0.3c0,0.3,0.1,0.7,0.1,1c0,0.1,0,0.2,0,0.2
c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0.1,0,0.1c0.1,0.2,0.1,0.4,0.2,0.7c0.1,0.2,0.1,0.5,0.2,0.7c0.1,0.2,0.1,0.4,0.2,0.7
c0.1,0.2,0.2,0.5,0.2,0.7c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.2,0.2,0.3,0.2,0.5
c0,0,0.1,0.1,0.1,0.1c0.3,0.7,0.7,1.3,1,1.9c0.1,0.1,0.2,0.3,0.2,0.4c0.4,0.6,0.8,1.3,1.3,1.9c0.3,0.4,0.6,0.7,0.8,1.1
c0.1,0.1,0.2,0.2,0.3,0.3c0.2,0.3,0.4,0.5,0.7,0.8c0.1,0.1,0.2,0.2,0.3,0.3c0.6,0.6,1.3,1.3,1.9,1.8c0.1,0.1,0.2,0.2,0.3,0.2
c0.2,0.2,0.5,0.4,0.8,0.6c0.1,0.1,0.2,0.1,0.3,0.2c0.3,0.2,0.7,0.5,1,0.7l63.3,36.6l-0.2,53c0,0.6,0,1.3,0.1,1.9c0,0.2,0,0.4,0,0.5
c0.1,0.5,0.1,1.1,0.2,1.6c0,0.1,0,0.2,0,0.4c0.1,0.6,0.2,1.1,0.3,1.7c0,0.1,0,0.2,0.1,0.2c0.1,0.3,0.2,0.7,0.3,1
c0.1,0.4,0.2,0.8,0.3,1.2c0.1,0.4,0.2,0.7,0.3,1.1c0.1,0.4,0.2,0.8,0.4,1.2c0.1,0.4,0.3,0.7,0.4,1c0.2,0.4,0.3,0.8,0.5,1.1
c0.1,0.3,0.3,0.7,0.5,1c0.1,0.3,0.2,0.5,0.4,0.8c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.5,0.4,0.7c0.2,0.4,0.5,0.9,0.7,1.3
c0.1,0.2,0.3,0.5,0.4,0.7c0.3,0.4,0.5,0.9,0.8,1.3c0.1,0.2,0.2,0.4,0.4,0.6c0.4,0.6,0.8,1.2,1.3,1.8c0,0,0,0,0,0c0,0,0,0,0,0
c0.4,0.6,0.9,1.1,1.3,1.7c0.1,0.2,0.3,0.3,0.4,0.5c0.3,0.4,0.7,0.8,1,1.2c0.1,0.2,0.3,0.3,0.4,0.5c0.5,0.5,1,1,1.5,1.5c0,0,0,0,0,0
c0.5,0.5,1,0.9,1.5,1.3c0.2,0.1,0.3,0.2,0.5,0.4c0.4,0.3,0.8,0.6,1.2,0.9c0.2,0.1,0.3,0.2,0.5,0.3c0.5,0.4,1.1,0.7,1.6,1l79.6,45.9
l-0.1,39.1c0,0.4,0,0.8,0,1.2c0,0.1,0,0.2,0,0.3c0,0.3,0.1,0.7,0.1,1c0,0.1,0,0.1,0,0.2c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0.1,0,0.1
c0.1,0.2,0.1,0.4,0.2,0.7c0.1,0.2,0.1,0.5,0.2,0.7c0.1,0.2,0.1,0.4,0.2,0.7c0.1,0.2,0.2,0.5,0.2,0.7c0.1,0.2,0.2,0.4,0.3,0.7
c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.2,0.2,0.3,0.2,0.5c0,0,0.1,0.1,0.1,0.1c0.3,0.7,0.7,1.3,1,1.9
c0.1,0.1,0.2,0.3,0.2,0.4c0.4,0.6,0.8,1.3,1.3,1.9c0,0,0,0,0,0c0.3,0.4,0.6,0.7,0.8,1.1c0.1,0.1,0.2,0.2,0.3,0.3
c0.2,0.3,0.4,0.5,0.7,0.8c0.1,0.1,0.2,0.2,0.3,0.3c0.6,0.6,1.3,1.3,1.9,1.8c0.1,0.1,0.2,0.2,0.3,0.2c0.2,0.2,0.5,0.4,0.8,0.6
c0.1,0.1,0.2,0.1,0.3,0.2c0.3,0.2,0.7,0.5,1,0.7l101.3,58.5c3.2,1.8,6,2,8.1,0.8l8.5-4.9C472,625.7,469.1,625.6,466,623.8z"/>
<g>
<path class="st10" d="M607.2,355.8c4.7,2.7,8.5,9.3,8.5,14.7l-1.1,387.2c0,5.4-3.9,7.6-8.5,4.9L9.4,418.1
c-4.7-2.7-8.5-9.3-8.5-14.7L2,16.2c0-5.4,3.9-7.6,8.5-4.9L607.2,355.8z M469,622.2l0.2-81.4c0-7.2-5.1-16.1-11.4-19.7l-70-40.4
l0.1-36.1c0-11.3-8-25.2-17.8-30.8l-72.9-42.1l0.2-56.1c0-7.2-5.1-16.1-11.4-19.7l-101.3-58.5c-6.3-3.6-11.4-0.7-11.4,6.5
l-0.2,81.4c0,7.2,5.1,16.1,11.4,19.7l63.3,36.6l-0.2,53c0,11.3,8,25.2,17.8,30.8l79.6,45.9l-0.1,39.1c0,7.2,5.1,16.1,11.4,19.7
l101.3,58.5C463.8,632.3,469,629.4,469,622.2 M589.3,400l0.1-32.2c0-1.5-1-3.2-2.3-4L102.9,84.3c-1.3-0.7-2.3-0.1-2.3,1.3
l-0.1,32.2c0,1.5,1,3.2,2.3,4L587,401.3C588.2,402,589.3,401.4,589.3,400 M82.7,109.3l0.1-35.7c0-0.5-0.3-1.1-0.8-1.3L28.2,41.1
c-0.4-0.2-0.8,0-0.8,0.4l-0.1,35.7c0,0.5,0.3,1.1,0.8,1.3L82,109.7C82.4,110,82.7,109.8,82.7,109.3"/>
</g>
<g>
<path class="st9" d="M587.1,363.8c1.3,0.7,2.3,2.5,2.3,4l-0.1,32.2c0,1.5-1,2-2.3,1.3L102.8,121.8c-1.3-0.7-2.3-2.5-2.3-4
l0.1-32.2c0-1.5,1-2,2.3-1.3L587.1,363.8z"/>
</g>
<g>
<path class="st2" d="M622.9,754.1c0.1-0.4,0.1-0.8,0.1-1.3l1.1-387.2c0-0.4,0-0.9-0.1-1.3c0-0.1,0-0.2,0-0.4
c0-0.3-0.1-0.7-0.2-1.1c0-0.1,0-0.1,0-0.2c0,0,0-0.1,0-0.1c0-0.2-0.1-0.3-0.1-0.5c0-0.2-0.1-0.4-0.1-0.6c0-0.2-0.1-0.3-0.2-0.5
c-0.1-0.2-0.1-0.4-0.2-0.5c-0.1-0.2-0.1-0.3-0.2-0.5c-0.1-0.2-0.1-0.4-0.2-0.5c-0.1-0.2-0.1-0.3-0.2-0.5c-0.1-0.1-0.1-0.3-0.2-0.4
c0,0,0-0.1-0.1-0.1c-0.2-0.5-0.5-1-0.8-1.4c-0.1-0.1-0.1-0.2-0.2-0.3c-0.3-0.5-0.6-1-0.9-1.4c0,0,0,0,0,0c0,0,0,0,0,0
c-0.3-0.4-0.6-0.8-0.9-1.2c-0.1-0.1-0.2-0.2-0.2-0.3c-0.3-0.4-0.7-0.7-1-1.1c0,0,0,0,0,0c-0.4-0.3-0.7-0.6-1.1-0.9
c-0.1-0.1-0.2-0.1-0.3-0.2c-0.4-0.3-0.8-0.5-1.1-0.8L19,6.4c-2.4-1.4-4.5-1.5-6-0.6l-8.5,4.9c1.5-0.9,3.7-0.8,6,0.6l596.6,344.5
c0.4,0.2,0.8,0.5,1.1,0.8c0.1,0.1,0.2,0.1,0.3,0.2c0.4,0.3,0.7,0.6,1.1,0.9c0,0,0,0,0,0c0.4,0.3,0.7,0.7,1,1.1
c0.1,0.1,0.2,0.2,0.2,0.3c0.3,0.4,0.6,0.8,0.9,1.2c0,0,0,0,0,0c0.3,0.5,0.6,0.9,0.9,1.4c0.1,0.1,0.1,0.2,0.2,0.3
c0.3,0.5,0.5,1,0.8,1.4c0.1,0.2,0.2,0.3,0.2,0.5c0.1,0.2,0.2,0.3,0.2,0.5c0.1,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.1,0.3,0.2,0.5
c0.1,0.2,0.1,0.4,0.2,0.6c0.1,0.2,0.1,0.3,0.2,0.5c0.1,0.2,0.1,0.4,0.1,0.6c0,0.2,0.1,0.3,0.1,0.5c0,0.1,0,0.2,0.1,0.3
c0.1,0.4,0.1,0.7,0.2,1.1c0,0.1,0,0.2,0,0.4c0,0.4,0.1,0.9,0.1,1.3l-1.1,387.2c0,0.5,0,0.9-0.1,1.3c0,0.1,0,0.2,0,0.3
c-0.1,0.4-0.1,0.8-0.3,1.1c0,0.2-0.1,0.3-0.2,0.4c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.1-0.1,0.3-0.2,0.4c0,0.1-0.1,0.2-0.1,0.2
c-0.1,0.1-0.2,0.3-0.3,0.4c0,0-0.1,0.1-0.1,0.1c-0.2,0.2-0.3,0.3-0.5,0.5c-0.2,0.1-0.4,0.3-0.5,0.4l8.5-4.9
c0.2-0.1,0.4-0.2,0.5-0.4c0,0,0,0,0,0c0.2-0.1,0.3-0.3,0.5-0.5c0,0,0.1-0.1,0.1-0.1c0.1-0.1,0.2-0.3,0.3-0.4
c0-0.1,0.1-0.2,0.1-0.2c0.1-0.1,0.2-0.3,0.2-0.4c0-0.1,0.1-0.2,0.1-0.3c0.1-0.1,0.1-0.3,0.2-0.4c0,0,0,0,0,0
c0.1-0.3,0.2-0.7,0.3-1.1C622.9,754.3,622.9,754.2,622.9,754.1z"/>
</g>
</g>
<g id="icon">
<g>
<path class="st11" d="M129.8,376.5c6,3.5,10.9,12.1,10.9,19.2l-0.2,55l70,40.4c9.4,5.4,17.1,19,17.1,30l-0.1,35.4l67.2,38.8
c6,3.5,10.9,12.1,10.9,19.2l-0.2,79.8c0,7.1-5,10-11,6.5l-97.3-56.2c-6-3.5-10.9-12.1-10.9-19.2l0.1-38.4L110,543
c-9.4-5.4-17.1-19-17.1-30l0.1-52l-60.8-35.1c-6-3.5-10.9-12.1-10.9-19.2l0.2-79.8c0-7.1,5-10,11-6.5L129.8,376.5z"/>
</g>
<path class="st12" d="M317.3,688.8c0-0.1,0-0.2,0-0.3c0-0.4,0.1-0.8,0.1-1.2l0.2-79.8c0-0.6,0-1.1-0.1-1.7c0-0.2,0-0.3-0.1-0.5
c-0.1-0.5-0.1-0.9-0.2-1.4c0-0.1,0-0.3-0.1-0.4c-0.1-0.6-0.3-1.1-0.4-1.7c0-0.1-0.1-0.2-0.1-0.4c-0.1-0.5-0.3-0.9-0.5-1.4
c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.2c-0.2-0.4-0.4-0.9-0.6-1.3c-0.1-0.1-0.1-0.2-0.2-0.3c-0.3-0.5-0.5-1-0.8-1.6
c-0.1-0.1-0.2-0.3-0.2-0.4c-0.2-0.4-0.5-0.8-0.7-1.1c-0.1-0.2-0.2-0.3-0.3-0.5c-0.2-0.4-0.5-0.7-0.8-1c-0.1-0.1-0.2-0.3-0.3-0.4
c-0.4-0.4-0.7-0.9-1.1-1.3c-0.1-0.1-0.1-0.1-0.2-0.2c-0.3-0.3-0.7-0.7-1-1c-0.1-0.1-0.3-0.2-0.4-0.3c-0.3-0.3-0.6-0.5-0.9-0.7
c-0.1-0.1-0.3-0.2-0.4-0.3c-0.4-0.3-0.9-0.6-1.3-0.9l-67.2-38.8l0.1-35.4c0-0.6,0-1.2-0.1-1.9c0-0.2,0-0.3,0-0.5
c0-0.5-0.1-1.1-0.2-1.6c0-0.1,0-0.2,0-0.3c-0.1-0.6-0.2-1.3-0.4-1.9c0-0.2-0.1-0.3-0.1-0.5c-0.1-0.5-0.3-1-0.4-1.6
c0-0.2-0.1-0.3-0.1-0.5c-0.2-0.6-0.4-1.3-0.6-1.9c0-0.1-0.1-0.3-0.1-0.4c-0.1-0.3-0.2-0.6-0.4-1c-0.1-0.2-0.2-0.4-0.3-0.7
c-0.1-0.1-0.1-0.3-0.2-0.4c-0.3-0.6-0.6-1.2-0.9-1.9c-0.1-0.1-0.1-0.2-0.2-0.3c-0.3-0.5-0.6-1.1-0.9-1.6c-0.1-0.1-0.1-0.3-0.2-0.4
c-0.3-0.6-0.7-1.2-1.1-1.7c-0.1-0.1-0.2-0.2-0.2-0.4c-0.3-0.5-0.7-1-1-1.5c-0.1-0.1-0.1-0.2-0.2-0.3c-0.4-0.5-0.8-1.1-1.2-1.6
c-0.1-0.1-0.2-0.2-0.3-0.3c-0.4-0.5-0.8-0.9-1.2-1.3c-0.1-0.1-0.1-0.1-0.2-0.2c-0.4-0.5-0.9-0.9-1.4-1.4c-0.1-0.1-0.2-0.2-0.3-0.3
c-0.4-0.4-0.9-0.8-1.3-1.2c0,0-0.1-0.1-0.1-0.1c-0.5-0.4-1-0.8-1.5-1.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.5-0.4-1-0.7-1.6-1l-70-40.4
l0.2-55c0-0.6,0-1.1-0.1-1.7c0-0.2,0-0.3-0.1-0.5c-0.1-0.5-0.1-0.9-0.2-1.4c0-0.1,0-0.3-0.1-0.4c-0.1-0.6-0.3-1.1-0.4-1.7
c0-0.1-0.1-0.2-0.1-0.4c-0.1-0.5-0.3-0.9-0.5-1.4c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.2c-0.2-0.4-0.4-0.9-0.6-1.3
c-0.1-0.1-0.1-0.2-0.2-0.3c-0.3-0.5-0.5-1-0.8-1.6c-0.1-0.1-0.2-0.3-0.2-0.4c-0.2-0.4-0.5-0.8-0.7-1.1c-0.1-0.2-0.2-0.3-0.3-0.5
c-0.2-0.4-0.5-0.7-0.8-1c-0.1-0.1-0.2-0.3-0.3-0.4c-0.4-0.4-0.7-0.9-1.1-1.3c-0.1-0.1-0.1-0.1-0.2-0.2c-0.3-0.3-0.7-0.7-1-1
c-0.1-0.1-0.3-0.2-0.4-0.3c-0.3-0.3-0.6-0.5-0.9-0.7c-0.1-0.1-0.3-0.2-0.4-0.3c-0.4-0.3-0.9-0.6-1.3-0.9l-97.3-56.2
c-3-1.7-5.7-1.9-7.7-0.7l-12,7c2-1.2,4.7-1,7.7,0.7l97.3,56.2c0.4,0.3,0.9,0.6,1.3,0.9c0.1,0.1,0.3,0.2,0.4,0.3
c0.3,0.2,0.6,0.5,0.9,0.7c0.1,0.1,0.3,0.2,0.4,0.3c0.3,0.3,0.7,0.6,1,1c0.1,0.1,0.1,0.1,0.2,0.2c0.4,0.4,0.8,0.8,1.1,1.3
c0.1,0.1,0.2,0.2,0.3,0.4c0.3,0.3,0.5,0.7,0.8,1c0.1,0.2,0.2,0.3,0.3,0.5c0.2,0.4,0.5,0.7,0.7,1.1c0.1,0.1,0.2,0.3,0.2,0.4
c0.3,0.5,0.6,1,0.8,1.6c0.1,0.1,0.1,0.2,0.2,0.3c0.2,0.4,0.4,0.8,0.6,1.3c0.1,0.2,0.1,0.3,0.2,0.5c0.2,0.5,0.3,0.9,0.5,1.4
c0,0.1,0.1,0.2,0.1,0.4c0.2,0.6,0.3,1.1,0.4,1.7c0,0.1,0.1,0.3,0.1,0.4c0.1,0.5,0.2,0.9,0.2,1.4c0,0.2,0,0.3,0.1,0.5
c0.1,0.6,0.1,1.1,0.1,1.7l-0.2,55l70,40.4c0.5,0.3,1,0.6,1.6,1c0.1,0.1,0.2,0.2,0.4,0.3c0.5,0.4,1,0.7,1.5,1.1c0,0,0.1,0.1,0.1,0.1
c0.5,0.4,0.9,0.8,1.3,1.2c0.1,0.1,0.2,0.2,0.3,0.3c0.5,0.4,0.9,0.9,1.4,1.4c0.1,0.1,0.1,0.1,0.2,0.2c0.4,0.4,0.8,0.9,1.2,1.3
c0.1,0.1,0.2,0.2,0.3,0.3c0.4,0.5,0.8,1.1,1.2,1.6c0.1,0.1,0.1,0.2,0.2,0.3c0.3,0.5,0.7,1,1,1.5c0.1,0.1,0.2,0.2,0.2,0.4
c0.4,0.6,0.7,1.2,1.1,1.8c0.1,0.1,0.1,0.3,0.2,0.4c0.3,0.5,0.6,1.1,0.9,1.6c0.1,0.1,0.1,0.2,0.2,0.3c0.3,0.6,0.6,1.2,0.9,1.9
c0.1,0.1,0.1,0.3,0.2,0.4c0.2,0.5,0.4,1.1,0.6,1.6c0,0.1,0.1,0.3,0.1,0.4c0.2,0.6,0.4,1.3,0.6,1.9c0,0.2,0.1,0.3,0.1,0.5
c0.2,0.5,0.3,1,0.4,1.6c0,0.2,0.1,0.3,0.1,0.5c0.1,0.6,0.3,1.3,0.4,1.9c0,0.1,0,0.2,0,0.3c0.1,0.5,0.1,1.1,0.2,1.6
c0,0.2,0,0.3,0,0.5c0,0.6,0.1,1.3,0.1,1.9l-0.1,35.4l67.2,38.8c0.4,0.3,0.9,0.5,1.3,0.9c0.1,0.1,0.3,0.2,0.4,0.3
c0.3,0.2,0.6,0.5,0.9,0.7c0.1,0.1,0.3,0.2,0.4,0.3c0.3,0.3,0.7,0.6,1,1c0.1,0.1,0.1,0.1,0.2,0.2c0.4,0.4,0.8,0.8,1.1,1.3
c0.1,0.1,0.2,0.3,0.3,0.4c0.3,0.3,0.5,0.7,0.8,1c0.1,0.2,0.2,0.3,0.3,0.5c0.2,0.4,0.5,0.7,0.7,1.1c0.1,0.1,0.2,0.3,0.2,0.4
c0.3,0.5,0.6,1,0.8,1.6c0.1,0.1,0.1,0.2,0.2,0.3c0.2,0.4,0.4,0.9,0.6,1.3c0.1,0.2,0.1,0.3,0.2,0.5c0.2,0.5,0.3,0.9,0.5,1.4
c0,0.1,0.1,0.2,0.1,0.4c0.2,0.6,0.3,1.1,0.5,1.7c0,0.1,0.1,0.3,0.1,0.4c0.1,0.5,0.2,0.9,0.2,1.4c0,0.2,0,0.3,0.1,0.5
c0.1,0.6,0.1,1.1,0.1,1.7l-0.2,79.8c0,0.4,0,0.8-0.1,1.2c0,0.1,0,0.2,0,0.3c0,0.3-0.1,0.5-0.1,0.8c0,0.1,0,0.2-0.1,0.3
c-0.1,0.3-0.2,0.7-0.2,1c-0.1,0.4-0.3,0.8-0.4,1.1c-0.1,0.1-0.1,0.2-0.2,0.3c-0.1,0.2-0.3,0.5-0.4,0.7c-0.1,0.1-0.1,0.2-0.2,0.3
c-0.2,0.2-0.3,0.4-0.5,0.5c-0.1,0.1-0.1,0.2-0.2,0.2c-0.3,0.2-0.5,0.4-0.8,0.6l12-7c0.3-0.2,0.6-0.4,0.8-0.6
c0.1-0.1,0.2-0.1,0.2-0.2c0.2-0.2,0.3-0.3,0.5-0.5c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.2,0.3-0.4,0.4-0.7c0.1-0.1,0.1-0.2,0.2-0.3
c0.2-0.3,0.3-0.7,0.4-1.1c0,0,0,0,0,0c0.1-0.3,0.2-0.6,0.2-0.9c0-0.1,0-0.2,0.1-0.3C317.2,689.3,317.3,689.1,317.3,688.8z"/>
</g>
</svg>
</body>
</html>
main.css
body, html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #282A2C;
width: 100%;
display: grid;
grid-template-columns: auto;
}
svg {
width: 300px;
align-self: center;
justify-self: center;
}
svg:hover #icon {
animation-duration: 1.2s;
animation-name: animateLogo;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#icon {
opacity: 0;
}
@keyframes animateLogo {
from {
transform: translateX(0) translateY(0);
opacity: 0;
}
to {
transform: translateX(140px) translateY(-60px);
opacity: 1;
}
}
.st0{enable-background:new ;}
.st1{clip-path:url(#SVGID_2_);enable-background:new ;}
.st2{fill:#927308;}
.st3{fill:#8D6F08;}
.st4{fill:#886B08;}
.st5{fill:#836707;}
.st6{fill:#9A7A09;}
.st7{fill:#816607;}
.st8{fill:#838383;}
.st9{fill:#F6F6F6;}
.st10{fill:#F2BF0D;}
.st11{fill:#FDFDFD;}
.st12{fill:#8A8A8A;}
Working example: https://codepen.io/Mushref_Code/pen/ywJwdN
