<div class="svg-container"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="xMinYMin meet" class="svg-content" viewBox="0 0 60 40" xml:space="preserve"><g id="Layer_2"> <path id="hand" d="M26.473,26.336c1.311-3.478,5.704-5.484,6.642-5.854c1.044-0.412-1.748-10.108-1.748-11.637 c0.001-1.528,1.82-2.515,2.807-0.698c0.638,1.175,3.884,14.696,4.656,15.955c0.771,1.259,2.229,0.667,2.679-0.284 c0.45-0.953,1.205-2.838,2.098-3.854c0.894-1.016,2.662-0.663,2.526,0.945c-0.088,1.059-3.467,13.086-3.917,13.732 c-0.45,0.647-0.72,1.097-1.422,1.347c-0.701,0.253-5.579,1.76-7.388,1.948c-1.551,0.163-2.378,0.254-3.329-1.42 C28.731,34.151,26.094,27.346,26.473,26.336z"/> <path id="arrow" d="M56.542,7.168C36.68,0.654,9.444,3.956,9.444,3.956L8.45,1.61L1.364,8.468l9.85,2.194L10.759,8.26 C10.759,8.26,33.398,2.342,56.542,7.168z"/></g></svg></div>html, body { background-color: #005782;}.svg-container {display: inline-block;position: relative;width: 80%;left: 10%;padding-bottom: 66.666666%; /*change according to ratio img w - img h */vertical-align: middle;overflow: hidden;}.svg-content {display: inline-block;position: absolute;top: 0;left: 0;}svg { fill: #0092bc;}#hand { animation: move 2s linear infinite; transform-origin: 50% 50%; animation: move 2s linear infinite; transform-origin: 50% 50%;}@keyframes move { 0% { transform: translate(10px,0px) rotate(30deg);} 40% { transform: translate(10px,0px) rotate(30deg);} 60% { transform: translate(-15px, 0px) rotate(-5deg);} 100% { transform: translate(10px,0px) rotate(30deg);}}@-webkit-keyframes move { 0% { transform: translate(10px,0px) rotate(30deg);} 40% { transform: translate(10px,0px) rotate(30deg);} 60% { transform: translate(-15px, 0px) rotate(-5deg);} 100% { transform: translate(10px,0px) rotate(30deg);}}xxxxxxxxxx