console
tl = gsap.timeline();
tl.set(".fire, .smoke", {visibility:"hidden"});
tl.to(".candle", {y:160, duration: 20, stagger:3, delay:1, ease: "sine"},"<");
tl.to(".stick", {height:65, duration: 20, stagger:3, ease: "sine"}, "<");
tl.set(".fire", {visibility:"visible", stagger:3 },"<");
tl.set(".fire", {visibility:"hidden", stagger:3 }, "-=9");
tl.set(".smoke", {visibility:"visible", stagger:3}, "-=9");
tl.set(".smoke", {visibility:"hidden", delay:.5, stagger:3}, "-=7.5");
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 50 425 475" style="enable-background:new 0 50 425 475;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.smoke{
stroke-dasharray: 1 5 4 7 2 6;
stroke-dashoffset: 0;
animation: burn 7s linear infinite reverse;
}
@keyframes burn {
100%{ stroke-dashoffset: 65; }
}
.message {font: normal 32px 'Pacifico', cursive; fill:
</style>
<text x="50%" y="215" class="message" text-anchor="middle">Stay safe &</text>
<text x="50%" y="255" class="message" text-anchor="middle">place your holiday</text>
<text x="50%" y="295" class="message" text-anchor="middle">message here</text>
<g class="candle">
<rect x="78" y="175" class="st0 stick" width="44" height="225"/>
<line class="st1 veke" x1="100" y1="175" x2="100" y2="160"/>
<path class="st1 smoke" d="M100,152.5c0,0-2.5-7.5,5-7.5c5,0-2.5,0,5,0c5,0,5-7.5,0-7.5s-7.5,0-12.5,0s-5-7.5,0-7.5c7.5,0,7.5-7.5,7.5-7.5 "/>
<g>
<path class="st0 fire" d="M100,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C117.5,125.4,100,110,100,110z">
<animate dur="500ms" repeatCount="indefinite" attributeName="d" values="M100,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C117.5,125.4,100,110,100,110z;M100,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C117.5,129.1,100,127.5,100,105z;M100,115c0,20-20,16.6-20,32.5c0,12.3,7.2,16.5,13.8,20.6c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-10,7.5-10
s7.5,4.5,7.5,10c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-13.3,11.3-25.6C117.5,126.6,110,125,100,115z;M100,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C117.5,129.1,100,127.5,100,105z;M100,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C117.5,125.4,100,110,100,110z"/>
</path>
</g>
</g>
<g class="candle">
<rect x="153" y="175" class="st0 stick" width="44" height="225"/>
<line class="st1 veke" x1="175" y1="175" x2="175" y2="160"/>
<path class="st1 smoke" d="M175,152.5c0,0-2.5-7.5,5-7.5c5,0-2.5,0,5,0c5,0,5-7.5,0-7.5s-7.5,0-12.5,0s-5-7.5,0-7.5c7.5,0,7.5-7.5,7.5-7.5 "/>
<g>
<path class="st0 fire" d="M175,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C192.5,125.4,175,110,175,110z">
<animate dur="500ms" repeatCount="indefinite" attributeName="d" values="M175,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C192.5,125.4,175,110,175,110z;M175,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C192.5,129.1,175,127.5,175,105z;M175,115c0,20-20,16.6-20,32.5c0,12.3,7.2,16.5,13.8,20.6c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-10,7.5-10
s7.5,4.5,7.5,10c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-13.3,11.3-25.6C192.5,126.6,185,125,175,115z;M175,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C192.5,129.1,175,127.5,175,105z;M175,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C192.5,125.4,175,110,175,110z"/>
</path>
</g>
</g>
<g class="candle">
<rect x="228" y="175" class="st0 stick" width="44" height="225"/>
<line class="st1 veke" x1="250" y1="175" x2="250" y2="160"/>
<path class="st1 smoke" d="M250,152.5c0,0-2.5-7.5,5-7.5c5,0-2.5,0,5,0c5,0,5-7.5,0-7.5s-7.5,0-12.5,0s-5-7.5,0-7.5c7.5,0,7.5-7.5,7.5-7.5 "/>
<g>
<path class="st0 fire" d="M250,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C267.5,125.4,250,110,250,110z">
<animate dur="500ms" repeatCount="indefinite" attributeName="d" values="M250,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C267.5,125.4,250,110,250,110z;M250,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C267.5,129.1,250,127.5,250,105z;M250,115c0,20-20,16.6-20,32.5c0,12.3,7.2,16.5,13.8,20.6c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-10,7.5-10
s7.5,4.5,7.5,10c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-13.3,11.3-25.6C267.5,126.6,260,125,250,115z;M250,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C267.5,129.1,250,127.5,250,105z;M250,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C267.5,125.4,250,110,250,110z"/>
</path>
</g>
</g>
<g class="candle">
<rect x="303" y="175" class="st0 stick" width="44" height="225"/>
<line class="st1 veke" x1="325" y1="175" x2="325" y2="160"/>
<path class="st1 smoke smoke2" d="M325,152.5c0,0-2.5-7.5,5-7.5c5,0-2.5,0,5,0c5,0,5-7.5,0-7.5s-7.5,0-12.5,0s-5-7.5,0-7.5c7.5,0,7.5-7.5,7.5-7.5 "/>
<g>
<path class="st0 fire" d="M325,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C342.5,125.4,325,110,325,110z">
<animate dur="500ms" repeatCount="indefinite" attributeName="d" values="M325,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C342.5,125.4,325,110,325,110z;M325,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C342.5,129.1,325,127.5,325,105z;M325,115c0,20-20,16.6-20,32.5c0,12.3,7.2,16.5,13.8,20.6c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-10,7.5-10
s7.5,4.5,7.5,10c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-13.3,11.3-25.6C342.5,126.6,335,125,325,115z;M325,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C342.5,129.1,325,127.5,325,105z;M325,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C342.5,125.4,325,110,325,110z"/>
</path>
</g>
</g>
<g>
<circle class="st0" cx="47.5" cy="372.5" r="12.5"/>
<circle class="st0" cx="72.9" cy="372.5" r="12.5"/>
<circle class="st0" cx="98.3" cy="372.5" r="12.5"/>
<circle class="st0" cx="123.7" cy="372.5" r="12.5"/>
<circle class="st0" cx="149" cy="372.5" r="12.5"/>
<circle class="st0" cx="174.4" cy="372.5" r="12.5"/>
<circle class="st0" cx="199.8" cy="372.5" r="12.5"/>
<circle class="st0" cx="225.2" cy="372.5" r="12.5"/>
<circle class="st0" cx="250.6" cy="372.5" r="12.5"/>
<circle class="st0" cx="276" cy="372.5" r="12.5"/>
<circle class="st0" cx="301.3" cy="372.5" r="12.5"/>
<circle class="st0" cx="326.7" cy="372.5" r="12.5"/>
<circle class="st0" cx="352.1" cy="372.5" r="12.5"/>
<circle class="st0" cx="377.5" cy="372.5" r="12.5"/>
</g>
<polygon class="st0" points="387.5,425 37.5,425 25,372.5 400,372.5 "/>
</svg>
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100%;
background-color: #cc3333;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
align-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-sizing: border-box;
font-family: 'Pacifico', cursive;
}
svg {
width: 80%;
height: 80%;
-webkit-perspective: 1000;
perspective: 1000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}