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 version="1.1" viewBox="196 112 636 807">
  
  <defs>
    <filter id="edge-cleaner" color-interpolation-filters="sRGB">
     <feComponentTransfer>
       <feFuncA type="table" tableValues="0 0.5 1 1" />
     </feComponentTransfer>
    </filter>     
  </defs>
  
 <g>
  <polygon fill="#122A4E" points="813.578,902.956 813.578,872.333 731.667,867 775.667,902.955 "/>
  <polygon fill="#090B0A" points="775.667,902.955 731.667,867 	741,902.955 "/>
  <polygon fill="#0A1832" points="731.667,867 712.334,883.334 	741,902.955 "/>
  <polygon fill="#08090B" points="712.334,883.334 717.334,902.955 	741,902.955 "/>
  <polygon fill="#103A60" points="698.334,835.334 717.334,902.955 	555,902.956 "/>
  <polygon fill="#0D436F" points="555,902.956 552,838.667 	698.334,835.334 "/>
  <polygon fill="#0B5385" points="555,902.956 552,838.667 450,852.334 	"/>
  <polygon fill="#2167A2" points="450,852.334 444,902.956 555,902.956 	"/>
  <polygon fill="#0F2C4A" points="450,852.334 383.333,902.955 	444,902.956 "/>
  <polygon fill="#143C5F" points="450,852.334 398.333,838.667 	383.333,902.955 "/>
  <polygon fill="#2E83C4" points="398.333,838.668 383.333,902.956 	305.333,902.956 "/>
  <polygon fill="#116FAD" points="305.333,902.956 276.667,808.001 	398.333,838.668 "/>
  <polygon fill="#2367A4" points="276.667,808.001 232.333,874.667 	305.333,902.956 "/>
  <polygon fill="#185C8B" points="232.333,874.667 218.138,902.956 	305.333,902.956 "/>
  <polygon fill="#07518E" points="218.138,866.667 218.138,902.956 	232.333,874.667 "/>
  <polygon fill="#0D73B3" points="698.334,835.334 712.334,884.001 	731.667,867 "/>
  <polygon fill="#448AC8" points="731.667,867 722.333,794.334 	698.334,835.334 "/>
  <polygon fill="#23476B" points="813.578,872.333 731.667,867 	813.578,787.001 "/>
  <polygon fill="#1F5987" points="731.667,867 813.578,787.001 	722.333,794.334 "/>
  <polygon fill="#142A4F" points="450,852.334 479.667,820.334 	552,838.667 "/>
  <polygon fill="#142C52" points="479.667,820.334 552,838.667 	698.334,835.334 600,792.667 "/>
  <polygon fill="#142A4F" points="684.333,788.667 658.623,818.104 	698.334,835.334 "/>
  <polygon fill="#4F91CD" points="684.333,788.667 698.334,835.334 	722.333,794.334 "/>
  <polygon fill="#123B67" points="684.333,788.667 719.333,773.001 	722.333,794.334 "/>
  <polygon fill="#10152B" points="719.333,773.001 722.333,794.334 	813.578,748.667 "/>
  <polygon fill="#C2BDB9" points="722.333,794.334 813.578,748.667 	813.578,787.001 "/>
  <polygon fill="#0C1E36" points="232.333,858.001 232.333,874.667 	218.138,866.667 "/>
  <polygon fill="#0E151F" points="276.667,808.001 232.333,874.667 	232.333,858.001 "/>
  <polygon fill="#1F5E93" points="218.138,866.667 218.138,832.75 	232.333,858.001 "/>
  <polygon fill="#1F6AA3" points="232.333,858.001 276.667,808.001 	262.75,771.5 218.138,832.75 "/>
  <polygon fill="#2D7EBF" points="262.75,771.5 218.138,832.75 	218.138,773 "/>
  <polygon fill="#FFF8EE" points="218.138,757.75 218.138,773 	262.75,771.5 "/>
  <polygon fill="#1C4F7A" points="262.75,771.5 276.667,808.001 	309.75,780.5 "/>
  <polygon fill="#0C0D0F" points="276.667,808.001 363.25,779.5 	309.75,780.5 "/>
  <polygon fill="#8697AB" points="276.667,808.001 349.296,826.308 	363.25,779.5 "/>
  <polygon fill="#7F90A4" points="363.25,779.5 349.296,826.308 	398.333,838.668 "/>
  <polygon fill="#1D4370" points="363.25,779.5 398.845,838.668 	450.25,852.334 "/>
  <polygon fill="#FFFAF6" points="262.75,771.5 301.75,763.25 	284.75,745 267.5,738.5 218.138,757.75 "/>
  <polygon fill="#FAF3E9" points="267.5,738.5 322.5,731 284.75,745 "/>
  <polygon fill="#FEF7EF" points="284.75,745 322.5,731 325.5,755 "/>
  <polygon fill="#D8D2D2" points="284.75,745 301.75,763.25 325.5,755 	"/>
  <polygon fill="#1D314A" points="262.75,771.5 309.75,780.5 	301.75,763.25 "/>
  <polygon fill="#486D99" points="301.75,763.25 309.75,780.5 	325.5,755 "/>
  <polygon fill="#495666" points="325.5,755 309.75,780.5 363.25,779.5 	"/>
  <polygon fill="#386C9C" points="363.25,779.5 325.5,755 341.25,745 	"/>
  <polygon fill="#1C385D" points="325.5,755 341.25,745 322.5,731 "/>
  <polygon fill="#32313F" points="322.5,731 341.25,745 336.5,711.5 "/>
  <polygon fill="#222931" points="336.5,711.5 341.25,745 391.75,733.5 	"/>
  <polygon fill="#16131A" points="336.5,711.5 387.25,688.5 	391.75,733.5 "/>
  <polygon fill="#1E2832" points="387.25,688.5 391.75,733.5 	418.75,694 "/>
  <polygon fill="#151C2C" points="387.25,688.5 429,674.75 418.75,694 	"/>
  <polygon fill="#101324" points="429,674.75 425.25,702.5 418.75,694 	"/>
  <polygon fill="#F9F3E7" points="418.75,694 391.75,733.5 	425.25,702.5 "/>
  <polygon fill="#FFF6EF" points="425.25,702.5 391.75,733.5 	439.75,711 "/>
  <polygon fill="#C7C7C9" points="391.75,733.5 438.75,755 439.75,711 	"/>
  <polygon fill="#DDD6CE" points="391.75,733.5 373.815,738 397.25,753 	411.487,742.528 "/>
  <polygon fill="#467EB7" points="341.25,745 363.25,779.5 397.25,753 	373.815,738 "/>
  <polygon fill="#5588C1" points="411.487,742.528 405.02,814.979 	363.25,779.5 "/>
  <polygon fill="#0B4A76" points="411.487,742.528 405.02,814.979 	438.75,755 "/>
  <polygon fill="#2964A8" points="438.75,755 450.25,852.334 	405.02,814.979 "/>
  <polygon fill="#2373A8" points="438.75,755 474,762.25 	450.25,852.334 "/>
  <polygon fill="#2371B3" points="474,762.25 450.25,852.334 	479.667,820.334 "/>
  <polygon fill="#277DB8" points="439.75,711 438.75,755 458,721 "/>
  <polygon fill="#345C8D" points="429,674.75 425.25,702.5 458,721 "/>
  <polygon fill="#184C73" points="458,721 429,674.75 447,646 "/>
  <polygon fill="#2373B2" points="458,721 438.75,755 474,762.25 "/>
  <polygon fill="#091933" points="458,721 474,762.25 489.5,739.75 "/>
  <polygon fill="#0F4271" points="489.5,739.75 474,762.25 515.857,760 	"/>
  <polygon fill="#0E1424" points="474,762.25 479.667,820.334 	515.857,760 "/>
  <polygon fill="#25619D" points="515.857,760 479.667,820.334 	533.49,807.959 "/>
  <polygon fill="#153F69" points="515.857,760 533.49,807.959 	557.75,751 "/>
  <polygon fill="#345A7F" points="557.75,751 533.49,807.959 	600,792.667 "/>
  <polygon fill="#3F628A" points="557.75,751 600,792.667 626.75,744.5 	"/>
  <polygon fill="#395471" points="626.75,744.5 600,792.667 	671.75,758.25 "/>
  <polygon fill="#1A335B" points="632.441,777.105 658.623,818.104 	600,792.667 "/>
  <polygon fill="#0D0C11" points="632.441,777.105 658.623,818.104 	684.333,788.667 "/>
  <polygon fill="#354A67" points="632.441,777.105 684.333,788.667 	671.75,758.25 "/>
  <polygon fill="#2E425B" points="671.75,758.25 684.333,788.667 	719.333,773.001 "/>
  <polygon fill="#0D2644" points="671.75,758.25 719.333,773.001 	813.578,748.667 "/>
  <polygon fill="#5D95CE" points="458,721 511,703.5 489.5,739.75 "/>
  <polygon fill="#1D6CA7" points="458,721 454.608,697.875 511,703.5 	"/>
  <polygon fill="#0E1327" points="511,703.5 489.5,739.75 527,709.438 	"/>
  <polygon fill="#0A589A" points="489.5,739.75 539.5,719 527,709.438 	"/>
  <polygon fill="#2680BE" points="489.5,739.75 515.857,760 539.5,719 	"/>
  <polygon fill="#112548" points="447,646 454.608,697.875 511,703.5 	"/>
  <polygon fill="#1B5175" points="423.875,623.25 429,674.75 447,646 	"/>
  <polygon fill="#164F7A" points="539.5,719 515.857,760 557.75,751 "/>
  <polygon fill="#183159" points="587.75,713.75 557.75,751 539.5,719 	"/>
  <polygon fill="#0E3053" points="626.75,744.5 557.75,751 	587.75,713.75 "/>
  <polygon fill="#0F2749" points="587.75,713.75 659.75,683.75 	626.75,744.5 "/>
  <polygon fill="#100F14" points="626.75,744.5 671.75,758.25 	713.5,728 659.75,683.75 "/>
  <polygon fill="#090A0C" points="671.75,758.25 813.578,748.667 	713.5,728 "/>
  <polygon fill="#0F1523" points="713.5,728 813.578,748.667 	813.578,701.75 "/>
  <polygon fill="#345E90" points="527,709.438 529.25,660 	556.25,654.25 "/>
  <polygon fill="#0E1422" points="529.25,660 527,709.438 511,703.5 "/>
  <polygon fill="#132B4F" points="447,646 500,633.25 511,703.5 "/>
  <polygon fill="#0A3150" points="500,633.25 511,703.5 529.25,660 "/>
  <polygon fill="#0F1A2E" points="601.75,676.5 587.75,713.75 	539.5,719 "/>
  <polygon fill="#122232" points="601.75,676.5 539.5,719 527,709.438 	"/>
  <polygon fill="#0A0B0D" points="556.25,654.25 527,709.438 	601.75,676.5 659.75,683.75 659.75,647.5 654,598.5 601.75,628 "/>
  <polygon fill="#12151E" points="601.75,676.5 587.75,713.75 	659.75,683.75 "/>
  <polygon fill="#182432" points="813.578,701.75 770.25,690.75 	713.5,728 "/>
  <polygon fill="#0B0A0F" points="713.5,728 770.25,690.75 	693.75,670.25 659.75,683.75 "/>
  <polygon fill="#0E0D12" points="659.75,683.75 659.75,647.5 	693.75,670.25 "/>
  <polygon fill="#110F14" points="447,646 493.75,583.5 423.875,623.25 	"/>
  <polygon fill="#13131B" points="493.75,583.5 447,646 500,633.25 "/>
  <polygon fill="#0D0C11" points="493.75,583.5 500,633.25 	577.75,584.75 "/>
  <polygon fill="#101C32" points="577.75,584.75 500,633.25 529.25,660 	"/>
  <polygon fill="#111015" points="577.75,584.75 529.25,660 	556.25,654.25 "/>
  <polygon fill="#363C4C" points="556.25,654.25 593.375,586 	577.75,584.75 "/>
  <polygon fill="#16151B" points="573.589,622.375 556.25,654.25 	601.75,628 "/>
  <polygon fill="#08080A" points="573.589,622.375 654,598.5 	601.75,628 "/>
  <polygon fill="#0B0C0E" points="654,598.5 593.375,586 	573.589,622.375 "/>
  <polygon fill="#0B0B0B" points="661.25,539 654,598.5 	595.611,586.461 "/>
  <polygon fill="#0B0C0E" points="493.75,583.5 423.875,570.75 	423.875,623.25 "/>
  <polygon fill="#0B0C0E" points="423.875,623.25 423.875,570.75 	382.75,607.25 "/>
  <polygon fill="#0A0B0D" points="607.5,532.5 595.611,586.461 	661.25,539 "/>
  <polygon fill="#283845" points="607.5,532.5 595.611,586.461 	595.611,530.5 "/>
  <polygon fill="#151C2C" points="595.611,530.5 577.75,584.75 	595.611,586.461 "/>
  <polygon fill="#141519" points="595.611,530.5 493.75,583.5 	577.75,584.75 "/>
  <polygon fill="#08080A" points="595.611,530.5 479,539 493.75,583.5 	"/>
  <polygon fill="#0B0B0D" points="493.75,583.5 479,539 423.875,570.75 	"/>
  <polygon fill="#0C1526" points="357.25,595.25 423.875,570.75 	382.75,607.25 "/>
  <polygon fill="#908CAD" points="357.25,570.75 357.25,595.25 	408.712,576.326 "/>
  <polygon fill="#665158" points="407.5,557 408.712,576.326 	423.875,570.75 "/>
  <polygon fill="#9F95B7" points="407.5,557 357.25,570.75 	408.712,576.326 "/>
  <polygon fill="#B1B0CF" points="357.25,570.75 357.25,595.25 	339.25,575 "/>
  <polygon fill="#090B0A" points="480.049,538.924 521.25,492 	620.75,482.116 595.611,530.5 "/>
  <polygon fill="#08090B" points="620.75,482.116 595.611,530.5 	661.25,539 "/>
  <polygon fill="#0F1012" points="620.75,482.116 661.25,539 	697,491.75 "/>
  <polygon fill="#0B0B0B" points="717,381 697,491.75 620.75,482.116 	"/>
  <polygon fill="#120F16" points="620.75,482.116 624.25,396.5 	538.5,411.75 "/>
  <polygon fill="#100F14" points="558.157,428.566 521.25,492 	620.75,482.116 "/>
  <polygon fill="#D7D2E6" points="348.25,549.25 339.25,575 	357.25,570.75 "/>
  <polygon fill="#BAB8D0" points="348.25,549.25 359.75,535.5 	342.25,529.25 "/>
  <polygon fill="#D7CEDF" points="359.75,535.5 348.25,549.25 	357.25,570.75 407.5,557 "/>
  <polygon fill="#624750" points="407.5,557 435.5,549.25 	423.875,570.75 "/>
  <polygon fill="#A68495" points="413.75,512.75 407.5,557 	435.5,549.25 "/>
  <polygon fill="#AC7E8B" points="413.75,512.75 435.5,505.25 	435.5,549.25 "/>
  <polygon fill="#09213D" points="435.5,549.25 423.875,570.75 479,539 	"/>
  <polygon fill="#0A2747" points="435.5,505.25 435.5,549.25 	480.049,538.924 "/>
  <polygon fill="#C9BCD0" points="413.75,512.75 407.5,557 	359.75,535.5 390.563,509 "/>
  <polygon fill="#ADA9C4" points="355.25,527.25 342.25,529.25 	359.75,535.5 "/>
  <polygon fill="#CBBDD7" points="339.25,518.5 342.25,529.25 	351,518.5 "/>
  <polygon fill="#8A7DAB" points="351,518.5 342.25,529.25 	355.25,527.25 "/>
  <polygon fill="#BBA8C6" points="351,518.5 359.75,535.5 	383.928,514.706 "/>
  <polygon fill="#CDAECE" points="344,512.75 339.25,518.5 351,518.5 	"/>
  <polygon fill="#7E5398" points="390.563,509 383.928,514.706 	375.25,506.75 "/>
  <polygon fill="#B389BC" points="383.928,514.706 372.75,515.994 	365.75,509 375.25,506.75 "/>
  <polygon fill="#B1A3BA" points="342.25,503 344,512.75 347.25,509 "/>
  <polygon fill="#C5A0CB" points="347.25,509 344,512.75 351,518.5 	372.75,515.994 365.75,509 "/>
  <polygon fill="#BA9BC5" points="339.25,487.5 336.75,495.75 	344.75,492 "/>
  <polygon fill="#8E6293" points="344.75,492 347.25,509 336.75,495.75 	"/>
  <polygon fill="#6C376B" points="344.75,492 347.25,509 354,500.5 "/>
  <polygon fill="#391133" points="354,500.5 347.25,509 365.75,509 	375.25,506.75 "/>
  <polygon fill="#9E72B1" points="351,489.5 354,500.5 344.75,492 "/>
  <polygon fill="#E5DFE9" points="339.25,487.5 344.75,492 351,489.5 	"/>
  <polygon fill="#C2A2B1" points="419,475.5 435.5,505.25 	413.75,512.75 "/>
  <polygon fill="#D6C3D7" points="419,475.5 389,482.116 413.75,512.75 	"/>
  <polygon fill="#BDB4C9" points="389,482.116 390.563,509 	413.75,512.75 "/>
  <polygon fill="#D8CDDE" points="419,475.5 389,467.5 389,482.116 "/>
  <polygon fill="#CCC3D6" points="389,467.5 390.563,509 351,489.5 	357.25,473.75 "/>
  <polygon fill="#CBCCE0" points="354,464.75 339.25,487.5 	357.25,473.75 "/>
  <polygon fill="#D6CEE3" points="357.25,473.75 351,489.5 	339.25,487.5 "/>
  <polygon fill="#775B67" points="354,464.75 357.25,473.75 389,467.5 	"/>
  <polygon fill="#875B9A" points="351,489.5 354,500.5 373.667,506.284 	"/>
  <polygon fill="#9C90B8" points="374.718,506.663 349.625,488.75 	390.563,509 "/>
  <polygon fill="#15355E" points="435.5,452.25 419,475.5 435.5,505.25 	452.75,482.116 "/>
  <polygon fill="#1A6BAA" points="407.5,439.308 389,467.5 419,475.5 	"/>
  <polygon fill="#0D2A4A" points="452.901,482.116 435.5,505.32 	479.382,538.303 "/>
  <polygon fill="#0D233A" points="480.049,538.924 452.901,482.116 	521.25,492 "/>
  <polygon fill="#0B1B34" points="435.5,452.25 452.901,482.116 	489.25,462.75 "/>
  <polygon fill="#111B27" points="489.25,462.75 558.157,428.566 	521.25,492 452.901,482.116 "/>
  <polygon fill="#11151E" points="435.5,452.25 479.382,426.75 	489.25,462.75 "/>
  <polygon fill="#0D0C11" points="538.5,411.75 489.25,462.75 	479.382,426.75 "/>
  <polygon fill="#121317" points="538.5,411.75 489.25,462.75 	558.157,428.566 "/>
  <polygon fill="#2067A9" points="407.5,439.308 419,475.5 	435.5,452.25 "/>
  <polygon fill="#237DBC" points="393.25,426.75 389,467.5 	407.5,439.308 "/>
  <polygon fill="#102947" points="393.25,426.75 389,467.5 	371.5,436.25 "/>
  <polygon fill="#111226" points="356,450.5 354,464.75 389,467.5 	380.46,452.25 "/>
  <polygon fill="#0C1C33" points="312.5,444.75 354,464.75 356,450.5 	"/>
  <polygon fill="#1D4A69" points="312.5,444.75 356,450.5 371.5,436.25 	"/>
  <polygon fill="#1E4059" points="371.5,436.25 356,450.5 	380.46,452.25 "/>
  <polygon fill="#183B5B" points="312.5,444.75 371.5,436.25 	339.25,409 "/>
  <polygon fill="#12365A" points="339.25,409 371.5,436.25 	393.25,426.75 "/>
  <polygon fill="#0F395F" points="390.25,377 393.25,426.75 339.25,409 	"/>
  <polygon fill="#163F5F" points="339.25,409 366.25,375 390.25,377 "/>
  <polygon fill="#0C4169" points="366.25,375 361.75,360.75 390.25,377 	"/>
  <polygon fill="#0B2A46" points="393.25,426.75 416.25,388.75 	390.25,377 "/>
  <polygon fill="#142E53" points="416.25,388.75 411.559,396.5 429,409 	"/>
  <polygon fill="#105687" points="411.559,396.5 393.25,426.75 	426.25,416.75 "/>
  <polygon fill="#256098" points="411.559,396.5 426.25,416.75 429,409 	"/>
  <polygon fill="#1D76B8" points="393.25,426.75 407.5,439.308 	440.5,422.625 426.25,416.75 "/>
  <polygon fill="#1E63A6" points="440.5,422.625 407.5,439.308 	435.5,452.25 "/>
  <polygon fill="#104A7A" points="416.25,388.75 429,409 435.5,391 "/>
  <polygon fill="#2D5F92" points="440.5,422.625 435.5,452.25 	479.382,426.75 "/>
  <polygon fill="#283845" points="525.5,388.75 538.5,411.75 	479.382,426.75 "/>
  <polygon fill="#2B405D" points="477.25,400.25 479.382,426.75 	525.5,388.75 "/>
  <polygon fill="#314C6A" points="477.25,400.25 479.382,426.75 	440.5,422.625 "/>
  <polygon fill="#10446C" points="477.25,400.25 462.375,401.875 	440.5,422.625 "/>
  <polygon fill="#0F477A" points="426.25,416.75 440.5,422.625 	451.965,411.75 "/>
  <polygon fill="#317DB1" points="429,409 426.25,416.75 	451.965,411.75 "/>
  <polygon fill="#1A5C90" points="462.375,401.875 451.965,411.75 	429,409 "/>
  <polygon fill="#315D8E" points="435.5,391 429,409 447.459,405.059 	"/>
  <polygon fill="#1B395F" points="447.459,391 447.459,405.059 	435.5,391 "/>
  <polygon fill="#28394D" points="525.5,388.75 538.5,411.75 	575.25,370.75 "/>
  <polygon fill="#121B22" points="538.5,411.75 575.25,370.75 	624.25,396.5 "/>
  <polygon fill="#090A0C" points="644.5,243 627,342 624.25,396.5 	620.75,482.116 717,381 692.5,232 "/>
  <polygon fill="#090B0A" points="644.5,243 644.5,125 692.5,232 "/>
  <polygon fill="#4996CC" points="644.5,243 608.25,243 644.5,125 "/>
  <polygon fill="#1B598A" points="608.25,243 627,342 644.5,243 "/>
  <polygon fill="#0C0C0E" points="626.763,340.748 624.25,396.5 	575.25,370.75 "/>
  <polygon fill="#090B0A" points="608.25,243 567,137 555.25,223 "/>
  <polygon fill="#154172" points="567,137 555.25,223 526,226 "/>
  <polygon fill="#D8D0CD" points="608.25,243 555.25,223 507.25,250.25 	"/>
  <polygon fill="#F2EBE3" points="555.25,223 507.25,250.25 	480.25,230.75 "/>
  <polygon fill="#EDE4DB" points="480.25,230.75 483,256.25 	507.25,250.25 "/>
  <polygon fill="#253849" points="507.25,250.25 490.25,322 	575.25,370.75 "/>
  <polygon fill="#12151A" points="507.25,250.25 575.25,370.75 	626.763,340.748 "/>
  <polygon fill="#121116" points="608.25,243 507.25,250.25 	626.763,340.748 "/>
  <polygon fill="#363F4E" points="490.25,322 525.5,388.75 	575.25,370.75 "/>
  <polygon fill="#11141B" points="525.5,388.75 453.75,329.5 	490.25,322 "/>
  <polygon fill="#123C66" points="447.459,386.25 447.459,405.059 	462.375,401.875 472.25,395.654 466.5,388.75 "/>
  <polygon fill="#2D6AA1" points="462.375,401.875 472.25,395.654 	477.25,400.25 "/>
  <polygon fill="#1C2D41" points="472.25,344.777 477.25,400.25 	525.5,388.75 "/>
  <polygon fill="#3E75AD" points="475.362,379.308 466.5,388.75 	477.25,400.25 "/>
  <polygon fill="#122A4E" points="447.459,386.25 466.5,388.75 	455.75,368.875 "/>
  <polygon fill="#0B446F" points="455.75,368.875 466.5,388.75 	475.362,379.308 "/>
  <polygon fill="#0C3256" points="472.25,344.777 475.362,379.308 	455.75,368.875 "/>
  <polygon fill="#0B2A49" points="453.75,329.5 455.75,368.875 	472.25,344.777 "/>
  <polygon fill="#121A2F" points="507.25,250.25 490.25,322 	453.75,329.5 "/>
  <polygon fill="#0D2541" points="483,256.25 470.976,303.983 	507.25,250.25 "/>
  <polygon fill="#153C59" points="450.25,317.25 453.75,329.5 	470.976,303.983 "/>
  <polygon fill="#103056" points="483,256.25 430.25,274.75 	475.362,286.569 "/>
  <polygon fill="#27436A" points="466.5,253 430.25,274.75 483,256.25 	"/>
  <polygon fill="#074B7A" points="425.875,303 430.25,274.75 	475.362,286.569 "/>
  <polygon fill="#FFFAF6" points="480.25,230.75 483,256.25 	436.5,247.75 "/>
  <polygon fill="#1A557D" points="430.25,274.75 400,297.75 	425.875,303 "/>
  <polygon fill="#FEF9F5" points="436.5,247.75 430.25,274.75 	465.556,253.566 "/>
  <polygon fill="#FBF4EC" points="415.125,265.5 436.5,247.75 	430.25,274.75 "/>
  <polygon fill="#B4B5BA" points="400,297.75 430.25,274.75 	415.125,265.5 "/>
  <polygon fill="#A4AAAA" points="391.5,294.75 415.125,265.5 	400,297.75 "/>
  <polygon fill="#0F4574" points="475.362,286.569 407.547,344.101 	406.75,344.777 470.976,303.983 "/>
  <polygon fill="#2C76B3" points="425.875,303 406.75,344.777 	475.362,286.569 "/>
  <polygon fill="#CEC9C6" points="361.75,360.75 361.75,337.5 	391.5,294.75 "/>
  <polygon fill="#0F4E79" points="390.25,377 385.75,355.375 	361.75,360.75 "/>
  <polygon fill="#9299A9" points="400,297.75 377.803,325.137 	391.5,294.75 "/>
  <polygon fill="#1F619B" points="425.875,303 385.75,355.375 	417.393,301.279 "/>
  <polygon fill="#3A679E" points="377.803,325.137 361.75,360.75 	385.75,355.375 "/>
  <polygon fill="#7586A2" points="400,297.75 385.75,355.375 	377.803,325.137 "/>
  <polygon fill="#6A7B99" points="417.393,301.279 400,297.75 	385.75,355.375 "/>
  <polygon fill="#5093C8" points="453.75,329.5 450.25,317.25 	407.5,343.75 "/>
  <polygon fill="#3F94CD" points="425.875,303 385.75,355.375 	407.5,343.75 "/>
  <polygon fill="#0E5B9F" points="390.25,377 385.75,355.375 	407.5,343.75 "/>
  <polygon fill="#16385B" points="447.459,386.25 441.479,383.5 	447.459,389.779 "/>
  <polygon fill="#5C7FA5" points="436.5,391.25 441.479,383.5 	447.459,389.779 447.459,391 "/>
  <polygon fill="#0B538D" points="453.75,329.5 432.25,355.375 	407.138,344.447 "/>
  <polygon fill="#0C5896" points="390.25,377 401.571,367 	397.204,363.596 "/>
  <polygon fill="#0C5896" points="432.25,355.375 407.5,343.75 	397.204,363.596 401.571,367 "/>
  <polygon fill="#133C68" points="453.75,329.5 432.25,355.375 	455.75,368.875 "/>
  <polygon fill="#0D1520" points="390.25,377 401.571,367 	420.279,363.596 409.75,377 "/>
  <polygon fill="#1D2B5A" points="432.25,355.375 438.229,358.81 	420.279,363.596 "/>
  <polygon fill="#091839" points="401.571,367 420.279,363.596 	432.25,355.375 "/>
  <polygon fill="#192A55" points="447.459,386.25 455.75,368.875 	434,377.563 "/>
  <polygon fill="#094466" points="438.229,358.81 420.279,363.596 	409.75,377 427,366.188 455.75,368.875 "/>
  <polygon fill="#0F0E13" points="416.25,388.75 427,366.188 	409.75,377 "/>
  <polygon fill="#10131C" points="390.25,377 409.75,377 416.25,388.75 	"/>
  <polygon fill="#11141F" points="436.5,370.298 427,366.188 	434,377.563 "/>
  <polygon fill="#11141D" points="416.25,388.75 434,377.563 	427,366.188 "/>
  <polygon fill="#1B486F" points="455.75,368.875 434,377.563 	436.5,370.298 "/>
  <polygon fill="#081933" points="427,366.188 436.5,370.298 	455.75,368.875 "/>
  <polygon fill="#0C1B38" points="425.125,382.875 426.25,389.779 	416.25,388.75 "/>
  <polygon fill="#0A0D43" points="434,377.563 425.125,382.875 	434,381.5 "/>
  <polygon fill="#1D4275" points="447.459,386.25 434,381.5 	434,377.563 "/>
  <polygon fill="#446CAA" points="425.125,382.875 425.491,383.144 	436.5,391.25 426.25,389.779 "/>
  <polygon fill="#ACD0E2" points="440.729,384.667 436.5,391.25 	433.104,388.75 "/>
  <polygon fill="#FDFFFF" points="430.25,382.081 433.104,388.75 	435.151,381.906 "/>
  <polygon fill="#548DCA" points="440.729,384.667 433.104,388.75 	435.151,381.906 "/>
  <polygon fill="#275CA1" points="425.491,383.144 433.104,388.75 	430.25,382.081 "/>
 </g>
