Space Rocket

HTML
<div class="container"> <?xml version="1.0" encoding="utf-8"?> <svg class="rocket" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 79 248" enable-background="new 0 0 79 248" xml:space="preserve"> <g class="fire"> <linearGradient id="fire-5_3_" gradientUnits="userSpaceOnUse" x1="22.5046" y1="153.1758" x2="22.5047" y2="189.7509"> <stop offset="0" style="stop-color:#F37121"/> <stop offset="1" style="stop-color:#E34E27"/> </linearGradient> <path class="fire-5" fill-rule="evenodd" clip-rule="evenodd" fill="url(#fire-5_3_)" d="M25.9,143.2c6.2,20.8,2.7,34.5-3.5,48.4 c-5.9-12.8-8.9-27.2-4.1-48.4C19.2,139.4,24.8,139.8,25.9,143.2z"/> <path class="fire-4" fill-rule="evenodd" clip-rule="evenodd" fill="#F9A31A" d="M24.7,142.8c4.6,12.5,1.4,18.4-2.4,26.8 c-0.1,0.1-0.2,0.2-0.4,0.2c-0.2,0-0.4-0.1-0.4-0.2c-3.5-7.9-5.5-15.1-2.3-26.7C20,140.2,23.9,140.6,24.7,142.8z"/> <path class="fire-3" fill-rule="evenodd" clip-rule="evenodd" fill="#FAD06D" d="M23.8,142.5c2.6,6,1.2,10.2-1.3,14.4 c-0.1,0.2-0.3,0.3-0.6,0.3c-0.3,0-0.5-0.1-0.6-0.3c-2.3-3.8-2.7-9.3-0.8-14.4C21,141.1,23.2,141.3,23.8,142.5z"/> <path class="fire-2" fill-rule="evenodd" clip-rule="evenodd" fill="#FAE6B2" d="M23.2,142.5c1.3,3.6,0.6,6.1-0.6,9.1 c-0.1,0.1-0.2,0.2-0.5,0.2c-0.2,0-0.4-0.1-0.5-0.2c-1.1-2.9-1.8-5.6-0.6-9.2C21.4,141.3,22.8,141.6,23.2,142.5z"/> <path class="fire-1" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M22.7,142.9c0.6,1.8,0.3,3.1-0.3,4.6 c0,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1c-0.6-1.4-0.9-2.8-0.3-4.6C21.7,142.3,22.5,142.5,22.7,142.9z"/> </g> <g class="fire"> <linearGradient id="fire-5_4_" gradientUnits="userSpaceOnUse" x1="58.1015" y1="153.1758" x2="58.1016" y2="189.7509"> <stop offset="0" style="stop-color:#F37121"/> <stop offset="1" style="stop-color:#E34E27"/> </linearGradient> <path class="fire-5" fill-rule="evenodd" clip-rule="evenodd" fill="url(#fire-5_4_)" d="M61.5,143.2c6.2,20.8,2.7,34.5-3.5,48.4 c-5.9-12.8-8.9-27.2-4.1-48.4C54.8,139.4,60.4,139.8,61.5,143.2z"/> <path class="fire-4" fill-rule="evenodd" clip-rule="evenodd" fill="#F9A31A" d="M60.3,142.8c4.6,12.5,1.4,18.4-2.4,26.8 c-0.1,0.1-0.2,0.2-0.4,0.2c-0.2,0-0.4-0.1-0.4-0.2c-3.5-7.9-5.5-15.1-2.3-26.7C55.6,140.2,59.5,140.6,60.3,142.8z"/> <path class="fire-3" fill-rule="evenodd" clip-rule="evenodd" fill="#FAD06D" d="M59.4,142.5c2.6,6,1.2,10.2-1.3,14.4 c-0.1,0.2-0.3,0.3-0.6,0.3c-0.3,0-0.5-0.1-0.6-0.3c-2.3-3.8-2.7-9.3-0.8-14.4C56.6,141.1,58.8,141.3,59.4,142.5z"/> <path class="fire-2" fill-rule="evenodd" clip-rule="evenodd" fill="#FAE6B2" d="M58.8,142.5c1.3,3.6,0.6,6.1-0.6,9.1 c-0.1,0.1-0.2,0.2-0.5,0.2c-0.2,0-0.4-0.1-0.5-0.2c-1.1-2.9-1.8-5.6-0.6-9.2C57,141.3,58.4,141.6,58.8,142.5z"/> <path class="fire-1" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M58.2,142.9c0.6,1.8,0.3,3.1-0.3,4.6 c0,0.1-0.1,0.1-0.2,0.1s-0.2,0-0.2-0.1c-0.6-1.4-0.9-2.8-0.3-4.6C57.3,142.3,58.1,142.5,58.2,142.9z"/> </g> <g class="fire"> <linearGradient id="fire-5_5_" gradientUnits="userSpaceOnUse" x1="40.1556" y1="154.07" x2="40.1557" y2="208.7984"> <stop offset="0" style="stop-color:#F37121"/> <stop offset="1" style="stop-color:#E34E27"/> </linearGradient> <path class="fire-5" fill-rule="evenodd" clip-rule="evenodd" fill="url(#fire-5_5_)" d="M43.8,139.2c6.7,31.2,2.9,51.6-3.8,72.4 c-6.4-19.2-9.6-40.7-4.4-72.4C36.5,133.5,42.7,134,43.8,139.2z"/> <path class="fire-4" fill-rule="evenodd" clip-rule="evenodd" fill="#F9A31A" d="M42.6,138.5c5,18.8,1.5,27.6-2.5,40.2 c-0.1,0.2-0.2,0.3-0.4,0.3c-0.2,0-0.4-0.1-0.4-0.3c-3.8-11.8-5.9-22.5-2.5-40C37.4,134.6,41.7,135.2,42.6,138.5z"/> <path class="fire-3" fill-rule="evenodd" clip-rule="evenodd" fill="#FAD06D" d="M41.5,138.1c2.8,8.9,1.3,15.3-1.4,21.5 c-0.1,0.2-0.4,0.4-0.6,0.4c-0.3,0-0.5-0.1-0.6-0.4c-2.5-5.6-2.9-14-0.9-21.5C38.5,136,41,136.3,41.5,138.1z"/> <path class="fire-2" fill-rule="evenodd" clip-rule="evenodd" fill="#FAE6B2" d="M40.9,138.1c1.4,5.4,0.7,9.1-0.7,13.6 c-0.1,0.2-0.3,0.4-0.5,0.4c-0.2,0-0.4-0.1-0.5-0.4c-1.2-4.3-1.9-8.4-0.6-13.8C38.9,136.3,40.5,136.7,40.9,138.1z"/> <path class="fire-1" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M40.3,138.7c0.7,2.7,0.3,4.6-0.3,6.9 c0,0.1-0.1,0.2-0.3,0.2c-0.1,0-0.2-0.1-0.3-0.2c-0.6-2.1-1-4.3-0.3-6.9C39.3,137.8,40.1,138,40.3,138.7z"/> </g> <g> <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M18.2,77.2c0.8-1.3,1.8-2.4,3-3.3v0c0.3-0.2,0.7-0.3,1.1-0.3 c0.4,0,0.7,0.1,1.1,0.3c1.1,0.8,2.2,2,3,3.3c0.7,1.2,1.2,2.5,1.2,3.7v52.3c0,0.4-0.2,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4h-7.6 c-0.4,0-0.7-0.2-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V80.9C17,79.7,17.5,78.4,18.2,77.2L18.2,77.2z M19.3,135.3h5.8 c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.4,0.4,0.5,0.7l1.2,3.4H16.8l1.2-3.4c0.1-0.3,0.3-0.5,0.5-0.7C18.7,135.4,19,135.3,19.3,135.3z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#BCBEC0" d="M21.5,74.3c-2.1,1.5-3.9,4.2-3.9,6.5v52.3c0,0.5,0.4,0.9,0.9,0.9 H26c0.5,0,0.9-0.4,0.9-0.9V80.9c0-2.3-1.9-5-3.9-6.5C22.5,74,21.9,74,21.5,74.3L21.5,74.3z M19.3,135.8h5.8c0.4,0,0.7,0.2,0.8,0.6 l0.9,2.7h-9.4l0.9-2.7C18.6,136,18.9,135.8,19.3,135.8z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#959799" d="M19.4,136.4h1.7l-0.7,2.2h-1.9l0.6-2 C19.2,136.5,19.3,136.4,19.4,136.4L19.4,136.4z M18.2,80.9V133c0,0.1,0.1,0.3,0.3,0.3h2.3c0.1,0,0.3-0.1,0.3-0.3V80.9 c0-0.7-0.6-1.5-1.2-1.9c-0.1-0.1-0.3-0.1-0.4,0C18.8,79.4,18.2,80.2,18.2,80.9z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#E5E6E7" d="M25,80.9V133c0,0.1,0,0.3,0.1,0.3h0.8c0.1,0,0.1-0.1,0.1-0.3 V80.9c0-0.7-0.2-0.9-0.4-1.4c0-0.1-0.1-0.1-0.2,0C25.2,79.9,25,80.2,25,80.9L25,80.9z M25.1,136.4h-0.8l0.7,2.2h1l-0.6-2 C25.3,136.5,25.2,136.4,25.1,136.4z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M26.9,91h-9.4v0.5h9.4V91L26.9,91z M26.9,120.8h-9.4v0.5h9.4 V120.8L26.9,120.8z M26.9,105.9h-9.4v0.5h9.4V105.9z"/> </g> <g> <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M26.3,77.2c0.7,1.2,1.2,2.5,1.2,3.7v52.3c0,0.4-0.2,0.7-0.4,1 c-0.3,0.3-0.6,0.4-1,0.4h-7.6c-0.4,0-0.7-0.2-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V80.9c0-1.2,0.5-2.5,1.2-3.7c0.8-1.3,1.9-2.5,3-3.3 c0.3-0.2,0.7-0.3,1.1-0.3c0.4,0,0.7,0.1,1.1,0.3v0C24.4,74.8,25.5,75.9,26.3,77.2L26.3,77.2z M26,135.5c0.2,0.2,0.4,0.4,0.5,0.7 l1.2,3.4H16.8l1.2-3.4c0.1-0.3,0.3-0.5,0.5-0.7c0.2-0.2,0.5-0.3,0.8-0.3h5.8C25.4,135.3,25.7,135.4,26,135.5z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#BCBEC0" d="M23,74.3c-0.4-0.3-1-0.3-1.5,0c-2.1,1.5-3.9,4.2-3.9,6.5v52.3 c0,0.5,0.4,0.9,0.9,0.9H26c0.5,0,0.9-0.4,0.9-0.9V80.9C26.9,78.6,25.1,75.9,23,74.3L23,74.3z M26,136.4l0.9,2.7h-9.4l0.9-2.7 c0.1-0.4,0.4-0.6,0.8-0.6h5.8C25.5,135.8,25.8,136,26,136.4z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#959799" d="M25.1,136.4c0.1,0,0.2,0.1,0.3,0.2l0.6,2H24l-0.7-2.2H25.1 L25.1,136.4z M25,78.9c-0.1-0.1-0.3-0.1-0.4,0c-0.6,0.5-1.2,1.3-1.2,1.9V133c0,0.1,0.1,0.3,0.3,0.3h2.3c0.1,0,0.3-0.1,0.3-0.3 V80.9C26.2,80.2,25.6,79.4,25,78.9z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#E5E6E7" d="M19.4,80.9c0-0.7-0.2-0.9-0.4-1.4c0-0.1-0.1-0.1-0.2,0 c-0.2,0.5-0.4,0.7-0.4,1.4V133c0,0.1,0,0.3,0.1,0.3h0.8c0.1,0,0.1-0.1,0.1-0.3V80.9L19.4,80.9z M19.1,136.6l-0.6,2h1l0.7-2.2h-0.8 C19.2,136.4,19.1,136.5,19.1,136.6z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M17.5,91v0.5h9.4V91H17.5L17.5,91z M17.5,120.8v0.5h9.4v-0.5 H17.5L17.5,120.8z M17.5,106.4h9.4v-0.5h-9.4V106.4z"/> </g> <g> <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M53.3,77.2c0.8-1.3,1.8-2.4,3-3.3v0c0.3-0.2,0.7-0.3,1.1-0.3 c0.4,0,0.7,0.1,1.1,0.3c1.1,0.8,2.2,2,3,3.3c0.7,1.2,1.2,2.5,1.2,3.7v52.3c0,0.4-0.2,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4h-7.6 c-0.4,0-0.7-0.2-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V80.9C52.1,79.7,52.6,78.4,53.3,77.2L53.3,77.2z M54.4,135.3h5.8 c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.4,0.4,0.5,0.7l1.2,3.4H51.9l1.2-3.4c0.1-0.3,0.3-0.5,0.5-0.7C53.8,135.4,54.1,135.3,54.4,135.3z "/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#BCBEC0" d="M56.6,74.3c-2.1,1.5-3.9,4.2-3.9,6.5v52.3c0,0.5,0.4,0.9,0.9,0.9 h7.6c0.5,0,0.9-0.4,0.9-0.9V80.9c0-2.3-1.9-5-3.9-6.5C57.6,74,57.1,74,56.6,74.3L56.6,74.3z M54.4,135.8h5.8 c0.4,0,0.7,0.2,0.8,0.6l0.9,2.7h-9.4l0.9-2.7C53.7,136,54,135.8,54.4,135.8z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#959799" d="M54.5,136.4h1.7l-0.7,2.2h-1.9l0.6-2 C54.3,136.5,54.4,136.4,54.5,136.4L54.5,136.4z M53.4,80.9V133c0,0.1,0.1,0.3,0.3,0.3h2.3c0.1,0,0.3-0.1,0.3-0.3V80.9 c0-0.7-0.6-1.5-1.2-1.9c-0.1-0.1-0.3-0.1-0.4,0C53.9,79.4,53.4,80.2,53.4,80.9z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#E5E6E7" d="M60.1,80.9V133c0,0.1,0,0.3,0.1,0.3h0.8c0.1,0,0.1-0.1,0.1-0.3 V80.9c0-0.7-0.2-0.9-0.4-1.4c0-0.1-0.1-0.1-0.2,0C60.3,79.9,60.1,80.2,60.1,80.9L60.1,80.9z M60.2,136.4h-0.8l0.7,2.2h1l-0.6-2 C60.4,136.5,60.3,136.4,60.2,136.4z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#838587" d="M62,91h-9.4v0.5H62V91L62,91z M62,120.8h-9.4v0.5H62V120.8 L62,120.8z M62,105.9h-9.4v0.5H62V105.9z"/> </g> <g> <path fill-rule="evenodd" clip-rule="evenodd" fill="#DF5C3B" d="M31.5,64.1c1.6-2.3,4-4.4,6.4-5.9c0.6-0.4,1.2-0.5,1.9-0.5 c0.7,0,1.3,0.2,1.9,0.5c2.4,1.5,4.8,3.6,6.4,5.9c1.5,2.1,2.5,4.4,2.5,6.6v59.9c0,0.6-0.3,1.1-0.7,1.5c-0.4,0.4-1,0.6-1.7,0.6H31.4 c-0.7,0-1.2-0.2-1.7-0.6c-0.5-0.4-0.7-0.9-0.7-1.5V70.7C28.9,68.6,29.9,66.3,31.5,64.1z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#F27635" d="M38.2,58.7c-4.6,2.8-8.7,7.8-8.7,12v59.9c0,0.9,0.9,1.6,1.9,1.6 h16.8c1,0,1.9-0.7,1.9-1.6V70.7c0-4.2-4.1-9.2-8.7-12C40.4,58.1,39.1,58.1,38.2,58.7z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#F58C3D" d="M40.9,63.9c-2.6,1.6-4.9,4.4-4.9,6.8v58.6c0,0.5,0.5,0.9,1.1,0.9 h9.5c0.6,0,1.1-0.4,1.1-0.9V70.7c0-2.4-2.3-5.2-4.9-6.8C42.2,63.6,41.5,63.6,40.9,63.9z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#FBC399" d="M42.9,70.7V128c0,0.4,0.4,0.7,0.8,0.7H45c0.4,0,0.8-0.3,0.8-0.7 V70.7C45.8,68.2,42.9,68.3,42.9,70.7z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#DF5C3B" d="M50.4,81.7H29.1v0.5h21.3V81.7L50.4,81.7z M50.4,111.5H29.1v0.5 h21.3V111.5L50.4,111.5z M50.4,96.6H29.1v0.5h21.3V96.6z"/> </g> <g> <path fill-rule="evenodd" clip-rule="evenodd" fill="#373435" d="M65.1,125.7l-18.8,3.2l0.8,2.4c0.4,1.2-0.3,2.2-1.5,2.2H42 l-0.6,0.8c-0.8,1-2.4,1-3.1,0l-0.6-0.8H34c-1.3,0-1.9-1-1.5-2.2l0.8-2.4l-18.8-3.2c-0.5-0.1-0.8-0.5-0.7-1 c0.2-1.4,0.3-2.5,0.7-3.6c0.9-2.2,2.7-3.3,4.6-4.6c5.8-4.2,13.5-9.7,13.5-14.6v-9.8c0-2,0.6-4,1.5-5.8c1.1-2.1,2.6-4,4-5.2 c1-0.9,2.5-0.9,3.5,0c1.4,1.2,3,3.1,4,5.2C46.4,88,47,90,47,92.1v9.8c0,4.8,7.7,10.4,13.5,14.6c1.8,1.3,3.7,2.4,4.6,4.6 c0.4,1.1,0.6,2.3,0.7,3.6C65.8,125.2,65.5,125.6,65.1,125.7z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#DBE7EE" d="M45.7,128.5l19.3-3.3c0.2,0,0.4-0.3,0.3-0.5 c-0.3-2.7-0.5-4.6-3-6.4c-5.9-4.3-15.8-10.7-15.8-16.5v-9.8c0-4.4-2.8-8.4-5.3-10.6c-0.8-0.7-2.1-0.7-2.9,0 c-2.5,2.2-5.3,6.2-5.3,10.6v9.8c0,5.7-9.9,12.1-15.8,16.5c-2.4,1.8-2.7,3.7-3,6.4c0,0.2,0.1,0.4,0.3,0.5l19.3,3.3l-0.9,2.9 c-0.3,0.9,0.2,1.6,1.1,1.6h3.8l0.7,1c0.3,0.4,0.7,0.6,1.2,0.6c0.5,0,0.9-0.2,1.2-0.6l0.7-1h3.8c0.9,0,1.4-0.7,1.1-1.6L45.7,128.5z "/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#EBF3F6" d="M39.8,134.5c0.5,0,0.9-0.2,1.2-0.6l0.7-1h3.8c1,0,1.4-0.7,1-1.8 l-0.1-0.4l-0.7-2.3l0.7-0.1l0.1,0c0-8.8,0-17.6,0-26.5v-9.4c0-2.5-0.5-4.4-1.7-6.6c-0.7-1.2-1.5-2.4-2.4-3.3 c-0.4-0.4-0.8-0.8-1.2-1.2c-0.4-0.4-0.9-0.5-1.4-0.5C39.8,98.8,39.8,116.6,39.8,134.5z"/> <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FDFDFD" points="44.7,131.6 42.2,131.6 42.2,89.4 43.5,89.9 42.2,88.6 42.2,83.8 43.7,85.9 43.7,129.2 "/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#C4CDD2" d="M41.7,128.4v4.5h0.4v-1.1h4.6l-0.1-0.4h-4.6v-1.1h4.2l-0.1-0.4 h-4.1v-1.2h3.7l-0.1-0.4H41.7L41.7,128.4z M46.7,100v0.4H40v9.5h6.7v0.4H40v9.5h6.7v0.4H40v14.4h-0.4v-14.4h-6.9v-0.4h6.9v-9.5 h-6.9v-0.4h6.9v-9.5h-6.9V100h6.9V82H40v18H46.7L46.7,100z M37.8,128.4h-3.9l-0.1,0.4h3.7v1.2h-4.1l-0.1,0.4h4.2v1.1h-4.6 l-0.1,0.4h4.6v1.1h0.4V128.4z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#373435" d="M44,84c-0.2-0.3-1.4-1.5-1.6-1.8c-1.7-2.1-3.4-2.1-5.1,0 C37,82.5,36,83.7,35.7,84C38.2,82.3,41.3,82.1,44,84L44,84z M26.1,127.4v-3.2h-6.6v2.1h-0.4v-2.1h-5v-0.7h5h0.4h6.6h0.4h6.2V91H33 v37.5h-0.4v-4.4h-6.2v3.2H26.1L26.1,127.4z M53.4,127.4v-3.2H60v2.1h0.4v-2.1h5v-0.7h-5H60h-6.6H53h-6.2V91h-0.4v37.5h0.4v-4.4H53 v3.2H53.4L53.4,127.4z M36.6,89.7c2.1-1,4.2-1,6.3,0c0.3,0.1,0.6,0.3,0.9,0.5c-0.3-0.3-0.6-0.6-0.9-0.9c-2.1-2.1-4.2-2.1-6.3,0 c-0.3,0.3-0.6,0.6-0.9,0.9C36.1,90,36.4,89.8,36.6,89.7z"/> </g> </svg> <div class="sky"> <div class="sky-bg"></div> <div class="sky-bg"></div> </div> </div>
SCSS
* { margin: 0; padding: 0; } html { font-size: 62.5%; } body { overflow: hidden; } .container { height: 100vh; display: flex; justify-content: center; align-items: flex-end; } .rocket { height: 50rem; transform: translateY(100vh); } .sky { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: 100%; min-height: 100vh; background-color: black; height: 200vh; z-index: -1; } .sky-bg { height: 100vh; background-size: 28rem; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.05 259.2"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M115.66,178.42a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM85,106.62a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm30.47,125.84a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM86.79,248.39a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-80,2.38a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM19.3,199.46a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm58.7-32a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-36.9-1.53a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM79.63,201a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm60.79-110.3a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM52.93,15.78a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM81.16,65.59a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM28.54,112.91a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM122,171.59a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-79.5,46.86a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm40.06-85.27a.6.6,0,1,0,.6.6.6.6,0,0,0-.6-.6ZM48.1,140.69a.6.6,0,1,0,.6.6.6.6,0,0,0-.6-.6ZM56.33,156a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM34.76,203.62a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM42.17,214a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-15,20.89a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM.3,244.27a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm22-62.4a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM18.66,186a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm79.59-7.39a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM91.5,171a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-29,83.17a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm37.48-9.3a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-28.69-5.7a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM68.4,31.72a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM125,119.09a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-97.2,21.08a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3ZM106.5,199a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm6.75,9.9a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm-59.85.6a.3.3,0,1,0,.3.3.3.3,0,0,0-.3-.3Zm56.91-116.9a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM18.69,168.48a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm63.62-21.42a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM43,26.62a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm.24,34.19a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM17.35,92.25a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM101,46.12a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm26.25-31.5a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm-.39-11.76a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM89.27,6.94a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM13.71,1.7a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm104.4,64.47a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm9.77,157.38a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39Zm-29.63-41a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM14.68,212.4a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM8.93,135.84a.39.39,0,1,0,.39.39.39.39,0,0,0-.39-.39ZM114.41,56.6a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm20.75-44.86a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-118.58,78a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm19-82.56a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM2.81,26.71a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM134.39,141.54a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM5.3,210.86a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm78.17-53a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm37.56,88a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-86.41,1.43a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm39-15.5a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm-31.88-163a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM107.24,12.7a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm20.73,51a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM14.35,5.22a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM57.57,12a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM86.49,3.24a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm32.44,15.51a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm.26-11.81a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm18,65.51a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-18-22.86a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM83.48,59.1a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm44.41,46.26a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-99.52,11a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM10.09,73.91a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm89.39,44.44a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm5.78,59.57a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm28.1,17.48a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-33.9,28.28a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm36.91,28.7a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM64.26,109.62a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm1.46,3.44a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-64.87-7a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm44,16.79a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM50.7,75.37a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM83.22,85.52a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM94.7,51a.26.26,0,1,0,.26.26A.26.26,0,0,0,94.7,51Zm28.59,5a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm13.59-16.51a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-17.7-4.41a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-76.6,14.4a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-28.49-8a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm4-22.58a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-8-11.81a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-5.31-4A.26.26,0,1,0,5,3.5a.26.26,0,0,0-.26-.26ZM47.19,96a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77Zm70.54,49.47a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm24.07-61.44a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM35.66,86.57a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM89.91,36.64a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm51.63-19.35a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm-4.14,29.8a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM47.19.75a.77.77,0,1,0,.77.77.77.77,0,0,0-.77-.77ZM9.58,42.08a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm7.89-18.9a.26.26,0,1,0,.26.26A.26.26,0,0,0,17.46,23.17Z" fill="%23fefefe" fill-rule="evenodd"/><path d="M65,10.54a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26Zm66,229.22a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM115.83,81.52a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm.84,32.92a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM121,208.1a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm-93.85-9.9a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM65.83,126a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm66.08,56.49a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm-93.15-.15a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM138.83,87.84a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM35.57,1.81a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM83,52.51a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM81.09,73.68a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm32.55,73.76a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM13.81,147a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm0,76.49a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM23.35,58.64a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM114.41,12.7a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM2,40.16a.49.49,0,1,0,.49.49A.49.49,0,0,0,2,40.16Zm49.41,6a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm57,212.11a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM4.81,167.51a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm134,1.92a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM9.32,121.08a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm129.28,7a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM8.11,60.56a.26.26,0,1,0,.26.26.26.26,0,0,0-.26-.26ZM.86,0a.38.38,0,1,0,.38.38A.38.38,0,0,0,.86,0ZM134.77,6.45a.38.38,0,1,0,.38.38.38.38,0,0,0-.38-.38Zm-4.82,36a.38.38,0,1,0,.38.38A.38.38,0,0,0,129.95,42.47Z" fill="%2300afef" fill-rule="evenodd"/><path d="M125,7.71a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm-107,242.22a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm43.87-6.5a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM27.16,129.18a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm78.62,12.72a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM55.61,177.76a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM8,193.6a.42.42,0,1,0,.42.42A.42.42,0,0,0,8,193.6ZM38.28,97.67a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm53.34,6.18a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm-42.5,44.94a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42Zm73.2,30.42a.42.42,0,1,0,.42.42.42.42,0,0,0-.42-.42ZM94.44,49.57a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49Zm41.49,172a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM.49,78a.49.49,0,1,0,.49.49A.49.49,0,0,0,.49,78Zm134.66,37.82a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM5.53,145.52A.49.49,0,1,0,6,146a.49.49,0,0,0-.49-.49ZM106.76,84.81a.49.49,0,1,0,.49.49.49.49,0,0,0-.49-.49ZM21.43,41.13a.49.49,0,1,0,.49.49A.49.49,0,0,0,21.43,41.13Z" fill="%23ec268f" fill-rule="evenodd"/></g></g></svg>'); }
ES6
TweenMax.fromTo('.fire', .03, {x: -.5, y: -.4}, {x: .5, y: .4, repeat: -1, yoyo: true}) var tl = new TimelineMax({repeat: -1}), tl_sky = new TimelineMax({repeat: -1}); tl_sky.fromTo('.sky', 12, {transform: 'translateY(-100vh)'}, {transform: 'translateY(0)', ease: Power0.easeNone}) tl.to('.rocket', 3, {transform: 'translateY(-5vh)', ease: Expo.easeOut}) //INSERT ROCKET .fromTo('.fire', .4, {scaleY: .7}, {scaleY: 1.5}, '+=1.5') //SCALE THE FLAMES .add(() => tl_sky.timeScale(25), '-=.4') //SPEED UP THE SKY .to('.rocket', 2, {transform: 'translateY(-130vh)', ease: Power3.easeOut}, '+=2.5') //HIDE THE ROCK .add(() => TweenMax.to(tl_sky, 1.5, {timeScale: 2}), '-=.5') //RETURN SKY TO THE ORIGINAL SPEED tl_sky.timeScale(1);
Expand for more options Login