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.

            
              <svg class="d" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
<!--   <pattern id="dBg" width="40"  height="12" x="0" y="0" patternUnits="userSpaceOnUse">
   
   <path d='M78 7V4h-2v3h-3v2h3v3h2V9h3V7h-3z'  fill='#A5BE00' fill-opacity='0' fill-rule='evenodd'></path>
   <path d='M30 7V4h-2v3h-3v2h3v3h2V9h3V7h-3zM10 0h2v16h-2V0zm6 0h4v16h-4V0zM2 0h4v16H2V0zm50 0h2v16h-2V0zM38 0h2v16h-2V0zm28 0h2v16h-2V0zm-8 0h6v16h-6V0zM42 0h6v16h-6V0z' fill='#A5BE00' fill-opacity='1' fill-rule='evenodd'></path>
   </pattern> -->
  <pattern id="dBg" width="23"  height="23" x="0" y="0" patternUnits="userSpaceOnUse" viewBox="0 0 50 50">
 <polygon points="25 4.17 20.83 0 12.5 8.33 4.17 0 0 4.17 8.33 12.5 0 20.83 4.17 25 12.5 16.67 20.83 25 25 20.83 16.67 12.5 25 4.17" fill='#A5BE00' fill-opacity='0'/>
      <polygon points="50 29.17 45.83 25 37.5 33.33 29.17 25 25 29.17 33.33 37.5 25 45.83 29.17 50 37.5 41.67 45.83 50 50 45.83 41.67 37.5 50 29.17" fill='#A5BE00' fill-opacity='1'/>
<!--    <path d='M0 6.172L6.172 0h5.656L0 11.828V6.172zm40 5.656L28.172 0h5.656L40 6.172v5.656z' fill='#A5BE00' fill-opacity='0.41' fill-rule='evenodd'></path>
   <path d='M6.172 12l12-12h3.656l12 12h-5.656L20 3.828 11.828 12H6.172zm12 0L20 10.172 21.828 12h-3.656z' fill='#A5BE00' fill-opacity='0.41' fill-rule='evenodd'></path> -->
   </pattern>
  
  </defs>
 <clipPath id="dMask">
<!--  <path class="bigD" id="bigD" d="M459.3,177.9V342h-14.4v-20.5c-7.9,14.4-24.3,22.7-41.8,22.7c-29.2,0-53.3-22.9-53.3-54.9
		c0-31.9,23.8-54.6,53.3-54.6c17.8,0,33.9,8.3,41.8,22.5v-79.4H459.3z M444.9,289.9c0-25.4-19.8-41.4-40.7-41.4
		c-22,0-40,17.5-40,40.7c0,23.4,18,41.4,40,41.4C426.1,330.5,444.9,314.1,444.9,289.9z"/> -->
   <path class="bigD" id="bigD" d="M358.44,342V173H409q15.48,0,24.64,2.63a34.27,34.27,0,0,1,15.09,8.56,47.78,47.78,0,0,1,12.57,21.9Q465,219.29,465,247.17q0,36-2.52,50.88t-8.56,25.3a31.56,31.56,0,0,1-16.19,14.54Q427.37,342,401.8,342Zm30.84-24.92h13.94q10.65,0,14.93-1.54a13.52,13.52,0,0,0,6.81-5.27q4.39-6.59,6.26-18.06t1.87-36.72q0-24.59-2.2-35.78t-7.46-16.9a14.89,14.89,0,0,0-7.08-4q-4.34-1.15-13.56-1.15h-13.5Z"/>
 </clipPath> 
      <g class="DUp">
       
        <polyline class="DLegLUp" points="391 341.5 386 379.5 389.5 416.5 371.5 420.5" fill="none" stroke="#EBF2FA" stroke-miterlimit="10" stroke-width="3"/>
        <polyline class="DLegRUp" points="418.5 340.5 424.5 383.5 421.5 416.5 438.5 420.5" fill="none" stroke="#EBF2FA" stroke-miterlimit="10" stroke-width="3"/>
      </g>
      
 <rect fill="url(#dBg)" clip-path="url(#dMask)" width="100%" height="100%" />
 <use xlink:href="#bigD" fill="none" stroke="#EBF2FA" stroke-width="6" stroke-linejoin="round" stroke-linecap="round"/> 
 <!-- <use xlink:href="#bigD" fill="none" stroke="#679436" stroke-width="2"  stroke-linecap="round"/>  -->
      
</svg>
            
          
!
            
              body {
  background-color:#679436;
  overflow: hidden;
 
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
  width:100%;
  height:100%;
  visibility:hidden;
}

polyline, line{
  stroke-linecap:round;
  stroke-linejoin:round;
}
            
          
!
            
              var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    bigD = select('.bigD'),
    DLegLUp = select('.DLegLUp'),
    DLegRUp = select('.DLegRUp'),
    DLegLUpArr = DLegLUp.getAttribute('points').split(' ').map(Number),
    DLegRUpArr = DLegRUp.getAttribute('points').split(' ').map(Number),
    DLegLDownArr = "389.5 370.5 370.5 399.5 389.5 416.5 371.5 420.5".split(' ').map(Number),
    DLegRDownArr = "418.5 370.5 438.5 395.5 421.5 416.5 438.5 420.5".split(' ').map(Number),
    DLegLTempArr = DLegLUpArr.slice(0),
    DLegRTempArr = DLegRUpArr.slice(0)
  

TweenMax.set('svg', {
  visibility: 'visible'
})

var mainTl = new TimelineMax({repeat:-1})
var tl = new TimelineMax({repeat:0, repeatDelay:0.6, yoyo:false, onUpdate:onUpdate}).timeScale(2.3);
tl.to(DLegLTempArr, 4, {
 endArray:DLegLDownArr,
 ease:Elastic.easeInOut.config(1,1.5)
})
.to(DLegRTempArr, 4, {
 endArray:DLegRDownArr,
 ease:Elastic.easeInOut.config(1,1.5)
},'-=4')
.to(bigD, 4, {
 y:29,
 rotation:5,
 transformOrigin:'50% 100%',
 ease:Elastic.easeInOut.config(1,1.5)
},'-=4')
.to('#dBg', 4, {
  attr:{
   x:-23,
   y:-6
  },
 ease:Elastic.easeInOut.config(1,1.5)
 },'-=4')


.to(DLegLTempArr, 2, {
 endArray:DLegLUpArr,
 ease:Elastic.easeOut.config(1,0.75)
})
.to(DLegRTempArr, 2, {
 endArray:DLegRUpArr,
 ease:Elastic.easeOut.config(1,0.75)
},'-=2')
.to(bigD, 2, {
 y:0,
 rotation:0,
 transformOrigin:'50% 100%',
 ease:Elastic.easeOut.config(1,0.75)
},'-=2')
.to('#dBg', 2, {
  attr:{
   x:0,
   y:0
  },
 ease:Elastic.easeOut.config(1,0.75)
 },'-=2')


function onUpdate(){
 DLegLUp.setAttribute('points', DLegLTempArr);
 DLegRUp.setAttribute('points', DLegRTempArr);
 //OArmRDown.setAttribute('points', OArmRTempArr);
 
}


var patternTl = new TimelineMax({ })
patternTl.staggerTo('#dBg *', 0.4, {
 cycle:{
  fillOpacity:[1, 0]
 },
 repeat:9,
 yoyo:true,
 ease:Linear.easeNone
},0)

//patternTl.duration(tl.duration());

mainTl.add(tl, 0);
mainTl.add(patternTl, 0)

            
          
!
999px
Loading ..................

Console