</svg>
!

CSS 

              
                $time: 6s;
$rand: 5000;
/*
  feel free to change $rand
  it changes the amplitude 
*/

@function rand($val){
  @if (random($val)) > $val/2{
    @return percentage(random($val)/100);
  }@else{
    @return - percentage(random($val)/100);
  }  
}

@mixin animation($name){
    @-webkit-keyframes #{$name}{
        @content;
    }
    @-moz-keyframes #{$name}{
        @content;
    }
    @-o-keyframes #{$name}{
        @content;
    }
    @keyframes #{$name}{
        @content;
    }
}

@include animation(batman){
  0%{
     transform: translate(rand($rand), rand($rand));
     opacity: 0;
  }
  30%, 60%{
     transform: translate(0);
     opacity: 1;
  }
  100%{
     transform: translate(rand($rand), rand($rand));
     opacity: 0;
  }
}

body{
  margin: 0;
  overflow: hidden;
  
  svg{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    background: -webkit-radial-gradient(#01579B, #000);
    background: -o-radial-gradient(#01579B, #000);
    background: -moz-radial-gradient(#01579B, #000);
    background: radial-gradient(#01579B, #000);
    
    g{
      -webkit-filter: url(#edge-cleaner);
      filter: url(#edge-cleaner);
    }
    
    polygon {
      opacity: 0;
      transform-box: fill-box;
      -webkit-animation: batman $time infinite;
      -moz-animation: batman $time infinite;
      -o-animation: batman $time infinite;
      animation: batman $time infinite; 
    }
  }
}
!

JS
!
999px

Console