<div id="deadline">
  <svg preserveAspectRatio="none" id="line" viewBox="0 0 581 158" enable-background="new 0 0 581 158">
    <g id="fire">
      <rect id="mask-fire-black" x="511" y="41" width="38" height="34"/>
      <g>
        <defs>
          <rect id="mask_fire" x="511" y="41" width="38" height="34"/>
        </defs>
        <clipPath id="mask-fire_1_">
          <use xlink:href="#mask_fire"  overflow="visible"/>
        </clipPath>
        <g id="group-fire" clip-path="url(#mask-fire_1_)">
          <path id="red-flame" fill="#B71342" d="M528.377,100.291c6.207,0,10.947-3.272,10.834-8.576 c-0.112-5.305-2.934-8.803-8.237-10.383c-5.306-1.581-3.838-7.9-0.79-9.707c-7.337,2.032-7.581,5.891-7.11,8.238 c0.789,3.951,7.56,4.402,5.077,9.48c-2.482,5.079-8.012,1.129-6.319-2.257c-2.843,2.233-4.78,6.681-2.259,9.703 C521.256,98.809,524.175,100.291,528.377,100.291z"/>
          <path id="yellow-flame" opacity="0.71" fill="#F7B523" d="M528.837,100.291c4.197,0,5.108-1.854,5.974-5.417 c0.902-3.724-1.129-6.207-5.305-9.931c-2.396-2.137-1.581-4.176-0.565-6.32c-4.401,1.918-3.384,5.304-2.482,6.658 c1.511,2.267,2.099,2.364,0.42,5.8c-1.679,3.435-5.42,0.764-4.275-1.527c-1.921,1.512-2.373,4.04-1.528,6.563 C522.057,99.051,525.994,100.291,528.837,100.291z"/>
          <path id="white-flame" opacity="0.81" fill="#FFFFFF" d="M529.461,100.291c-2.364,0-4.174-1.322-4.129-3.469 c0.04-2.145,1.117-3.56,3.141-4.198c2.022-0.638,1.463-3.195,0.302-3.925c2.798,0.821,2.89,2.382,2.711,3.332 c-0.301,1.597-2.883,1.779-1.938,3.834c0.912,1.975,3.286,0.938,2.409-0.913c1.086,0.903,1.826,2.701,0.864,3.924 C532.18,99.691,531.064,100.291,529.461,100.291z"/>
        </g>
      </g>
    </g>
    <g id="progress-trail">
      <path fill="#FFFFFF" d="M491.979,83.878c1.215-0.73-0.62-5.404-3.229-11.044c-2.583-5.584-5.034-10.066-7.229-8.878
                              c-2.854,1.544-0.192,6.286,2.979,11.628C487.667,80.917,490.667,84.667,491.979,83.878z"/>
      <path fill="#FFFFFF" d="M571,76v-5h-23.608c0.476-9.951-4.642-13.25-4.642-13.25l-3.125,4c0,0,3.726,2.7,3.625,5.125
                              c-0.071,1.714-2.711,3.18-4.962,4.125H517v5h10v24h-25v-5.666c0,0,0.839,0,2.839-0.667s6.172-3.667,4.005-6.333
                              s-7.49,0.333-9.656,0.166s-6.479-1.5-8.146,1.917c-1.551,3.178,0.791,5.25,5.541,6.083l-0.065,4.5H16c-2.761,0-5,2.238-5,5v17
                              c0,2.762,2.239,5,5,5h549c2.762,0,5-2.238,5-5v-17c0-2.762-2.238-5-5-5h-3V76H571z"/>
      <path fill="#FFFFFF" d="M535,65.625c1.125,0.625,2.25-1.125,2.25-1.125l11.625-22.375c0,0,0.75-0.875-1.75-2.125
                              s-3.375,0.25-3.375,0.25s-8.75,21.625-9.875,23.5S533.875,65,535,65.625z"/>
    </g>
    <g>
      <defs>
        <path id="SVGID_1_" d="M484.5,75.584c-3.172-5.342-5.833-10.084-2.979-11.628c2.195-1.188,4.646,3.294,7.229,8.878
                               c2.609,5.64,4.444,10.313,3.229,11.044C490.667,84.667,487.667,80.917,484.5,75.584z M571,76v-5h-23.608
                               c0.476-9.951-4.642-13.25-4.642-13.25l-3.125,4c0,0,3.726,2.7,3.625,5.125c-0.071,1.714-2.711,3.18-4.962,4.125H517v5h10v24h-25
                               v-5.666c0,0,0.839,0,2.839-0.667s6.172-3.667,4.005-6.333s-7.49,0.333-9.656,0.166s-6.479-1.5-8.146,1.917
                               c-1.551,3.178,0.791,5.25,5.541,6.083l-0.065,4.5H16c-2.761,0-5,2.238-5,5v17c0,2.762,2.239,5,5,5h549c2.762,0,5-2.238,5-5v-17
                               c0-2.762-2.238-5-5-5h-3V76H571z M535,65.625c1.125,0.625,2.25-1.125,2.25-1.125l11.625-22.375c0,0,0.75-0.875-1.75-2.125
                               s-3.375,0.25-3.375,0.25s-8.75,21.625-9.875,23.5S533.875,65,535,65.625z"/>
      </defs>
      <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"/>
      </clipPath>
      <rect id="progress-time-fill" x="-100%" y="34" clip-path="url(#SVGID_2_)" fill="#BE002A" width="586" height="103"/>
    </g>

    <g id="death-group">
      <path id="death" fill="#BE002A" d="M-46.25,40.416c-5.42-0.281-8.349,3.17-13.25,3.918c-5.716,0.871-10.583-0.918-10.583-0.918
                                         C-67.5,49-65.175,50.6-62.083,52c5.333,2.416,4.083,3.5,2.084,4.5c-16.5,4.833-15.417,27.917-15.417,27.917L-75.5,84.75
                                         c-1,12.25-20.25,18.75-20.25,18.75s39.447,13.471,46.25-4.25c3.583-9.333-1.553-16.869-1.667-22.75
                                         c-0.076-3.871,2.842-8.529,6.084-12.334c3.596-4.22,6.958-10.374,6.958-15.416C-38.125,43.186-39.833,40.75-46.25,40.416z
                                         M-40,51.959c-0.882,3.004-2.779,6.906-4.154,6.537s-0.939-4.32,0.112-7.704c0.82-2.64,2.672-5.96,3.959-5.583
                                         C-39.005,45.523-39.073,48.8-40,51.959z"/>
      <path id="death-arm" fill="#BE002A" d="M-53.375,75.25c0,0,9.375,2.25,11.25,0.25s2.313-2.342,3.375-2.791
                                             c1.083-0.459,4.375-1.75,4.292-4.75c-0.101-3.627,0.271-4.594,1.333-5.043c1.083-0.457,2.75-1.666,2.75-1.666
                                             s0.708-0.291,0.5-0.875s-0.791-2.125-1.583-2.959c-0.792-0.832-2.375-1.874-2.917-1.332c-0.542,0.541-7.875,7.166-7.875,7.166
                                             s-2.667,2.791-3.417,0.125S-49.833,61-49.833,61s-3.417,1.416-3.417,1.541s-1.25,5.834-1.25,5.834l-0.583,5.833L-53.375,75.25z"/>
      <path id="death-tool" fill="#BE002A" d="M-20.996,26.839l-42.819,91.475l1.812,0.848l38.342-81.909c0,0,8.833,2.643,12.412,7.414
                                              c5,6.668,4.75,14.084,4.75,14.084s4.354-7.732,0.083-17.666C-10,32.75-19.647,28.676-19.647,28.676l0.463-0.988L-20.996,26.839z"/>
    </g>
    <path id="designer-body" fill="#FEFFFE" d="M514.75,100.334c0,0,1.25-16.834-6.75-16.5c-5.501,0.229-5.583,3-10.833,1.666
                                               c-3.251-0.826-5.084-15.75-0.834-22c4.948-7.277,12.086-9.266,13.334-7.833c2.25,2.583-2,10.833-4.5,14.167
                                               c-2.5,3.333-1.833,10.416,0.5,9.916s8.026-0.141,10,2.25c3.166,3.834,4.916,17.667,4.916,17.667l0.917,2.5l-4,0.167L514.75,100.334z
                                               "/>

    <circle id="designer-head" fill="#FEFFFE" cx="516.083" cy="53.25" r="6.083"/>

    <g id="designer-arm-grop">
      <path id="designer-arm" fill="#FEFFFE" d="M505.875,64.875c0,0,5.875,7.5,13.042,6.791c6.419-0.635,11.833-2.791,13.458-4.041s2-3.5,0.25-3.875
                                                s-11.375,5.125-16,3.25c-5.963-2.418-8.25-7.625-8.25-7.625l-2,1.125L505.875,64.875z"/>
      <path id="designer-pen" fill="#FEFFFE" d="M525.75,59.084c0,0-0.423-0.262-0.969,0.088c-0.586,0.375-0.547,0.891-0.547,0.891l7.172,8.984l1.261,0.453
                                                l-0.104-1.328L525.75,59.084z"/>
    </g>
  </svg>

  <div class="deadline-days">
    Deadline <span class="day">7</span> <span class="days">days</span>
  </div>

