body
  .scene
    .wing-left
    .wing-right
    .exhaust
    .capsule
      .top
        .shadow
      .base
    .window-big
    .window-small
    - for i in (1..4)
      div class="fire-#{i}"
    - for i in (1..4)
      div class="spark-#{i}"
    - for i in (1..16)
      div class="star star--#{i}"
View Compiled
$color-purple: #743388;
$color-darkpurple: #272425;
$color-orange: #EF8B32;
$color-red: #E82134;
$color-bg: #1D1D1D;

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    background: $color-bg;
    padding: 20px;
}

.scene {
    width: 202px;
    height: 380px;
    background:$color-bg;
    animation:vibration 0.2s infinite;
    position:absolute;
    margin: auto;
    top:0;left:-100px;right:0;bottom:0;
}

.wing-left { 
    position: absolute;
    z-index: 10;
    height: 103px;
    width: 0px;
    padding: 0px;
    top: 82px;
    left: 16px;
    transform: rotate(10deg) skew(5deg);
    border-top: 21px solid transparent;
    border-right: 38px solid $color-purple;
    border-bottom: 19px solid transparent;
    &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: -50px; 
        height: 0px; 
        width: 0px; 
        border-top: 20px solid transparent; 
        border-right: 50px solid $color-bg; 
        border-bottom: 50px solid transparent;
    }
}

.wing-right { 
    position: absolute;
    z-index: 10;
    height: 103px;
    width: 0px;
    padding: 0px;
    top: 62px;
    right: 17px;
    transform: rotate(-10deg) skew(-5deg);
    border-top: 0 solid transparent;
    border-right: 40px solid $color-purple;
    border-bottom: 15px solid transparent;
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: -33px;
        left: -19px;
        height: 0px;
        width: 0px;
        border-top: 36px solid transparent;
        border-right: 68px solid $color-bg;
        border-bottom: 45px solid transparent;
    }
}

.exhaust {
    position: absolute;
    z-index: 20;
    top: 156px;
    left: 51px;
    height: 0px;
    width: 101px;
    border-top: 23px solid $color-purple;
    border-left: 9px solid transparent;
    border-right: 8px solid transparent;
}

