Edit on
<div class="face">
  <svg xmlns="http://www.w3.org/2000/svg" width="213.1" height="286.1" viewBox="0 0 213.1 286.1">
    <radialGradient id="a" cx="78.309" cy="166.704" r="140.502" gradientTransform="matrix(.832 0 0 1 42.074 0)" gradientUnits="userSpaceOnUse">
      <stop offset=".223" stop-color="#FBB03B" />
      <stop offset=".442" stop-color="#F89835" />
      <stop offset=".901" stop-color="#F15B24" />
      <stop offset=".91" stop-color="#F15A24" />
    </radialGradient>
    <ellipse fill="url(#a)" cx="107.3" cy="166.7" rx="99.4" ry="119.4" />
    <path fill="#491600" d="M15.7 126.2s9.1-52.8 76.9-63.3c0 0 3.5-29.1-8.1-55.3 0 0-1.2 6.7-1.7 12.5s-2.1 11.2-2.1 11.2-2.6-7.6-7.1-10.3c0 0-1.1 7-.5 11.7 0 0-18.2 2.7-33.5 17.1 0 0-3.2.3-4.5.7 0 0-.3 4.2 2.4 7.1 0 0-2.9-3.1-9-2.8 0 0 1 4.6 3.6 6.4 0 0-2.1-1.2-4.1-.9.1 0-21.2 26.5-12.3 65.9z"
    />
    <path fill="#1C0900" d="M62.1 38.7c0 2.5-.2 4.9-.3 7.4-.1 1.2-.1 2.4-.1 3.7l-.1 3.7c-.3-1.2-.5-2.4-.6-3.7-.1-1.2-.1-2.5-.1-3.7 0-1.2.2-2.5.3-3.7.3-1.3.5-2.5.9-3.7z" />
    <radialGradient id="b" cx="73.818" cy="163.642" r="40.397" gradientUnits="userSpaceOnUse">
      <stop offset=".265" stop-color="#FFF" />
      <stop offset=".399" stop-color="#FAFDFE" />
      <stop offset=".555" stop-color="#ECF7FB" />
      <stop offset=".724" stop-color="#D4ECF6" />
      <stop offset=".899" stop-color="#B4DEEE" />
      <stop offset=".988" stop-color="#A0D5EA" />
    </radialGradient>
    <path fill="url(#b)" stroke="#006289" stroke-width=".282" stroke-miterlimit="10" d="M87.5 122s-23.1 5.9-34.6 33.2c-11.4 27.4-2.5 42.5 11 48.1 13.6 5.6 30.3.2 35.1-32.7 4.8-31.9-11.5-48.6-11.5-48.6z" />
    <path opacity=".51" fill="#B5C3C6" d="M87.5 122s-23.1 5.9-34.6 33.2c-1.6 3.7-2.7 7.2-3.6 10.5.6-1.7 1.2-3.4 2-5.2 11.4-27.4 34.6-33.2 34.6-33.2s16.2 16.8 11.6 48.7c-.5 3.3-1.1 6.3-1.8 9.1 1.4-4.1 2.6-8.9 3.4-14.4 4.7-32-11.6-48.7-11.6-48.7z" />
    <path fill="#090706" d="M82.5 122.1c1.2-.4 2.3-.6 3.5-.8 1.2-.1 2.4-.2 3.6-.1 2.4.2 4.7 1 6.6 2.4-2-1.3-4.3-2-6.7-2.1-1.2-.1-2.3 0-3.5.2-1.2.2-2.3.5-3.4.9l-.1-.5z" />
    <radialGradient id="c" cx="77.172" cy="168.994" r="17.01" gradientUnits="userSpaceOnUse">
      <stop offset=".223" stop-color="#33A5A8" />
      <stop offset=".418" stop-color="#2A8D9D" />
      <stop offset=".827" stop-color="#155080" />
      <stop offset=".91" stop-color="#10437A" />
    </radialGradient>
    <path fill="url(#c)" d="M89.4 172.1c-2.2 8.6-9.4 14.2-16.1 12.5-6.8-1.7-10.5-10-8.3-18.7 2.2-8.6 9.4-14.2 16.1-12.5 6.7 1.7 10.5 10 8.3 18.7z" />
    <radialGradient id="d" cx="77.449" cy="170.03" r="8.138" gradientUnits="userSpaceOnUse">
      <stop offset=".16" stop-color="#4D2414" />
      <stop offset=".72" stop-color="#350F05" />
      <stop offset=".89" stop-color="#2D0800" />
    </radialGradient>
    <path fill="url(#d)" d="M82.6 171.7c-1.3 4-4.7 6.6-7.6 5.6-2.8-.9-4-5-2.7-9 1.3-4 4.7-6.6 7.6-5.6 2.8.9 4 5 2.7 9z" />
    <ellipse transform="matrix(.8 .6 -.6 .8 111.938 -11.016)" fill="#FFF" cx="72.5" cy="162.4" rx="4.6" ry="7.6" />
    <path fill="#090706" d="M99.1 170.7c1.2-8.5 1.1-17.2-.8-25.6-.9-4.2-2.3-8.3-4.1-12.1-.9-1.9-1.9-3.8-3.1-5.6-1.1-1.8-2.4-3.6-3.8-5.1l.3.1c-2 .5-3.9 1.3-5.7 2.2-1.9.9-3.7 1.8-5.4 2.9-3.5 2.2-6.8 4.7-9.7 7.6-5.9 5.7-10.6 12.7-13.8 20.3 3.1-7.6 7.7-14.7 13.6-20.5 2.9-2.9 6.2-5.5 9.7-7.7 1.8-1.1 3.6-2.1 5.4-3 1.9-.9 3.8-1.7 5.8-2.3h.1l.1.1c1.5 1.6 2.7 3.4 3.8 5.2 1.1 1.8 2.1 3.8 3 5.7 1.8 3.9 3.1 8 4 12.3 1.9 8.2 1.9 17 .6 25.5z"
    />
    <ellipse transform="matrix(-.808 -.589 .589 -.808 40.573 369.819)" fill="#FFF" cx="80.6" cy="178.3" rx="2.4" ry="3.1" />
    <path fill="#491600" d="M199.5 124.9s-9.5-52.8-77.4-62.7c0 0-3.7-29 7.7-55.3 0 0 1.2 6.7 1.8 12.5.6 5.8 2.2 11.2 2.2 11.2s2.6-7.6 7-10.4c0 0 1.2 7 .6 11.7 0 0 18.2 2.6 33.6 16.8 0 0 3.2.3 4.5.7 0 0 .3 4.2-2.3 7.1 0 0 2.8-3.1 9-2.8 0 0-.9 4.6-3.6 6.4 0 0 2.1-1.2 4.1-.9 0-.1 21.5 26.1 12.8 65.7z"
    />
    <path fill="#661A00" d="M206.7 119.5l-3.1-19.5 8.2-5-15.2-2.3c-4.4-14.6-11.4-23.1-11.4-23.1-2-.4-4.1.9-4.1.9 2.6-1.8 3.6-6.4 3.6-6.4-6.2-.3-9 2.8-9 2.8 2.7-2.9 2.3-7.1 2.3-7.1-1.3-.4-4.5-.7-4.5-.7-15.4-14.2-33.6-16.8-33.6-16.8.6-4.8-.6-11.7-.6-11.7-4.4 2.7-7 10.4-7 10.4s-1.6-5.4-2.2-11.2c-.6-5.8-1.8-12.5-1.8-12.5-1.7 3.9-3.1 7.9-4.2 11.8L119.2 0l-3.8 27.1L109.8 0l-5 28.3-7-27.7-6.6 32c-1.2-4.8-2.9-9.7-5-14.5 0 0-1.2 6.7-1.7 12.5s-2.1 11.2-2.1 11.2-2.6-7.6-7.1-10.3c0 0-1.1 7-.5 11.7 0 0-18.2 2.7-33.5 17.1 0 0-3.2.3-4.5.7 0 0-.3 4.2 2.4 7.1 0 0-2.9-3.1-9-2.8 0 0 1 4.6 3.6 6.4 0 0-2.1-1.2-4.1-.9 0 0-8.3 10.4-12.4 27.8L1.6 101l8.2 5-3.1 19.5 1.9 7.5-4.4 6.3 6.9 29.6 7.5-28.3 3.1-28.3 20.1-18.9 3.7-11.7c10.7-8.1 25.2-15 44.8-18.4v.2h39.6c16.7 3.5 29.6 9.7 39.3 16.9l2.2 7.1 20.1 18.9 3.1 28.3 7.5 28.3 6.9-29.6-4.4-6.3 2.1-7.6z"
    />
    <path fill="#1C0900" d="M136.7 32c.4 2.3.6 4.5.9 6.8.2 2.3.3 4.6.4 6.9.1 2.3.1 4.6.1 6.9L138 56c-.1 1.1-.1 2.3-.2 3.4l-.1-3.4-.1-3.4-.2-6.9-.3-6.9c0-1.1-.1-2.3-.2-3.4 0-1.1-.1-2.2-.2-3.4zM143.5 41.1c.4 1.3.8 2.7 1.1 4 .3 1.3.5 2.7.7 4.1.4 2.7.6 5.5.4 8.3-.3-2.7-.6-5.5-1-8.2l-.6-4.1c-.3-1.4-.4-2.8-.6-4.1z"
    />
    <radialGradient id="e" cx="838.084" cy="163.642" r="40.397" gradientTransform="matrix(-1 0 0 1 975.012 0)" gradientUnits="userSpaceOnUse">
      <stop offset=".265" stop-color="#FFF" />
      <stop offset=".399" stop-color="#FAFDFE" />
      <stop offset=".555" stop-color="#ECF7FB" />
      <stop offset=".724" stop-color="#D4ECF6" />
      <stop offset=".899" stop-color="#B4DEEE" />
      <stop offset=".988" stop-color="#A0D5EA" />
    </radialGradient>
    <path fill="url(#e)" stroke="#006289" stroke-width=".282" stroke-miterlimit="10" d="M123.2 122s23.1 5.9 34.6 33.2c11.4 27.4 2.5 42.5-11 48.1-13.6 5.6-30.3.2-35.1-32.7-4.7-31.9 11.5-48.6 11.5-48.6z" />
    <path opacity=".51" fill="#B5C3C6" d="M123.2 122s23.1 5.9 34.6 33.2c1.6 3.7 2.7 7.2 3.6 10.5-.6-1.7-1.2-3.4-2-5.2-11.4-27.4-34.6-33.2-34.6-33.2s-16.2 16.8-11.6 48.7c.5 3.3 1.1 6.3 1.8 9.1-1.4-4.1-2.6-8.9-3.4-14.4-4.6-32 11.6-48.7 11.6-48.7z" />
    <path fill="#090706" d="M124.2 122.6c-1.1-.4-2.2-.7-3.4-.9-1.2-.2-2.3-.3-3.5-.2-2.3.1-4.7.8-6.7 2.1 1.9-1.4 4.3-2.2 6.6-2.4 1.2-.1 2.4-.1 3.6.1 1.2.2 2.4.4 3.5.8l-.1.5z" />
    <radialGradient id="f" cx="841.438" cy="168.994" r="17.011" gradientTransform="matrix(-1 0 0 1 975.012 0)" gradientUnits="userSpaceOnUse">
      <stop offset=".223" stop-color="#33A5A8" />
      <stop offset=".418" stop-color="#2A8D9D" />
      <stop offset=".827" stop-color="#155080" />
      <stop offset=".91" stop-color="#10437A" />
    </radialGradient>
    <path fill="url(#f)" d="M121.3 172.1c2.2 8.6 9.4 14.2 16.1 12.5 6.8-1.7 10.5-10 8.3-18.7-2.2-8.6-9.4-14.2-16.1-12.5-6.7 1.7-10.4 10-8.3 18.7z" />
    <radialGradient id="g" cx="133.296" cy="170.03" r="7.825" gradientUnits="userSpaceOnUse">
      <stop offset=".16" stop-color="#4D2414" />
      <stop offset=".691" stop-color="#350F05" />
      <stop offset=".852" stop-color="#2D0800" />
    </radialGradient>
    <path fill="url(#g)" d="M128.2 171.7c1.3 4 4.7 6.6 7.6 5.6 2.8-.9 4-5 2.7-9-1.3-4-4.7-6.6-7.6-5.6-2.9.9-4.1 5-2.7 9z" />
    <ellipse transform="matrix(-.8 .6 -.6 -.8 346.301 209.4)" fill="#FFF" cx="138.3" cy="162.4" rx="4.6" ry="7.6" />
    <path fill="#090706" d="M111.7 170.7c-1.3-8.5-1.3-17.2.5-25.6.9-4.2 2.2-8.3 4-12.3.9-2 1.9-3.9 3-5.7 1.1-1.8 2.4-3.6 3.8-5.2l.1-.1h.1c2 .6 3.9 1.4 5.8 2.3 1.9.9 3.7 1.9 5.4 3 3.5 2.2 6.8 4.8 9.7 7.7 5.9 5.8 10.5 12.9 13.6 20.5-3.2-7.6-7.8-14.6-13.8-20.3-3-2.9-6.2-5.4-9.7-7.6-1.7-1.1-3.6-2.1-5.4-2.9-1.9-.9-3.8-1.6-5.7-2.2l.3-.1c-1.4 1.5-2.7 3.3-3.8 5.1-1.1 1.8-2.2 3.7-3.1 5.6-1.8 3.9-3.2 8-4.1 12.1-1.8 8.4-1.9 17.2-.7 25.7z"
    />
    <ellipse transform="matrix(.808 -.589 .589 .808 -80.071 110.981)" fill="#FFF" cx="130.2" cy="178.3" rx="2.4" ry="3.1" />
    <path fill="#2B0C01" d="M28.4 160.2S27.2 134.4 55 113c24.4-18.7 34-29.6 25.7-43.3 0 0 18.1 8.9 16.8 26.2-2.3 33.7-54.3 18.1-69.1 64.3zM180.5 160.2s1.2-25.8-26.6-47.2c-24.4-18.7-34-29.6-25.7-43.3 0 0-18.1 8.9-16.8 26.2 2.3 33.7 54.4 18.1 69.1 64.3z"
    />
    <path d="M103.1 72.9c1.6 2.8 2.2 6 2.4 9.2.1 3.2-.2 6.4-.5 9.6-.3 3.1-.6 6.3-.2 9.4.2 1.5.6 3 1.3 4.3.7 1.3 1.9 2.4 3.2 3.3-1.5-.5-2.9-1.5-3.9-2.9-.5-.7-.9-1.4-1.2-2.2-.3-.8-.5-1.6-.6-2.4-.3-1.6-.3-3.3-.2-4.9.1-1.6.2-3.2.4-4.8.4-3.2.8-6.3.8-9.4 0-1.6-.1-3.1-.3-4.7-.1-1.5-.6-3.1-1.2-4.5z"
    />
    <radialGradient id="h" cx="105.129" cy="208.747" r="19.994" gradientUnits="userSpaceOnUse">
      <stop offset=".223" stop-color="#FBB03B" />
      <stop offset=".442" stop-color="#F89835" />
      <stop offset=".901" stop-color="#F15B24" />
      <stop offset=".91" stop-color="#F15A24" />
    </radialGradient>
    <path opacity=".52" fill="url(#h)" d="M90.6 204.4s-11 17 6 17c0 0 10.1 7.5 18.2-.6 0 0 15.4.6 4.4-17.6-14.5-23.9-28.6 1.2-28.6 1.2z" />
    <path fill="#2D0C00" d="M151.7 264.4c.6-.3 1.1-.7 1.6-1.2s.9-1 1.3-1.6c.7-1.2 1.1-2.5 1.2-3.8.1-1.4-.1-2.7-.6-4-.3-.6-.6-1.2-1-1.8-.4-.6-.9-1.1-1.4-1.5 1.2.8 2 1.9 2.6 3.2.3.6.5 1.3.6 2 .1.7.1 1.4.1 2.1-.1.7-.2 1.4-.4 2.1-.2.7-.5 1.3-.9 1.9-.8 1.2-1.8 2.2-3.1 2.8v-.2zM148.1 256.8c-1.4-2.5-3.4-4.8-5.6-6.9-2.2-2.1-4.8-4-7.6-5.6-5.6-3.2-12.2-5.4-19-6.4-6.8-1.1-13.8-1-20.3.5-3.3.7-6.4 1.8-9.3 3.2-2.9 1.4-5.6 3-7.9 5 4.2-4.2 10.2-7.2 16.8-8.9 3.3-.9 6.8-1.3 10.3-1.5 3.5-.1 7.1.1 10.6.6s6.9 1.3 10.2 2.4c3.3 1.1 6.5 2.5 9.3 4.2 5.7 3.4 10.4 7.9 13.1 13.2l-.6.2z"
    />
    <path fill="#C63B10" d="M134 257.1c-.8-1.4-2-2.8-3.3-4-1.3-1.2-2.8-2.4-4.5-3.3-3.3-1.9-7.2-3.2-11.2-3.8-4-.6-8.1-.6-12 .3-1.9.4-3.8 1.1-5.5 1.9-1.7.8-3.3 1.8-4.6 2.9 2.5-2.5 6-4.2 9.9-5.3 1.9-.5 4-.8 6.1-.9 2.1-.1 4.2.1 6.2.3 2.1.3 4.1.8 6 1.4 1.9.7 3.8 1.5 5.5 2.5 3.4 2 6.1 4.7 7.7 7.7l-.3.3z"
    />
    <radialGradient id="i" cx="207.207" cy="171.58" r="23.83" gradientUnits="userSpaceOnUse">
      <stop offset=".223" stop-color="#F7761E" />
      <stop offset=".91" stop-color="#F17C24" />
    </radialGradient>
    <path fill="url(#i)" d="M202.6 155.5s13.2-31.5 10.1 7.5-11.3 36.5-11.3 36.5l1.2-44z" />
    <radialGradient id="j" cx="470.276" cy="171.58" r="23.83" gradientTransform="matrix(-1 0 0 1 476.18 0)" gradientUnits="userSpaceOnUse">
      <stop offset=".223" stop-color="#F7761E" />
      <stop offset=".91" stop-color="#F17C24" />
    </radialGradient>
    <path fill="url(#j)" d="M10.5 155.5S-2.7 124 .4 163s11.3 36.5 11.3 36.5l-1.2-44z" />
    <path fill="#1C0900" d="M72.7 36.6c-.4 2.3-.6 4.5-.9 6.8-.2 2.3-.3 4.6-.4 6.9-.1 2.3-.1 4.6-.1 6.9l.1 3.4c.1 1.1.1 2.3.2 3.4l.1-3.4.1-3.4.2-6.9.3-6.9c0-1.1.1-2.3.2-3.4 0-1.1.1-2.2.2-3.4zM65.9 45.7c-.4 1.3-.8 2.7-1.1 4-.3 1.3-.5 2.7-.7 4.1-.4 2.7-.6 5.5-.4 8.3.3-2.7.6-5.5 1-8.2l.6-4.1c.2-1.4.4-2.8.6-4.1zM185.5 75.9c-.3 1.4-.7 2.8-1.1 4.1-.4 1.3-.9 2.6-1.5 3.8-.5 1.2-1.1 2.5-1.8 3.6l-1 1.7c-.3.6-.7 1.1-1.1 1.7l.8-1.9.8-1.8 1.6-3.7c.5-1.2 1.1-2.5 1.6-3.7.3-.6.5-1.3.8-1.9.4-.6.6-1.2.9-1.9zM188.3 84.8c0 .9-.1 1.9-.2 2.7-.1.9-.3 1.7-.5 2.6-.4 1.7-1 3.2-1.8 4.6.5-1.6.9-3.2 1.4-4.9l.6-2.5c.1-.9.3-1.7.5-2.5zM38.2 73c-.2 1.5-.3 3-.3 4.4 0 1.5 0 2.9.1 4.3s.2 2.8.4 4.2l.3 2.1c.1.7.3 1.4.4 2.1L39 88l-.1-2.1-.3-4.3c-.1-1.4-.2-2.9-.2-4.3 0-.7-.1-1.4-.1-2.2-.1-.6-.1-1.3-.1-2.1zM32.4 80.5c-.3.9-.5 1.8-.7 2.8-.2.9-.3 1.8-.4 2.7-.2 1.8-.2 3.5.1 5.2.1-1.8.2-3.5.4-5.3l.3-2.7.3-2.7z"
    />
  </svg>
</div>
body {
  background: #824438;
}

.face {
  margin: 0 auto;
  width: 300px;
}

.face:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
View Compiled
Rerun