</div>    
/*
Svg Projects
Author: Jonathan Trancozo
Language: HTML, CSS3 and SVG
Project_version: V1
Project_description: 
[pt-br]
Por anos eu vi essa imagem e pensava “Isso ficaria bem massa animado” e hoje consegui expressar um pouco da minha imaginação.
O desenho foi produzido no Adobe Illustrator e exportado em SVG. As animações foram feitas com CSS3 usando principalmente [transform].

Até uma próxima.
      

[en]
For years I saw this picture and thought "That would be amazing animated " and today I managed to express some of my imagination.
The design was produced in Adobe Illustrator and export in SVG . The animations were made with CSS3 using mainly [ transform ].

See you.

*/

html {
    font-size: 1em;
    line-height: 1.4;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #000;
}


#deadline {
    width:581px;
    max-width: 100%;
    height:158px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#deadline svg {
    width: 100%;
}

#progress-time-fill {
    animation-name: progress-fill; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite;
}

/* Death */
#death-group {
    animation-name: walk;
    animation-timing-function: ease; 
    animation-iteration-count: infinite;
    transform: translateX(0);
}

#death-arm {
    animation: move-arm 3s ease infinite;
    /* transform-origin: left center; */
    transform-origin: -60px 74px;
}

#death-tool {
    animation: move-tool 3s ease infinite;
    transform-origin: -48px center;
}

