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

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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
Loading ..................

Console