SVG USB Drive

HTML
<!-- Made With Sketch --> <!-- ================ --> <svg width="400" height="225" viewBox="0 0 59 223" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <rect id="a" x="6" width="47" height="45" rx="13"/> <mask id="f" x="0" y="0" width="47" height="45" fill="#fff"> <use xlink:href="#a"/> </mask> <path d="M59 86.25v37.25c0 16.292-13.204 29.5-29.5 29.5C13.208 153 0 139.795 0 123.5V31h59v55.25z" id="b"/> <mask id="g" x="0" y="0" width="59" height="122" fill="#fff"> <use xlink:href="#b"/> </mask> <ellipse id="c" cx="21.5" cy="19.5" rx="3.5" ry="3.5"/> <mask id="h" x="-1" y="-1" width="9" height="9"> <path fill="#fff" d="M17 15h9v9h-9z"/> <use xlink:href="#c"/> </mask> <ellipse id="d" cx="37.5" cy="19.5" rx="3.5" ry="3.5"/> <mask id="i" x="-1" y="-1" width="9" height="9"> <path fill="#fff" d="M33 15h9v9h-9z"/> <use xlink:href="#d"/> </mask> <path d="M58.89 35.79C57.613 50.2 45.51 61.5 30.773 61.5h-2.548C13.486 61.5 1.386 50.204.11 35.79H0V0h59v35.79h-.11z" id="e"/> <mask id="j" x="0" y="0" width="59" height="61.5" fill="#fff"> <use xlink:href="#e"/> </mask> </defs> <g class="stick" fill="none" fill-rule="evenodd"> <g transform="translate(0 70)"> <use stroke="#243743" mask="url(#f)" stroke-width="12" fill="#EEF0F1" xlink:href="#a"/> <use stroke="#243743" mask="url(#g)" stroke-width="12" fill="#28B78D" xlink:href="#b"/> <path d="M41 11.853V28h3V10.5c0-.83-.672-1.5-1.5-1.5H41v2.853z" stroke="#D8D8D8" stroke-width="6" fill="#D8D8D8"/> <use fill="#243743" xlink:href="#c"/> <use stroke="#243743" mask="url(#h)" stroke-width="2" xlink:href="#c"/> <use fill="#243743" xlink:href="#d"/> <use stroke="#243743" mask="url(#i)" stroke-width="2" xlink:href="#d"/> <path d="M52.5 87.73v38.522C52.5 134.95 45.45 142 36.75 142c-7.875 0 0 0 0 0-8.698 0-15.75-7.05-15.75-15.748V37h31.5v50.73z" fill="#229B77"/> </g> <g class="stick-top"> <use stroke="#243743" mask="url(#j)" stroke-width="12" fill="#28B78D" transform="rotate(-180 29.5 30.75)" xlink:href="#e"/> <path d="M22 32.807V26.4C22 17.702 28.766 8.69 35.876 8c7.875 0 2.112.058 2.112.058C46.555 9.49 53.5 17.712 53.5 26.4V55.65H22V32.808z" fill="#229B77"/> </g> </g> </svg>
CSS
html, body { width: 100%; height: 100%; overflow: hidden; background: #34495e; display: flex; justify-content: center; align-items: center; } .stick { animation-name: rotateStick; animation-duration: 10s; animation-timing-function: ease-in-out; transform-origin: 50% 50%; } .stick-top { transform: translateY(40px); animation-name: openStick; animation-duration: 4s; animation-delay: 5s; transform-origin: 50% 50%; } @keyframes rotateStick { 10% { transform: rotate(0) } 50%, 90% { transform: rotate(810deg) } 10% { transform: rotate(0) } } @keyframes openStick { 10% { transform: translateY(40px) } 50% { transform: translateY(-40px); } 100% { transform: translateY(40px); } }
JAVASCRIPT
Expand for more options Login