123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

            
          
!
            
              $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; 
    }
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console