<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" class="polylion">
<defs>
<filter id="polycleaner" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0.5 1 1" />
</feComponentTransfer>
</filter>
</defs>
<g filter="url(#polycleaner)">
<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>// DEMO Styles
html,body {height: 100%;}body{display: flex;flex-direction:column;align-items: center;justify-content:center;width:100%;background:#F9D8AD;}.polylion{max-width: 100%;}
// REQUIRED Styles
// Updated post CSS-Tricks article
// https://css-tricks.com/polylion
// ===========================================
$polylion-height: 800px;
.polylion polygon {
opacity: 0;
.no-js & {
opacity: 1;
}
}
.polylion {
height: $polylion-height;
> polygon {
.no-cssanimations & {
transform: scale(1);
opacity: 1;
}
}
}// Read the article
// https://css-tricks.com/polylion
var tmax_opts = {
delay: 0.5,
repeat: -1,
repeatDelay: 0.5,
yoyo: true
};
var tmax_tl = new TimelineMax(tmax_opts),
polylion_shapes = $('svg.polylion > g 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);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.