<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; left: -9999px;">
<symbol id="hobitton-smoke" viewBox="0 0 143 92">
      <g id="Group">
        <path display="opacity: 0" d="M68.9731857,58.2840768 C68.9731857,58.2840768 65.6271388,56.281343 67.9235724,53.6971704 C67.9235724,53.6971704 70.4765533,52.3079549 71.0726355,54.1491779 C71.0726355,54.1491779 71.1382224,52.4338219 72.4504064,53.1945934 C72.4504064,53.1945934 76.5181322,53.6187542 75.8620402,55.9514155 C75.8620402,55.9514155 76.0590239,57.1927094 77.7647293,58.2840768 C77.7647293,58.2840768 78.8799295,62.3474655 74.681253,61.8304082 C74.681253,61.8304082 72.712977,64.0271777 75.6652795,63.7041561 C75.6652795,63.7041561 76.4378217,67.3219977 72.5088546,66.6113503 C72.5088546,66.6113503 65.561552,68.5497025 64.7086993,63.7687604 C64.7086993,63.7687604 62.4124888,60.4739403 66.0864702,60.409336 C66.0864702,60.409336 67.9891593,61.0896863 68.5138544,59.3108399 L68.9731857,58.2840768 Z" id="smoke-1" fill="#E5E5E4"></path>
        <path display="opacity: 0" d="M66.3951486,11.6578449 C66.3951486,11.6578449 69.8033767,9.37835181 71.2844766,12.7129352 C71.2844766,12.7129352 71.4988673,15.756852 69.4592372,15.4990411 C69.4592372,15.4990411 71.0857407,16.3283813 69.7728631,17.2332365 C69.7728631,17.2332365 67.570052,20.9035303 65.608165,19.237696 C65.608165,19.237696 64.3236782,18.8693947 62.5183389,20 C62.5183389,20 58.1055524,19.2414055 60.4558899,15.4881776 C60.4558899,15.4881776 59.2043047,12.6382151 58.2140745,15.5840949 C58.2140745,15.5840949 54.3821064,14.6993771 56.8006349,11.2887488 C56.8006349,11.2887488 57.9938464,3.82998668 62.9832058,5.15852072 C62.9832058,5.15852072 67.1752335,4.45318414 65.6174517,7.96820858 C65.6174517,7.96820858 64.1220236,9.46949974 65.6068383,10.7627934 L66.3951486,11.6578449 Z" id="smoke-3" fill="#E5E5E4"></path>
        <path display="opacity: 0" d="M69.5974554,48.7730267 C69.5974554,48.7730267 67.6983235,51.8915731 66.1006652,52.0715998 C66.1006652,52.0715998 62.3942071,54.286382 61.4446411,51.8743269 C61.4446411,51.8743269 60.4787138,50.9366752 58.3359792,51.0834197 C58.3359792,51.0834197 54.7761675,48.312824 58.6529052,46.0941084 C58.6529052,46.0941084 53.631477,42.5074926 57.4055016,40.6258354 C57.4055016,40.6258354 62.0197133,34.5645333 65.8200979,38.1157489 C65.8200979,38.1157489 69.8813556,39.4806236 66.8223838,41.8642375 C66.8223838,41.8642375 64.7784235,42.4875232 65.4813568,44.3425546 C65.4813568,44.3425546 69.870145,45.1062308 69.5974554,48.7730267" id="smoke-2" fill="#E5E5E4"></path>
        <path display="opacity: 0" d="M25.7023801,81.2138821 C25.7023801,81.2138821 28.8834365,79.0863261 30.2655677,82.1986465 C30.2655677,82.1986465 30.4659161,85.0396744 28.5622352,84.7990476 C28.5622352,84.7990476 30.0800784,85.5733563 28.8549568,86.4178993 C28.8549568,86.4178993 26.798724,89.8435538 24.967852,88.2885065 C24.967852,88.2885065 23.7689813,87.9450013 22.0839749,89 C22.0839749,89 17.9653179,88.2919688 20.1589962,84.7889082 C20.1589962,84.7889082 18.9905864,82.1289068 18.0666065,84.8784322 C18.0666065,84.8784322 14.4900541,84.0526843 16.7471306,80.8693877 C16.7471306,80.8693877 17.8610575,73.9077812 22.5178566,75.1480105 C22.5178566,75.1480105 26.4304693,74.4894401 24.9765198,77.7701744 C24.9765198,77.7701744 23.5807678,79.1713987 24.9666138,80.3784893 L25.7023801,81.2138821 Z" id="smoke-4" fill="#E5E5E4"></path>
        <path display="opacity: 0" d="M30.4472964,59.5088408 C30.4472964,59.5088408 28.4294688,62.8222964 26.7319568,63.0135748 C26.7319568,63.0135748 22.793845,65.3667809 21.7849312,62.8039723 C21.7849312,62.8039723 20.7586334,61.8077174 18.4819779,61.9636334 C18.4819779,61.9636334 14.699678,59.0198755 18.8187118,56.6624902 C18.8187118,56.6624902 13.4834443,52.8517108 17.4933454,50.8524501 C17.4933454,50.8524501 22.3959454,44.4123166 26.4341759,48.1854832 C26.4341759,48.1854832 30.7492623,49.6356625 27.4987828,52.1682524 C27.4987828,52.1682524 25.326753,52.8304934 26.0742635,54.8014642 C26.0742635,54.8014642 30.7370291,55.6128703 30.4472964,59.5088408" id="smoke-6" fill="#E5E5E4"></path>
        <path display="opacity: 0" d="M33.9163155,71.6233298 C33.9163155,71.6233298 35.0522043,75.6158131 31.3708491,76 C31.3708491,76 28.3656502,75.2555204 29.251509,73.3729777 C29.251509,73.3729777 27.9430189,74.6793743 27.4797913,73.13323 C27.4797913,73.13323 24.6251481,69.8661647 26.8455755,68.4982875 C26.8455755,68.4982875 27.6023866,67.3771382 27.0749041,65.2859909 C27.0749041,65.2859909 29.1856409,61.2755199 32.0741592,64.7101132 C32.0741592,64.7101132 35.2159336,64.3954612 32.6817589,62.5220466 C32.6817589,62.5220466 34.7328112,59.1100051 37.2694055,62.5032534 C37.2694055,62.5032534 44.0962991,65.9813397 41.2553672,70.3690173 C41.2553672,70.3690173 40.627066,74.6246055 37.7205349,72.0271154 C37.7205349,72.0271154 36.7389656,70.1187991 35.0263948,71.144103 L33.9163155,71.6233298 Z" id="smoke-5" fill="#E5E5E4"></path>
        <rect id="Rectangle-path" fill="#614D1E" x="11.2" y="62.4" width="6.2" height="19.4"></rect>
        <polygon id="Shape" fill="#427638" points="12.9 35.7 5.4 46.6 21.8 46.6"></polygon>
        <polygon id="Shape" fill="#427638" points="13.3 41.7 1.9 58.4 27 58.4"></polygon>
        <polygon id="Shape" fill="#427638" points="13.9 49.7 0 69.9 30.3 69.9"></polygon>
        <rect id="Rectangle-path" fill="#614D1E" x="43.9" y="26.7" width="6.2" height="19.4"></rect>
        <polygon id="Shape" fill="#427638" points="45.6 0 38 10.9 54.5 10.9"></polygon>
        <polygon id="Shape" fill="#427638" points="46 6 34.5 22.7 59.7 22.7"></polygon>
        <polygon id="Shape" fill="#427638" points="46.5 14 32.7 34.1 63 34.1"></polygon>
        <rect id="Rectangle-path" fill="#614D1E" x="58.9" y="1.8" width="9" height="18.7"></rect>
        <path d="M47.5,52 L142.1,52 C142.1,25.9 120.9,4.7 94.8,4.7 C68.7,4.7 47.5,25.9 47.5,52 L47.5,52 Z" id="Shape" stroke="#4E4E4E" stroke-width="3" fill="#64BE72"></path>
        <circle id="Oval" stroke="#4E4E4E" stroke-width="3" fill="#558DCA" cx="94.6" cy="30" r="16.2"></circle>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="85.8" y="17.5" width="0.3" height="25.6"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="94.5" y="14.1" width="0.3" height="13.3"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="94.5" y="32.6" width="0.3" height="13.3"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="103" y="17.1" width="0.1" height="26.3"></rect>
        <circle id="Oval" fill="#BEBB31" cx="94.6" cy="30" r="1.1"></circle>
        <circle id="Oval" stroke="#4E4E4E" stroke-width="3" fill="#F7E611" cx="65.6" cy="33.2" r="7.2"></circle>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="65.4" y="26.2" width="0.1" height="14.2"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="59" y="33.4" width="13.5" height="0.1"></rect>
        <circle id="Oval" stroke="#4E4E4E" stroke-width="3" fill="#F7E611" cx="123.1" cy="32.9" r="7.2"></circle>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="122.8" y="25.9" width="0.1" height="14.2"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="116.4" y="33.1" width="13.5" height="0.1"></rect>
        <rect id="Rectangle-path" fill="#614D1E" x="22.9" y="41.8" width="9" height="18.7"></rect>
        <path d="M11.5,92 L106.1,92 C106.1,65.9 84.9,44.7 58.8,44.7 C32.7,44.7 11.5,65.9 11.5,92 L11.5,92 Z" id="Shape" stroke="#4E4E4E" stroke-width="3" fill="#64BE72"></path>
        <circle id="Oval" stroke="#4E4E4E" stroke-width="3" fill="#1E8442" cx="58.6" cy="70" r="16.2"></circle>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="49.9" y="57.4" width="0.3" height="25.6"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="58.5" y="54.1" width="0.3" height="13.3"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="58.5" y="72.6" width="0.3" height="13.3"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="67" y="57.1" width="0.1" height="26.3"></rect>
        <circle id="Oval" fill="#BEBB31" cx="58.7" cy="70" r="1.1"></circle>
        <circle id="Oval" stroke="#4E4E4E" stroke-width="3" fill="#BDA740" cx="29.7" cy="73.2" r="7.2"></circle>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="29.4" y="66.1" width="0.1" height="14.2"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="23" y="73.3" width="13.5" height="0.1"></rect>
        <circle id="Oval" stroke="#4E4E4E" stroke-width="3" fill="#BDA740" cx="87.1" cy="72.8" r="7.2"></circle>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="86.9" y="65.8" width="0.1" height="14.2"></rect>
        <rect id="Rectangle-path" stroke="#4E4E4E" stroke-width="3" x="80.4" y="73" width="13.5" height="0.1"></rect>
        <rect id="Rectangle-path" fill="#614D1E" x="122.1" y="69.4" width="6.2" height="19.4"></rect>
        <polygon id="Shape" fill="#427638" points="123.8 42.6 116.3 53.6 132.7 53.6"></polygon>
        <polygon id="Shape" fill="#427638" points="124.3 48.6 112.8 65.3 137.9 65.3"></polygon>
        <polygon id="Shape" fill="#427638" points="124.8 56.6 110.9 76.8 141.3 76.8"></polygon>
      </g>
    </symbol>
