HTML

<svg class="rocket" viewBox="0 0 500 500" >
    tags: ["rocket"],

  <g id="rocket">
    <path d="M445.3,256.3c-47.3-3.5-62.8,27-62.8,27c-18.5,2-24,10-24,10l15.5,12.3c-0.5,15.3,3.5,16.5,3.5,16.5c5.5,7.5,17.8,4.8,17.8,4.8l12.8,17c12-12.5,10.3-25.5,10.3-25.5C450.8,300,445.3,256.3,445.3,256.3zM416.3,297c-6.5,0-11.8-5.3-11.8-11.8c0-6.5,5.3-11.8,11.8-11.8s11.8,5.3,11.8,11.8C428,291.7,422.7,297,416.3,297z"></path>
    <circle></circle>
    <polygon points="371.3,338.6 355.7,344.7 363.1,329.7"></polygon>
  </g>
</svg>

CSS



#rocket {
        animation: shakes 1s linear infinite;
}

@keyframes shakes {
10% {
          transform: translate(4px, 1px);
}
20% {
          transform: translate(1px, 5px);
}
30% {
          transform: translate(4px, 5px);
}
40% {
          transform: translate(1px, 3px);
}
50% {
          transform: translate(2px, 5px);
}
60% {
          transform: translate(1px, 2px);
}
70% {
          transform: translate(3px, 3px);
}
80% {
          transform: translate(1px, 1px);
}
90% {
          transform: translate(1px, 3px);
}
100% {
          transform: translate(0, 0);
}
}
#rocket path, #rocket circle, #rocket polygon {
fill: #FFF;
}
#rocket circle {
cx: 369.5;
cy: 331.8;
r: 7;
}
#rocket polygon {
        animation: burst 0.5s infinite;
        transform-origin: 363px 337px;
}

@keyframes burst {
20% {
          transform: scale(0.8);
}
40% {
          transform: scale(0.6);
}
60% {
          transform: scale(1);
}
80% {
          transform: scale(0.8);
}
100% {
          transform: scale(1);
}
}
.rocket {
  width: 250px;
  height: 250px;
}