/* Designer */

#designer-arm-grop {
    animation: write 1.5s ease infinite;
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
    transform-origin: 90% top;
}

.deadline-days {
    color: #fff;
    text-align: center;
    width: 100px;
    margin: 0 auto;
    position: relative;
    height: 20px;
    font-family: 'Oswald', sans-serif;
}

.deadline-days .inner {
    width: 100px;
    position: relative;
    top: 0;
    left: 0;
}

.mask-red,
.mask-white {
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
}

.mask-red {
    left: 0;
    width: 0;
    color: #BE002A;
    animation: text-red 20s ease infinite;
    z-index: 2;
    background: #000;
}
.mask-white {
    right: 0;
}

/* Flames */

#red-flame {
    opacity: 0;
    animation: show-flames 20s ease infinite, red-flame 120ms ease infinite;
    transform-origin: center bottom;
}

#yellow-flame {
    opacity: 0;
    animation: show-flames 20s ease infinite, yellow-flame 120ms ease infinite;
    transform-origin: center bottom;
}

#white-flame {
    opacity: 0;
    animation: show-flames 20s ease infinite, red-flame 100ms ease infinite;
    transform-origin: center bottom;
}

@keyframes progress-fill {
    0% {
        x: -100%;
    }

    100% {
        x: -3%;
    }
}

