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); }
}
