Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <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>
!

CSS 

              
                // 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;
    }
  }
}
!

JS 

              
                // 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);
!
999px

Console