</svg>

<div class="container">
  <div class="row">
    <svg viewBox="0 0 100 100" width="200px" height="500px">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hobitton-smoke"></use>
    </svg>
  </div>
</div>
html, body {
    height: 100%;
}

body {
  margin: 0;
  background: #76ddb2;
}

.container {
  height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row {
    width: auto;
}

svg, use {
  display: block;
}
var smoke = document.getElementById('smoke-1');
var smoke2 = document.getElementById('smoke-2');
var smoke3 = document.getElementById('smoke-3');
var smoke4 = document.getElementById('smoke-4');
var smoke5 = document.getElementById('smoke-5');
var smoke6 = document.getElementById('smoke-6');

var timeline = new TimelineMax({ repeat: -1 });

var timeline2 = new TimelineMax({ repeat: -1 });

timeline.fromTo(
  smoke,
  2.3,
  {
    scale: 1,
    x: '-10px',
    y: '-10px',
    opacity: 1,
    ease: Power1.easeInOut
  },
  {
    scale: 2.2,
    opacity: 0,
    y: '-80px',
    ease: Power1.easeInOut
  }
).fromTo(
  smoke2,
  2.3,
  {
    scale: 1,
    x: '-5px',
    y: '-10px',
    opacity: 1,
    ease: Power1.easeInOut
  },
  {
    scale: 2.3,
    opacity: 0,
    y: '-65px',
    ease: Power1.easeInOut
  },
  '-=2'
).fromTo(
  smoke3,
  2.3,
  {
    scale: 1,
    x: '-5px',
    y: '30px',
    opacity: 1,
    ease: Power1.easeInOut
  },
  {
    scale: 2,
    opacity: 0,
    y: '-20px',
    ease: Power1.easeInOut
  },
  '-=2.2'
)

timeline2.fromTo(
  smoke4,
  2.3,
  {
    scale: 1,
    x: '-5px',
    y: '-10px',
    opacity: 1,
    ease: Power1.easeInOut
  },
  {
    scale: 2.6,
    opacity: 0,
    y: '-80px',
    ease: Power1.easeInOut
  }
).fromTo(
  smoke5,
  2.3,
  {
    scale: 1,
    x: '-10px',
    y: '-10px',
    opacity: 1,
    ease: Power1.easeInOut
  },
  {
    scale: 2.8,
    opacity: 0,
    y: '-70px',
    ease: Power1.easeInOut
  },
  '-=1.8'
).fromTo(
  smoke6,
  2.3,
  {
    scale: 1,
    x: '0px',
    y: '5px',
    opacity: 1,
    ease: Power1.easeInOut
  },
  {
    scale: 2.4,
    opacity: 0,
    y: '-70px',
    ease: Power1.easeInOut
  },
  '-=2.0'
)

timeline.timeScale(0.8);
timeline2.timeScale(0.7);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js