cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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
Author_url: portfolio.jonathansilva.com.br/
Social_networks: {
  facebook: fb/jonathan.silva.web,
  twitter: @jsilva_web
}
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;
}

#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: left 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);

});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console