@keyframes walk {
    0% {
        transform: translateX(0);
    }
    6% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(100px);
    },

    15% {
        transform: translateX(140px);
    }

    25% {
        transform: translateX(170px);
    }

    35% {
        transform: translateX(220px);
    }

    45% {
        transform: translateX(280px);
    }

    55% {
        transform: translateX(340px);
    }

    65% {
        transform: translateX(370px);
    }

    75% {
        transform: translateX(430px);
    }

    85% {
        transform: translateX(460px);
    }

    100% {
        transform: translateX(520px);
    }
}

@keyframes move-arm {
    0% {
        transform: rotate(0);
    }

    5% {
        transform: rotate(0);
    }

    9% {
        transform: rotate(40deg);
    }

    80% {
        transform: rotate(0);
    }
}

@keyframes move-tool {
    0% {
        transform: rotate(0);
    }

    5% {
        transform: rotate(0);
    }

    9% {
        transform: rotate(50deg);
    }

    80% {
        transform: rotate(0);
    }
}

/* Design animations */

@keyframes write {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1, 1);
    }

    16% {
        transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1);
    }

    32% {
        transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    }

    48% {
        transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1);
    }

    65% {
        transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    }

    83% {
        transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1);
    }
}

@keyframes text-red {
    0% {
        width: 0%;
    }

    100% {
        width: 98%;
    }
}

/* Flames */

/* @keyframes show-flames {
    0% {
        transform:  translateY(0);
    }
    74% {
        transform:  translateY(0);
    }
    80% {
        transform:  translateY(-30px);
    }
    97% {
        transform:  translateY(-30px);
    }
    100% {
        transform: translateY(0px);
    }
} */

@keyframes show-flames {
    0% {
        opacity: 0;
    }
    74% {
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes red-flame {
    0% {
        transform: translateY(-30px) scale(1, 1);
    }

    25% {
        transform: translateY(-30px) scale(1.1, 1.1);
    }

    75% {
        transform: translateY(-30px) scale(0.8, 0.7); 
    }

    100% {
        transform: translateY(-30px) scale(1, 1); 
    }
}

@keyframes yellow-flame {
    0% {
        transform: translateY(-30px) scale(0.8, 0.7);
    }

    50% {
        transform: translateY(-30px) scale(1.1, 1.2);
    }

    100% {
        transform: translateY(-30px) scale(1, 1);
    }
}
// Init
var $ = jQuery;
var animationTime = 20,
    days = 7;
 
$(document).ready(function(){

    // timer arguments: 
    //   #1 - time of animation in mileseconds, 
    //   #2 - days to deadline

    $('#progress-time-fill, #death-group').css({'animation-duration': animationTime+'s'});

    var deadlineAnimation = function () {
        setTimeout(function(){
            $('#designer-arm-grop').css({'animation-duration': '1.5s'});
        },0);

        setTimeout(function(){
            $('#designer-arm-grop').css({'animation-duration': '1s'});
        },4000);

        setTimeout(function(){
            $('#designer-arm-grop').css({'animation-duration': '0.7s'});
        },8000);

        setTimeout(function(){
            $('#designer-arm-grop').css({'animation-duration': '0.3s'});
        },12000);

        setTimeout(function(){
            $('#designer-arm-grop').css({'animation-duration': '0.2s'});
        },15000);
    };

    function timer(totalTime, deadline) {
        var time = totalTime * 1000;
        var dayDuration = time / deadline;
        var actualDay = deadline;

        var timer = setInterval(countTime, dayDuration);

        function countTime() {
            --actualDay;
            $('.deadline-days .day').text(actualDay);

            if (actualDay == 0) {
                clearInterval(timer);
                $('.deadline-days .day').text(deadline);
            }
        }
    }

    var deadlineText = function () {
        var $el = $('.deadline-days');
        var html = '<div class="mask-red"><div class="inner">' + $el.html() + '</div></div><div class="mask-white"><div class="inner">' + $el.html() + '</div></div>';
        $el.html(html);
    }

    deadlineText();

    deadlineAnimation();
    timer(animationTime, days);

    setInterval(function(){
        timer(animationTime, days);
        deadlineAnimation();

        console.log('begin interval', animationTime * 1000);

    }, animationTime * 1000);

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js