<div class="wrapper">
       <div class="icon-holder">
        <svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
            <g transform="translate(-209 -167)">
              <circle cx="120" cy="120" r="120" transform="translate(209 167)" fill="#fff"/>
              <g class="hands">
                <g class="hand-left">
                  <path d="M272.197 294.92l3.855-23.107 7.078-19.378a7.302 7.302 0 10-13.721-5l-8.053 22.134-3.821 22.905z" fill="#f9a08f"/>
                  <path d="M269.827 283.612v-23.426l3.793-20.279a7.302 7.302 0 10-14.357-2.675l-4.3 23.158v23.223z" fill="#fdb0a0"/>
                  <path d="M273.316 354.87v-3.149a11.36 11.36 0 00-2.826-7.5l-22.154-25.213a15.124 15.124 0 01-3.762-9.983v-43.668l4.3-23.158a7.302 7.302 0 1114.357 2.676l-3.793 20.279v28.953l28.868 28.868 21.254 7.936v23.959a3.4 3.4 0 01-3.4 3.4h-29.446a3.4 3.4 0 01-3.4-3.4z" fill="#ffcec0"/>
                  <path d="M273.849 288.016l2.641-13.526a8.1 8.1 0 00-15.718-3.832l-6.085 20.735a9.517 9.517 0 001.221 8.208l24.07 35.248h29.583v-7.289c0-16.8-26.054-31.741-33.958-35.889a3.394 3.394 0 01-1.754-3.658z" fill="#ffcec0"/>
                  <path d="M275.604 291.673a3.394 3.394 0 01-1.754-3.658l2.64-13.526a8.1 8.1 0 00-7-9.594 8.355 8.355 0 00-.958-.058 8.1 8.1 0 00-7.243 4.488 8.1 8.1 0 015.222 9.18l-2.514 12.877a4.285 4.285 0 002.2 4.605c8.505 4.526 33.393 19.173 33.393 35.59v26.693h6.577a3.4 3.4 0 003.4-3.4v-27.309c0-16.8-26.053-31.74-33.957-35.888z" fill="#fdb0a0"/>
                  <path d="M271.744 327.109a2.512 2.512 0 01-1.434.445 2.538 2.538 0 01-2.106-1.111l-17.117-25.067a11.99 11.99 0 01-1.556-10.386l6.078-20.714a15.632 15.632 0 014.131-6.737l-.3 1.61v10.172l-5.026 17.131a.2.2 0 01-.014.041 6.92 6.92 0 00.9 6.013l17.116 25.066a2.55 2.55 0 01-.672 3.537z" fill="#fdb0a0"/>
                </g>
                <g class="hand-right">
                  <path data-name="thumb-ring" d="M385.803 294.92l-3.855-23.107-7.078-19.378a7.302 7.302 0 1113.721-5l8.053 22.134 3.821 22.907z" fill="#f9a08f"/>
                  <path data-name="thumb-middle" d="M388.173 283.612v-23.426l-3.793-20.279a7.302 7.302 0 1114.357-2.676l4.3 23.158v23.223z" fill="#fdb0a0"/>
                  <path data-name="thumb-index" d="M384.684 354.87v-3.149a11.36 11.36 0 012.826-7.5l22.154-25.215a15.124 15.124 0 003.762-9.982v-43.667l-4.3-23.158a7.302 7.302 0 10-14.357 2.676l3.793 20.279v28.953l-28.866 28.869-21.254 7.936v23.959a3.4 3.4 0 003.4 3.4h29.45a3.4 3.4 0 003.4-3.4z" fill="#ffcec0"/>
                  <path data-name="thumb-index-shadow" d="M413.426 265.353v43.67a15.143 15.143 0 01-3.761 9.985l-22.155 25.216a11.357 11.357 0 00-2.827 7.5v3.149a3.4 3.4 0 01-3.4 3.4h-5.517v-6.547a11.357 11.357 0 012.827-7.5l22.161-25.218a15.124 15.124 0 003.761-9.985v-43.67l-4.3-23.157a7.286 7.286 0 00-2.725-4.451 7.3 7.3 0 0111.64 4.451z" fill="#fdb0a0"/>
                  <path data-name="thumb" d="M384.151 288.016l-2.641-13.526a8.1 8.1 0 0115.718-3.832l6.085 20.735a9.517 9.517 0 01-1.223 8.212l-24.069 35.248h-29.582v-7.289c0-16.8 26.054-31.741 33.958-35.889a3.394 3.394 0 001.754-3.658z" fill="#ffcec0"/>
                  <path data-name="thumb-shadow" d="M406.913 301.377L389.8 326.444a2.539 2.539 0 01-2.106 1.111 2.512 2.512 0 01-1.434-.445 2.549 2.549 0 01-.669-3.54l17.109-25.068a6.919 6.919 0 00.9-6.013.176.176 0 01-.014-.041l-5.025-17.126V265.15l-.343-1.831a15.991 15.991 0 014.172 6.958l6.078 20.714a11.992 11.992 0 01-1.557 10.386z" fill="#fdb0a0"/>
                </g>
              </g>
              <g class="parrot-head">
                <path d="M361.887 266.399s1.725 8.361-13.992 8.361v-13.124h14.047z" fill="#3f5959"/>
                <path d="M350.003 248.13l-3.45 13.992 1.4 1.123a9.652 9.652 0 009.532 1.457l1.906-.742.061.006 2.077 3.01a2.094 2.094 0 003.683-.449l.523-1.384c2.967-7.856-2.433-16.57-10.819-17-.221-.011-4.916-.017-4.916-.017z" fill="#688d97"/>
                <path d="M350.885 298.819a3.4 3.4 0 002.9-3.726l-3.548-33.138a4.751 4.751 0 011.969-4.369 15.11 15.11 0 00-8.732-27.443h-31.676l-13.558 48.676a3.4 3.4 0 00.96 3.4c3.668 3.406 13.719 11.8 26.335 14.627 12.973 2.905 21.211 2.558 25.35 1.973z" fill="#eff5f6"/>
                <path d="M350.234 261.956l3.547 33.14a3.4 3.4 0 01-2.9 3.726 55.25 55.25 0 01-12.814.071c.19-.024.374-.047.547-.071a3.394 3.394 0 002.9-3.727l-3.547-33.139a4.753 4.753 0 011.97-4.369 15.111 15.111 0 00-8.731-27.441h12.271a15.108 15.108 0 018.731 27.441 4.754 4.754 0 00-1.974 4.369zM322.308 238.955h-12.964l-3.468 12.447a49.587 49.587 0 005.819.983 10.249 10.249 0 005.14-.774l4.088-1.765a24.615 24.615 0 008.135-7.179z" fill="#cbe5e7"/>
                <path d="M328.631 248.237a2.537 2.537 0 01-1.647-.6l-7.176-6.084a2.55 2.55 0 013.3-3.887l7.176 6.084a2.548 2.548 0 01-1.649 4.492z" fill="#cbe5e7"/>
                <g>
                  <path d="M311.797 230.176c-6.65-.265-20.565-2.333-27.954-14.433a1.956 1.956 0 00-3.632 1.072c.173 5.366 1.381 12.131 5.787 16.345 8.956 8.566 20.422 10.755 25.7 11.315a10.244 10.244 0 005.139-.777l8.7-3.753-7.013-6.863a10.194 10.194 0 00-6.727-2.906z" fill="#fcc16d"/>
                  <path d="M325.533 239.946l-7.011 3.026-5-4.893a10.188 10.188 0 00-6.723-2.906c-6.021-.24-17.991-1.957-25.688-11.254a35.821 35.821 0 01-.9-7.1 1.957 1.957 0 013.632-1.072c7.392 12.1 21.3 14.17 27.956 14.434a10.187 10.187 0 016.723 2.906z" fill="#fcb44d"/>
                </g>
              </g>
            </g>
          </svg>
       </div>
    </div>


<button>Replay</button>
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
  }

body {
    margin: 0;
    background: #F6E8D3;
}

/* Elements styling */
.wrapper {
    padding: 60px;
}

.icon-holder {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

svg {
    overflow: auto;
}
var tl = gsap.timeline();

tl.from('.hand-left', {rotate: -90, scaleX: 0, scaleY: 0, transformOrigin:"right bottom", ease: Power1})
  .from ('.hand-right', {rotate: 90, scaleX: 0, scaleY: 0, transformOrigin:"left bottom"}, '-=0.4')
  .from('.parrot-head', {scaleX: 0, scaleY: 0, marginTop: 100, y: -20, transformOrigin:"center"})

$('button').click(function(){
  tl.restart();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js