cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" class="polylion">
  <defs>
<filter  id="dilate_2">
	<feMorphology id="morphology_filter"  radius="1" in="SourceGraphic" operator="dilate"></feMorphology>
</filter>     
  </defs>
  <g filter="url(#dilate_2)">
  <polygon points="392,85 380,128 339,98" style="fill: #FADFAA" />
  <polygon points="392,85 380,128 412,111" style="fill: #EABA8C" />			
  <polygon points="339,98 380,128 340,140" style="fill: #FAD398" />
  <polygon points="339,98 340,140 309,142" style="fill: #DFA387" />
  <polygon points="339,98 309,142 286,133" style="fill: #F9D8AD" />
  <polygon points="392,85 412,111 443,101" style="fill: #DBB08E" />
  <polygon points="443,101 412,111 434,126" style="fill: #D59F7D" />
  <polygon points="443,101 434,126 475,122" style="fill: #FACC91" />
  <polygon points="412,111 380,128 402,132" style="fill: #CE8670" />
  <polygon points="412,111 402,132 418,142" style="fill: #BC716C" />
  <polygon points="309,142 340,140 309,185" style="fill: #BC716C" />
  <polygon points="412,111 434,126 418,142" style="fill: #D1806D" />
  <polygon points="434,126 475,122 462,137" style="fill: #F8DC9B" />
  <polygon points="475,122 462,137 509,139" style="fill: #FAD295" />
  <polygon points="434,126 462,137 425,155" style="fill: #DC8C6B" />
  <polygon points="434,126 425,155 418,142" style="fill: #EC9B6C" />
  <polygon points="380,128 402,132 369,156" style="fill: #E49C76" />
  <polygon points="380,128 369,156 340,140" style="fill: #DD8D76" />
  <polygon points="402,132 396,168 369,156" style="fill: #DB8A6F" />
  <polygon points="462,137 509,139 491,171" style="fill: #FBC27F" />
  <polygon points="425,155 462,137 461,173" style="fill: #CE7660" />			
  <polygon points="340,140 327,193 309,185" style="fill: #BF5D76" />
  <polygon points="402,132 418,142 396,168" style="fill: #A8526D" />		
  <polygon points="286,133 309,142 292,179" style="fill: #F6B78B" />
  <polygon points="509,139 491,171 542,154" style="fill: #F7CB8C" />
  <polygon points="542,154 491,171 520,192" style="fill: #D99860" />
  <polygon points="418,142 410,172 425,155" style="fill: #D4846D" />
  <polygon points="410,172 425,155 431,188" style="fill: #EFA872" />
  <polygon points="425,155 460,187 461,173" style="fill: #954A5E" />
  <polygon points="369,156 340,140 344,188" style="fill: #C46374" />
  <polygon points="286,133 292,179 258,161" style="fill: #B95E7F" />
  <polygon points="258,161 261,177 255,195" style="fill: #944F8B" />
  <polygon points="418,142 396,168 410,172" style="fill: #B45E69" />
  <polygon points="462,137 461,173 491,171" style="fill: #D7835F" />	
  <polygon points="491,171 482,192 520,192" style="fill: #BD6D56" />
  <polygon points="461,173 491,171 482,192" style="fill: #B05D59" />
  <polygon points="461,173 482,192 460,187" style="fill: #82365A" />
  <polygon points="258,161 292,179 261,177" style="fill: #9C4083" />
  <polygon points="309,142 292,179 309,185" style="fill: #B75D79" />
  <polygon points="369,156 362,192 380,183" style="fill: #F9CB8D" />				
  <polygon points="292,179 301,203 278,191" style="fill: #C86E78" />
  <polygon points="261,177 292,179 278,191" style="fill: #EA9E86" />			
  <polygon points="292,179 309,185 301,203" style="fill: #AF5078" />
  <polygon points="369,156 344,188 362,192" style="fill: #D59071" />
  <polygon points="431,188 425,155 460,187" style="fill: #F9CD90" />
  <polygon points="340,140 344,188 327,193" style="fill: #AD4F74" />
  <polygon points="380,183 380,206 388,187" style="fill: #E0A072" />
  <polygon points="344,188 322,223 342,208" style="fill: #E8AA7D" />
  <polygon points="380,183 388,187 396,168" style="fill: #ECB984" />
  <polygon points="388,187 408,193 396,168" style="fill: #F9D49D" />
  <polygon points="380,183 396,168 369,156" style="fill: #F9D49D" />
  <polygon points="261,177 278,191 255,195" style="fill: #EDAD87" />
  <polygon points="278,191 277,203 301,203" style="fill: #A55079" />
  <polygon points="380,206 388,187 408,193" style="fill: #F3BB7E" />
  <polygon points="431,188 460,187 464,208" style="fill: #F7BC76" />
  <polygon points="344,188 362,192 342,208" style="fill: #CC8571" />
  <polygon points="362,192 380,183 380,206" style="fill: #F7C185" />	
  <polygon points="460,187 490,213 482,192" style="fill: #8A4256" />
  <polygon points="362,192 380,206 361,205" style="fill: #DC9D72" />
  <polygon points="327,193 344,188 322,223" style="fill: #C9766E" />
  <polygon points="327,193 322,223 306,217" style="fill: #A35370" />
  <polygon points="255,195 278,191 277,203" style="fill: #B4607A" />
  <polygon points="255,195 277,203 252,222" style="fill: #A5497A" />
  <polygon points="327,193 309,185 301,203 306,217" style="fill: #933A73" />
  <polygon points="362,192 361,205 348,223" style="fill: #C67468" />
  <polygon points="348,223 361,205 380,206" style="fill: #662366" />
  <polygon points="520,192 482,192 490,213 520,205" style="fill: #974F53" />
  <polygon points="460,187 464,208 490,213" style="fill: #E19E67" />
  <polygon points="342,208 362,192 348,223" style="fill: #B26369" />
  <polygon points="490,213 520,205 529,218" style="fill: #5E2A50" />
  <polygon points="464,208 490,213 468,220" style="fill: #DB9460" />
  <polygon points="277,203 294,221 306,217 301,203" style="fill: #6A2774" />
  <polygon points="490,213 529,218 500,245" style="fill: #8F4A4F" />
  <polygon points="277,203 252,222 294,221" style="fill: #802A75" />
  <polygon points="342,208 348,223 322,223" style="fill: #F9C589" />
  <polygon points="252,222 294,221 287,236" style="fill: #A75472" />
  <polygon points="322,223 348,223 331,253" style="fill: #F1BB7F" />
  <polygon points="331,253 348,223 342,245" style="fill: #D8996E" />
  <polygon points="500,245 529,218 498,273" style="fill: #A05A50" />
  <polygon points="331,253 351,253 345,280" style="fill: #F8BF7A" />
  <polygon points="498,273 509,320 520,279" style="fill: #EEA65A" />
  <polygon points="468,284 498,273 471,303" style="fill: #BB6C4B" />
  <polygon points="471,303 498,273 509,320" style="fill: #E89553" />
  <polygon points="471,303 509,320 466,320" style="fill: #B77954" />
  <polygon points="466,320 509,320 468,338" style="fill: #A15B53" />
  <polygon points="520,279 509,320 522,330" style="fill: #F2BA70" />
  <polygon points="534,304 522,330 562,331" style="fill: #BC7255" />
  <polygon points="522,330 562,331 550,386" style="fill: #A5625C" />
  <polygon points="509,320 522,330 490,351" style="fill: #CD8754" />
  <polygon points="509,320 490,351 468,338" style="fill: #AF6751" />
  <polygon points="468,338 490,351 440,382" style="fill: #BF7B54" />
  <polygon points="468,338 440,382 444,350" style="fill: #A65E52" />
  <polygon points="490,351 522,330 512,382" style="fill: #E6A56D" />
  <polygon points="490,351 512,382 469,394" style="fill: #CE875B" />
  <polygon points="490,351 469,394 440,382" style="fill: #DB925D" />
  <polygon points="402,354 440,382 398,402" style="fill: #753653" />
  <polygon points="522,330 512,382 550,386" style="fill: #8E4E5C" />
  <polygon points="440,382 398,402 432,426" style="fill: #712F53" />
  <polygon points="440,382 432,426 469,394" style="fill: #C37456" />
  <polygon points="512,382 550,386 490,463" style="fill: #6A275D" />
  <polygon points="512,382 490,463 469,394" style="fill: #7A385C" />
  <polygon points="469,394 490,463 432,426" style="fill: #9F4E5F" />
  <polygon points="432,426 490,463 422,451" style="fill: #812F5D" />
  <polygon points="431,188 449,208 440,210" style="fill: #C58468" />
  <polygon points="396,168 410,172 408,193" style="fill: #BC716B" />
  <polygon points="410,172 408,193 431,188" style="fill: #C58468" />
  <polygon points="420,213 423,235 444,220" style="fill: #D1885F" />
  <polygon points="380,206 408,193 420,213" style="fill: #D99C6F" />
  <polygon points="408,193 440,210 431,188" style="fill: #D59764" />
  <polygon points="408,193 420,213 440,210" style="fill: #D1885F" />
  <polygon points="294,221 306,217 294,249" style="fill: #87386F" />
  <polygon points="294,249 287,236 294,221" style="fill: #AF5C6E" />
  <polygon points="529,218 498,273 520,279" style="fill: #C0724C" />
  <polygon points="529,218 520,279 540,260" style="fill: #D48C51" />
  <polygon points="294,249 306,217 322,223" style="fill: #AF5C6E" />
  <polygon points="252,222 287,236 294,249" style="fill: #55276F" />
  <polygon points="331,253 342,245 351,253" style="fill: #EBAC79" />			
  <polygon points="252,222 294,249 245,245" style="fill: #662873" />
  <polygon points="245,245 294,249 266,270" style="fill: #7A2B6D" />
  <polygon points="294,249 322,223 331,253" style="fill: #D4846B" />
  <polygon points="294,249 331,253 299,264" style="fill: #EBAC79" />
  <polygon points="299,264 331,253 345,280" style="fill: #E29F70" />
  <polygon points="520,279 522,330 534,304" style="fill: #EDB05F" />
  <polygon points="520,279 534,304 540,260" style="fill: #DC9B59" />
  <polygon points="540,260 534,304 562,331" style="fill: #CA834D" />
  <polygon points="294,249 299,264 266,270" style="fill: #D68C6F" />
  <polygon points="266,270 299,264 272,301" style="fill: #B46868" />		
  <polygon points="220,306 272,301 234,399" style="fill: #985066" />
  <polygon points="468,284 471,303 452,311" style="fill: #FAC174" />		
  <polygon points="444,350 440,382 402,354" style="fill: #5A2750" />			
  <polygon points="297,376 367,430 368,409" style="fill: #BC7652" />
  <polygon points="234,399 297,376 367,430" style="fill: #4F1E56" />
  <polygon points="406,445 422,451 418,476" style="fill: #984B5B" />
  <polygon points="234,399 390,471 394,525" style="fill: #5D2C4C" />
  <polygon points="432,426 422,451 406,445" style="fill: #854659" />
  <polygon points="406,445 432,426 391,420" style="fill: #A45B55" />
  <polygon points="234,399 367,430 390,471" style="fill: #5D2552" />			
  <polygon points="406,445 390,471 418,476" style="fill: #853E5C" />
  <polygon points="422,451 418,476 490,463" style="fill: #5D2552" />
  <polygon points="418,476 490,463 394,525" style="fill: #732F62" />
  <polygon points="394,525 418,476 390,471" style="fill: #914758" />
  <polygon points="342,245 351,253 348,223" style="fill: #974E65" />			
  <polygon points="266,270 272,301 220,306" style="fill: #A85E6D" />
  <polygon points="220,306 266,270 245,245" style="fill: #7A336F" />
  <polygon points="351,253 365,226 379,245" style="fill: #C78C6C" />
  <polygon points="468,284 452,311 441,282" style="fill: #F8D088" />	
  <polygon points="430,276 441,282 427,295" style="fill: #633752" />
  <polygon points="427,295 441,282 452,311" style="fill: #F7DB9C" />
  <polygon points="416,283 427,295 405,315" style="fill: #FAD58E" />			
  <polygon points="272,301 234,399 297,376" style="fill: #6C2861" />			
  <polygon points="427,295 405,315 427,306" style="fill: #C9A26B" />			
  <polygon points="427,306 427,312 452,317" style="fill: #744154" />
  <polygon points="272,301 297,376 307,309" style="fill: #AC6960" />	
  <polygon points="405,315 427,306 427,312" style="fill: #5F3752" />
  <polygon points="405,315 427,312 422,323" style="fill: #C99667" />			
  <polygon points="452,317 466,320 468,338" style="fill: #F2B66E" />
  <polygon points="452,317 468,338 444,350" style="fill: #F9CC89" />
  <polygon points="402,354 444,350 413,335" style="fill: #D3A46C" />			
  <polygon points="413,335 422,323 383,331" style="fill: #E8B576" />			
  <polygon points="297,376 364,359 368,409" style="fill: #D88F5A" />
  <polygon points="364,359 368,409 381,361" style="fill: #AD654F" />
  <polygon points="367,430 390,471 406,445" style="fill: #792E55" />			
  <polygon points="413,335 444,350 422,323" style="fill: #F1BF7A" />
  <polygon points="383,331 413,335 402,354" style="fill: #C39160" />			
  <polygon points="405,315 422,323 383,331" style="fill: #BB875F" />
  <polygon points="422,323 444,350 452,317" style="fill: #F7D79A" />
  <polygon points="422,323 452,317 427,312" style="fill: #DEB072" />
  <polygon points="452,311 471,303 466,320 452,317" style="fill: #D38E57" />				
  <polygon points="452,311 452,317 427,306" style="fill: #DEB072" />
  <polygon points="427,306 452,311 427,295" style="fill: #B88864" />
  <polygon points="376,322 405,315 377,307" style="fill: #8E4453" />
  <polygon points="365,311 377,307 368,290" style="fill: #A06057" />
  <polygon points="377,307 405,315 394,295" style="fill: #E2A76B" />
  <polygon points="405,315 394,295 416,283" style="fill: #F9DB9F" />
  <polygon points="307,309 297,376 354,312" style="fill: #E79C62" />		
  <polygon points="368,290 377,307 394,295" style="fill: #C5885B" />
  <polygon points="307,309 354,312 345,280" style="fill: #D6895D" />
  <polygon points="307,309 345,280 322,272" style="fill: #EAA267" />			
  <polygon points="400,276 394,295 416,283" style="fill: #F7C684" />
  <polygon points="430,276 427,295 416,283" style="fill: #4F2150" />
  <polygon points="441,282 455,268 430,276" style="fill: #442551" />	
  <polygon points="429,268 430,276 409,268" style="fill: #905952" />
  <polygon points="400,276 416,283 430,276 409,268" style="fill: #3F1C53" />
  <polygon points="368,290 394,295 400,276" style="fill: #F9BD74" />
  <polygon points="368,290 400,276 379,266" style="fill: #BE7356" />
  <polygon points="307,309 322,272 272,301" style="fill: #C67B5C" />
  <polygon points="272,301 322,272 299,264" style="fill: #C68464" />
  <polygon points="430,276 455,268 429,268" style="fill: #744855" />
  <polygon points="368,290 379,266 345,280" style="fill: #98525A" />
  <polygon points="345,280 379,266 351,253" style="fill: #B1625D" />
  <polygon points="345,280 368,290 354,312" style="fill: #B1625D" />
  <polygon points="429,268 455,268 444,254" style="fill: #D89F6A" />
  <polygon points="444,254 455,268 457,248" style="fill: #C47F55" />
  <polygon points="414,254 444,254 423,235" style="fill: #BD7859" />
  <polygon points="351,253 348,223 365,226" style="fill: #EAAF77" />
  <polygon points="348,223 365,226 361,216" style="fill: #E09B72" />
  <polygon points="367,430 406,445 391,420" style="fill: #743854" />
  <polygon points="367,430 391,420 368,409" style="fill: #8E4C50" />
  <polygon points="368,409 391,420 398,402" style="fill: #6D3A3D" />
  <polygon points="398,402 391,420 432,426" style="fill: #A5585D" />
  <polygon points="368,409 398,402 381,361" style="fill: #87484C" />
  <polygon points="381,361 398,402 402,354" style="fill: #571C4F" />
  <polygon points="402,354 383,331 381,361" style="fill: #6B3B51" />
  <polygon points="383,331 405,315 376,322" style="fill: #6B3B51" />
  <polygon points="377,307 376,322 365,311" style="fill: #7E3854" />
  <polygon points="354,312 297,376 364,359" style="fill: #E9A461" />
  <polygon points="381,361 383,331 376,322 365,311 354,312 364,359" style="fill: #571C4F" />
  <polygon points="354,312 365,311 368,290" style="fill: #8D4956" />
  <polygon points="441,282 468,284 455,268" style="fill: #F2B974" />
  <polygon points="429,268 444,254 414,254" style="fill: #C8885C" />
  <polygon points="414,254 429,268 409,268" style="fill: #CD9566" />
  <polygon points="351,253 379,245 379,266" style="fill: #AC7068" />
  <polygon points="400,276 409,268 394,265" style="fill: #6C2E57" />
  <polygon points="409,268 414,254 379,245 379,266 400,276 394,265" style="fill: #9D5C58" />
  <polygon points="365,226 379,245 383,226" style="fill: #CD9971" />
  <polygon points="391,224 420,213 423,235" style="fill: #B26D5D" />
  <polygon points="414,254 379,245 383,226 391,224 423,235" style="fill: #91535D" />
  <polygon points="383,226 391,224 379,218" style="fill: #B0746A" />
  <polygon points="379,218 383,226 367,218" style="fill: #F0BD8A" />
  <polygon points="365,226 383,226 367,218" style="fill: #F6DA9B" />
  <polygon points="365,226 367,218 361,216" style="fill: #F9F0B8" />
  <polygon points="367,218 372,210 361,216" style="fill: #9E5663" />
  <polygon points="380,206 420,213 391,224" style="fill: #CC8A6A" />
  <polygon points="367,218 379,218 372,210" style="fill: #DA9172" />
  <polygon points="372,210 380,206 391,224 379,218 372,210" style="fill: #7B3962" />
  <polygon points="455,268 468,284 474,260" style="fill: #D49A5A" />
  <polygon points="500,245 498,273 468,284" style="fill: #C87A4C" />
  <polygon points="490,213 487,235 500,245" style="fill: #DA8951" />
  <polygon points="468,220 490,213 487,235" style="fill: #F2AF67" />
  <polygon points="455,268 474,260 472,231" style="fill: #C78052" />
  <polygon points="468,284 500,245 487,235 468,220 460,226 472,231 474,260" style="fill: #ECA45F" />
  <polygon points="444,220 440,210 449,208" style="fill: #BB7E5A" />
  <polygon points="468,220 460,226 461,217" style="fill: #F7F0AE" />
  <polygon points="431,188 464,208 449,208" style="fill: #AC5D58" />
  <polygon points="468,220 461,217 451,221 464,208" style="fill: #4C2055" />
  <polygon points="455,268 472,231 457,248" style="fill: #E9B674" />
  <polygon points="460,226 461,217 451,221" style="fill: #F5D997" />
  <polygon points="420,213 440,210 444,220" style="fill: #D9A46E" />
  <polygon points="457,248 472,231 460,226 451,221 444,220" style="fill: #F7C07B" />
  <polygon points="457,248 444,220 423,235 444,254" style="fill: #D89B65" />
  <polygon points="451,221 456,216 446,215" style="fill: #D89B65" />
  <polygon points="446,215 451,221 444,220" style="fill: #682B58" />
  <polygon points="456,216 446,215 449,208 464,208" style="fill: #682B58" />
  </g>