.capsule {
    position: absolute;
    z-index: 30;
    background: $color-bg;
    left: 46px;
    top: 5px;
    width: 111px;
    height: 156px;
    opacity: 1;
    overflow:hidden;
    & .base {
        position: absolute;
        background: #ccc;
        width: 112px;
        height: 94px;
        top: 62px;
        left: 0px;
        background: linear-gradient(to right, #F3F3F3 0%, #F3F3F3 65%, #E0E0E0 65%, #E0E0E0 100%);
    }
    & .top {
        position: absolute;
        height: 0px;
        width: 0px;
        padding: 0px;
        left: 0;
        border-left: 56px solid transparent;
        border-right: 56px solid transparent;
        border-bottom: 62px solid #F3F3F3;
        &:after {
            content: "";
            position: absolute;
            height: 0px;
            width: 0px;
            border-left: 0px solid transparent;
            border-right: 156px solid transparent;
            border-bottom: 84px solid $color-bg;
            transform: skew(42deg);
            top: -14px;
            left: 25px;
            z-index: 50;
        }
        .shadow {
            position: absolute;
            height: 0px;
            width: 0px;
            border-left: 20px solid transparent;
            border-right: 80px solid transparent;
            border-bottom: 90px solid #E0E0E0;
            transform: skew(26deg);
            top: -20px;
            left: -3px;
            z-index: 40;
        }
    }
}

.window-big {
    width: 70px;
    height: 70px;
    background: $color-purple;
    border-radius: 8em;
    position: absolute;
    z-index: 40;
    top: 57px;
    left: 66px;
}

.window-small {
    width: 44px;
    height: 44px;
    background: $color-darkpurple;
    border-radius: 8em;
    position: absolute;
    z-index: 50;
    top: 70px;
    left: 79px;
}

.propulsed__slow {
   animation: fire_propulsion 0.3s ease-in infinite; 
}

.main_fire {
    animation:main_fire 0.1s cubic-bezier(0.175, 0.885, 0.420, 1.410) infinite;
}

.fire-1 {
    position: absolute;
    height: 70px;
    width: 70px;
    top: 169px;
    transform-origin: 50% 50%;
    transform: rotate(-40deg) skew(1deg, -11deg);
    z-index: 10;
    left: 64px;
    background: linear-gradient(135deg, #EF8B32 0%, #EF8B32 50%, #E82134 50%, #E82134 100%);

    @extend .main_fire;
}

.fire-2 {
    display: none;
    position: absolute;
    height: 55px;
    width: 55px;
    top: 180px;
    transform-origin: 50% 50%;
    transform: rotate(-33deg) skew(0deg, -30deg);
    z-index: 15;
    left: 58px;
    background: linear-gradient(135deg, #E82134 0%, #E82134 50%, #EF8B32 50%, #EF8B32 100%);

    @extend .propulsed__slow;
    animation-delay:0.2s;
}

.fire-3 {
    position: absolute;
    height: 22px;
    width: 22px;
    top: 196px;
    left: 58px;
    transform-origin: 50% 50%;
    transform: rotate(-33deg) skew(0deg, -30deg);
    z-index: 20;
    background: linear-gradient(135deg, $color-orange 0%, $color-orange 50%, $color-red 50%, $color-red 100%);

    @extend .propulsed__slow;
    animation-delay:0.2s;
}

.fire-4 {
    position: absolute;
    height: 22px;
    width: 22px;
    top: 200px;
    transform-origin: 50% 50%;
    transform: rotate(-33deg) skew(0deg, -30deg);
    z-index: 20;
    left: 126px;
    background: linear-gradient(135deg, $color-red 0%, $color-red 50%, $color-orange 50%, $color-orange 100%);

    @extend .propulsed__slow;

}

.propulsed {
   animation: dancing_fire 0.24s infinite; 
}

.spark-1 {
    position: absolute;
    bottom: 177px;
    z-index: 20;
    right: 70px;
    width: 12px;
    height: 12px;
    background:$color-orange;
    transform-origin: 50% 50%;

    @extend .propulsed;
}

.spark-2 {
    position: absolute;
    bottom: 147px;
    z-index: 20;
    left: 52px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background:$color-orange;

    @extend .propulsed;
    animation-delay:0.22s;
}

.spark-3 {
    position: absolute;
    bottom: 90px;
    z-index: 20;
    left: 109px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background:$color-red;

    @extend .propulsed;
    animation-delay:0.32s;
}

.spark-4 {
    position: absolute;
    bottom: 20px;
    left: 83px;
    z-index: 20;
    width: 10px;
    height: 10px;
    background:$color-orange;

    @extend .propulsed;
    animation-delay:0.16s;

}

.hyperspace {
   animation: hyperspace 0.4s infinite; 
}

.star {
    position: absolute;
    width: 4px;
    height: 20px;
    background:#fff;
    z-index: 90;
    @extend .hyperspace;
    &.star--1 {
        left: 50px;
        top: -10px;
        animation-delay:0.10s;
    }
    &.star--2 {
        right: 60px;
        top: 30px;
        animation-delay:0.10s;
    }
    &.star--3 {
        top: 80px;
        left: 25px;
        animation-delay:0.2s;
    }
    &.star--4 {
        top: -20px;
        right: 75px;
        animation-delay:0.2s;
    }
    &.star--5 {
        right: 30px;
        top: -60px;
        animation-delay:0.30s;
    }
    &.star--6 {
        right: 160px;
        top: 50px;
        animation-delay:0.40s;
    }
    &.star--7 {
        top: 20px;
        left: 75px;
        animation-delay:0.3s;
    }
    &.star--8 {
        top: -30px;
        right: 95px;
        animation-delay:0.4s;
    }
    &.star--9 {
        right: 30px;
        top: -60px;
        animation-delay:0.30s;
    }
    &.star--10 {
        right: 160px;
        top: 50px;
        animation-delay:0.40s;
    }
    &.star--11 {
        top: 20px;
        left: 75px;
        animation-delay:0.3s;
    }
    &.star--12 {
        top: -30px;
        right: 95px;
        animation-delay:0.4s;
    }

    &.star--13 {
        left: -30px;
        top: -60px;
        animation-delay:0.30s;
    }
    &.star--14 {
        right: -20px;
        top: 50px;
        animation-delay:0.40s;
    }
    &.star--15 {
        top: 20px;
        left: -75px;
        animation-delay:0.3s;
    }
    &.star--16 {
        top: -30px;
        right: -95px;
        animation-delay:0.4s;
    }
}

@keyframes dancing_fire {
    0%   { 
        transform-origin: 50% 50%;
        transform:translate(0,-10px) scale(1);
        opacity: 1;
    }
    100% { 
        transform:translate(0,50px) scale(1);
        opacity: 0;
    }
}

@keyframes fire_propulsion {
    0%   { 
        transform:translate(0,-10px) scale(1) rotate(-33deg) skew(0deg, -30deg);
        transform-origin: 50% 50%;
        opacity: 1;
    }
    100% { 
        transform:translate(0,50px) scale(0.7) rotate(-33deg) skew(0deg, -30deg);
        opacity: 0;
    }
}

@keyframes main_fire {
    0% {
        transform:translate(0,5px) scale(1.1,1) rotate(-33deg) skew(0deg, -30deg);
    }
    100% {
        transform:translate(0,0px) scale(1,1.4) rotate(-33deg) skew(0deg, -30deg);
    }
}

@keyframes vibration {
    0%   { 
        transform:scale(1) translate(0,0) rotate(45deg);
    }
    50%   { 
        transform:scale(1) translate(1px,-1px) rotate(45deg);
    }
    100% { 
        transform:scale(1) translate(0,0) rotate(45deg);
    }
}

@keyframes hyperspace {
    0%   { 
        transform:translate(0,-100px) scale(1,0);
        opacity: 1;
    }
    100% { 
        transform:translate(0,400px) scale(1,1);
        opacity: 0;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.