</svg>
            
          
!
            
              
html,body {
  width:100%;
  height: 100%;}
body{
  position:absolute;
  width:100%;
  height:100%;
  background:#F9D8AD;
}

svg{
  max-width:800px;
  max-height:600px;
}


svg polygon {
  opacity: 0;
}


            
          
!
            
              // Read the article
// https://css-tricks.com/polylion
TweenMax.set('svg', {
  position:'absolute',
  xPercent:-50,
  left:'50%'
})
var tmax_opts = {
  delay: 0.5,
  repeat: -1,
  repeatDelay: 0.5,
  yoyo: true
};

var tmax_tl           = new TimelineMax(tmax_opts),
    polylion_shapes   = $('polygon'),
    polylion_stagger  = 0.00475,
    polylion_duration = 1.5;

var polylion_staggerFrom = {
  scale: 0,
  opacity: 0,
  transformOrigin: 'center center',
};

var polylion_staggerTo = {
  opacity: 1,
  scale: 1,
  ease: Elastic.easeInOut
};

tmax_tl.staggerFromTo(polylion_shapes, polylion_duration, polylion_staggerFrom, polylion_staggerTo, polylion_stagger, 0);

window.onresize = function(){
  var radius;
  
	if($(window).width() > 600 && $(window).width() < 800){
    radius = 2;
  } else if($(window).width() < 600){
    
    radius = 3;
  } else {
    
    radius = 1;
  }
  
  TweenMax.set('#morphology_filter', {
    attr:{
      radius:radius
    }
  })
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console