Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

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.

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

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

              
                <div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 768">
	<g>
		<g>
			<polygon data-name="5" class="svg-triangle-5" points="307.109 59.107 494.6 84.605 433.103 192.6 307.109 59.107"/>
			<polygon data-name="5" class="svg-triangle-5" points="961.076 252.597 1031.573 470.086 1121.568 273.596 961.076 252.597"/>
			<polygon data-name="4" class="svg-triangle-4" points="494.6 84.605 553.097 224.098 433.103 192.6 494.6 84.605"/>
			<polygon data-name="5" class="svg-triangle-5" points="637.093 426.588 674.591 270.596 553.097 296.095 637.093 426.588"/>
			<polygon data-name="4" class="svg-triangle-4" points="355.107 245.097 251.612 146.102 307.109 59.107 433.103 192.6 355.107 245.097"/>
			<polygon data-name="2" class="svg-triangle-2" points="169.116 338.093 251.612 146.102 355.107 245.097 298.11 368.091 169.116 338.093"/>
			<polygon data-name="5" class="svg-triangle-5" points="454.102 398.09 421.103 296.095 298.11 368.091 454.102 398.09"/>
			<polygon data-name="1" class="svg-triangle-1" points="884.58 154.352 900.114 58.295 1022.573 42.5 884.58 154.352"/>
			<polygon data-name="2" class="svg-triangle-2" points="1105.069 192.6 1022.573 42.5 884.58 154.352 1105.069 192.6"/>
			<polygon data-name="1" class="svg-triangle-1" points="1202.564 168.601 1022.573 42.5 1105.069 192.6 1202.564 168.601"/>
			<polygon data-name="1" class="svg-triangle-1" points="1166.566 318.594 1202.564 168.601 1121.568 273.596 1166.566 318.594"/>
			<polygon data-name="4" class="svg-triangle-4" points="1105.069 192.6 1121.568 273.596 1202.564 168.601 1105.069 192.6"/>
			<polygon data-name="5" class="svg-triangle-5" points="884.58 154.352 788.585 347.092 961.076 252.597 884.58 154.352"/>
			<polygon data-name="3" class="svg-triangle-3" points="713.589 154.352 788.585 347.092 884.58 154.352 713.589 154.352"/>
			<polygon data-name="1" class="svg-triangle-1" points="674.591 270.596 713.589 154.352 599.595 174.601 674.591 270.596"/>
			<polygon data-name="1" class="svg-triangle-1" points="599.595 174.601 494.6 84.605 553.097 224.098 599.595 174.601"/>
			<polygon data-name="3" class="svg-triangle-3" points="650.592 92.105 599.595 174.601 494.6 84.605 559.097 0 650.592 92.105"/>
			<polygon data-name="4" class="svg-triangle-4" points="650.592 92.105 713.589 154.352 599.595 174.601 650.592 92.105"/>
			<polygon data-name="1" class="svg-triangle-1" points="503.599 458.087 553.097 296.095 637.093 426.588 503.599 458.087"/>
			<polygon data-name="4" class="svg-triangle-4" points="355.107 548.082 454.102 398.09 503.599 458.087 355.107 548.082"/>
			<polygon data-name="1" class="svg-triangle-1" points="553.097 224.098 421.103 296.095 553.097 296.095 553.097 224.098"/>
			<polygon data-name="3" class="svg-triangle-3" points="433.103 192.6 421.103 296.095 553.097 224.098 433.103 192.6"/>
			<polygon data-name="1" class="svg-triangle-1" points="355.107 245.097 421.103 296.095 433.103 192.6 355.107 245.097"/>
			<polygon data-name="3" class="svg-triangle-3" points="298.11 368.091 355.107 245.097 421.103 296.095 298.11 368.091"/>
			<polygon data-name="1" class="svg-triangle-1" points="599.595 638.078 503.599 458.087 463.101 597.58 599.595 638.078"/>
			<polygon data-name="3" class="svg-triangle-3" points="599.595 638.078 637.093 426.588 503.599 458.087 599.595 638.078"/>
			<polygon data-name="5" class="svg-triangle-5" points="838.083 532.333 788.585 347.092 884.58 398.09 838.083 532.333"/>
			<polygon data-name="4" class="svg-triangle-4" points="1031.573 470.086 838.083 532.333 884.58 398.09 1031.573 470.086"/>
			<polygon data-name="2" class="svg-triangle-2" points="884.58 398.09 961.076 252.597 1031.573 470.086 884.58 398.09"/>
			<polygon data-name="1" class="svg-triangle-1" points="884.58 398.09 961.076 252.597 788.585 347.092 884.58 398.09"/>
			<polygon data-name="4" class="svg-triangle-4" points="713.589 154.352 788.585 347.092 674.591 270.596 713.589 154.352"/>
			<polygon data-name="2" class="svg-triangle-2" points="674.591 270.596 637.093 426.588 788.585 347.092 674.591 270.596"/>
			<polygon data-name="5" class="svg-triangle-5" points="553.097 224.098 674.591 270.596 599.595 174.601 553.097 224.098"/>
			<polygon data-name="2" class="svg-triangle-2" points="553.097 224.098 553.097 296.095 674.591 270.596 553.097 224.098"/>
			<polygon data-name="4" class="svg-triangle-4" points="553.097 296.095 454.102 398.09 421.103 296.095 553.097 296.095"/>
			<polygon data-name="2" class="svg-triangle-2" points="553.097 296.095 503.599 458.087 454.102 398.09 553.097 296.095"/>
			<polygon data-name="3" class="svg-triangle-3" points="788.585 347.092 838.083 532.333 637.093 426.588 788.585 347.092"/>
			<polygon data-name="1" class="svg-triangle-1" points="838.083 532.333 868.081 710.074 994.825 614.079 838.083 532.333"/>
			<polygon data-name="4" class="svg-triangle-4" points="713.589 572.081 838.083 532.333 868.081 710.074 713.589 572.081"/>
			<polygon data-name="2" class="svg-triangle-2" points="713.589 572.081 637.093 426.588 838.083 532.333 713.589 572.081"/>
			<polygon data-name="1" class="svg-triangle-1" points="713.589 572.081 599.595 638.078 637.093 426.588 713.589 572.081"/>
			<polygon data-name="5" class="svg-triangle-5" points="704.589 740.073 713.589 572.081 599.595 638.078 704.589 740.073"/>
			<polygon data-name="1" class="svg-triangle-1" points="884.58 154.352 961.076 252.597 1105.069 192.6 884.58 154.352"/>
			<polygon data-name="3" class="svg-triangle-3" points="151.117 152.102 151.117 59.107 251.612 146.102 151.117 152.102"/>
			<polygon data-name="4" class="svg-triangle-4" points="151.117 152.102 169.116 338.093 251.612 146.102 151.117 152.102"/>
			<polygon data-name="5" class="svg-triangle-5" points="19.124 125.853 151.117 59.107 0 24.608 19.124 125.853"/>
			<polygon data-name="5" class="svg-triangle-5" points="88.12 252.597 19.124 338.093 169.116 338.093 88.12 252.597"/>
			<polygon data-name="1" class="svg-triangle-1" points="88.12 252.597 151.117 152.102 169.116 338.093 88.12 252.597"/>
			<polygon data-name="1" class="svg-triangle-1" points="19.124 125.853 151.117 59.107 151.117 152.102 19.124 125.853"/>
			<polygon data-name="3" class="svg-triangle-3" points="1031.573 470.086 994.825 614.079 838.083 532.333 1031.573 470.086"/>
			<polygon data-name="3" class="svg-triangle-3" points="1105.069 192.6 961.076 252.597 1121.568 273.596 1105.069 192.6"/>
			<polygon data-name="1" class="svg-triangle-1" points="1319.559 414.589 1190.565 532.333 1213.064 368.091 1319.559 414.589"/>
			<polygon data-name="1" class="svg-triangle-1" points="1166.566 318.594 1213.064 368.091 1031.573 470.086 1166.566 318.594"/>
			<polygon data-name="2" class="svg-triangle-2" points="1166.566 318.594 1031.573 470.086 1121.568 273.596 1166.566 318.594"/>
			<polygon data-name="5" class="svg-triangle-5" points="1202.564 168.601 1166.566 318.594 1351.057 325.343 1202.564 168.601"/>
			<polygon data-name="1" class="svg-triangle-1" points="1202.564 168.601 1258.812 48.607 1366 152.102 1202.564 168.601"/>
			<polygon data-name="4" class="svg-triangle-4" points="1190.565 532.333 1213.064 368.091 1031.573 470.086 1190.565 532.333"/>
			<polygon data-name="1" class="svg-triangle-1" points="1190.565 532.333 994.825 614.079 1031.573 470.086 1190.565 532.333"/>
			<polygon data-name="5" class="svg-triangle-5" points="1190.565 532.333 1069.071 672.576 994.825 614.079 1190.565 532.333"/>
			<polygon data-name="1" class="svg-triangle-1" points="1270.061 650.077 1190.565 532.333 1069.071 672.576 1270.061 650.077"/>
			<polygon data-name="2" class="svg-triangle-2" points="1270.061 650.077 1190.565 532.333 1319.559 414.589 1270.061 650.077"/>
			<polygon data-name="5" class="svg-triangle-5" points="1319.559 414.589 1213.064 368.091 1351.057 325.343 1319.559 414.589"/>
			<polygon data-name="3" class="svg-triangle-3" points="1351.057 325.343 1213.064 368.091 1166.566 318.594 1351.057 325.343"/>
			<polygon data-name="2" class="svg-triangle-2" points="1351.057 325.343 1366 152.102 1202.564 168.601 1351.057 325.343"/>
			<polygon data-name="5" class="svg-triangle-5" points="1202.564 168.601 1258.812 48.607 1022.573 42.5 1202.564 168.601"/>
			<polygon data-name="2" class="svg-triangle-2" points="298.11 368.091 355.107 548.082 454.102 398.09 298.11 368.091"/>
			<polygon data-name="5" class="svg-triangle-5" points="298.11 368.091 211.114 470.086 355.107 548.082 298.11 368.091" />
			<polygon data-name="4" class="svg-triangle-4" points="211.114 470.086 169.116 338.093 298.11 368.091 211.114 470.086"/>
			<polygon data-name="5" class="svg-triangle-5" points="211.114 470.086 19.124 414.589 169.116 338.093 211.114 470.086"/>
			<polygon data-name="1" class="svg-triangle-1" points="169.116 338.093 19.124 338.093 19.124 414.589 169.116 338.093"/>
			<polygon data-name="1" class="svg-triangle-1" points="19.124 414.589 128.618 542.082 211.114 470.086 19.124 414.589"/>
			<polygon data-name="1" class="svg-triangle-1" points="128.618 542.082 163.116 717.574 0 602.454 128.618 542.082"/>
			<polygon data-name="4" class="svg-triangle-4" points="128.618 542.082 19.124 414.589 0 602.454 128.618 542.082"/>
			<polygon data-name="3" class="svg-triangle-3" points="211.114 470.086 342.357 591.58 128.618 542.082 211.114 470.086"/>
			<polygon data-name="1" class="svg-triangle-1" points="211.114 470.086 342.357 591.58 355.107 548.082 211.114 470.086"/>
			<polygon data-name="5" class="svg-triangle-5" points="355.107 548.082 463.101 597.58 503.599 458.087 355.107 548.082"/>
			<polygon data-name="5" class="svg-triangle-5" points="342.357 591.58 163.116 717.574 128.618 542.082 342.357 591.58"/>
			<polygon data-name="2" class="svg-triangle-2" points="342.357 591.58 283.11 768 163.116 717.574 342.357 591.58"/>
			<polygon data-name="1" class="svg-triangle-1" points="342.357 591.58 463.101 597.58 355.107 548.082 342.357 591.58"/>
			<polygon data-name="4" class="svg-triangle-4" points="342.357 591.58 394.105 662.076 463.101 597.58 342.357 591.58"/>
			<polygon data-name="3" class="svg-triangle-3" points="342.357 591.58 394.105 662.076 283.11 768 342.357 591.58"/>
			<polygon data-name="1" class="svg-triangle-1" points="394.105 662.076 376.106 768 283.11 768 394.105 662.076"/>
			<polygon data-name="2" class="svg-triangle-2" points="394.105 662.076 433.103 768 376.106 768 394.105 662.076"/>
			<polygon data-name="1" class="svg-triangle-1" points="463.101 597.58 512.599 768 394.105 662.076 463.101 597.58"/>
			<polygon data-name="4" class="svg-triangle-4" points="394.105 662.076 512.599 768 433.103 768 394.105 662.076"/>
			<polygon data-name="2" class="svg-triangle-2" points="463.101 597.58 599.595 638.078 512.599 768 463.101 597.58"/>
			<polygon data-name="4" class="svg-triangle-4" points="599.595 638.078 737.588 768 512.599 768 599.595 638.078"/>
			<polygon data-name="1" class="svg-triangle-1" points="713.589 572.081 704.75 737.082 868.081 710.074 713.589 572.081"/>
			<polygon data-name="2" class="svg-triangle-2" points="868.081 710.074 737.588 768 704.75 737.082 868.081 710.074"/>
			<polygon data-name="1" class="svg-triangle-1" points="868.081 710.074 884.58 768 737.588 768 868.081 710.074"/>
			<polygon data-name="4" class="svg-triangle-4" points="868.081 710.074 1069.071 672.576 994.825 614.079 868.081 710.074"/>
			<polygon data-name="2" class="svg-triangle-2" points="868.081 710.074 1041.322 768 1069.071 672.576 868.081 710.074"/>
			<polygon data-name="3" class="svg-triangle-3" points="868.081 710.074 884.58 768 1041.322 768 868.081 710.074"/>
			<polygon data-name="1" class="svg-triangle-1" points="1041.322 768 1069.071 672.576 1181.565 768 1041.322 768"/>
			<polygon data-name="3" class="svg-triangle-3" points="1270.061 650.077 1255.062 768 1181.565 768 1069.071 672.576 1270.061 650.077"/>
			<polygon data-name="1" class="svg-triangle-1" points="713.589 154.352 788.585 68.106 884.58 154.352 713.589 154.352"/>
			<polygon data-name="5" class="svg-triangle-5" points="713.589 154.352 788.585 68.106 650.592 92.105 713.589 154.352"/>
			<polygon data-name="4" class="svg-triangle-4" points="788.585 68.106 884.58 154.352 900.114 58.295 788.585 68.106"/>
			<polygon data-name="2" class="svg-triangle-2" points="251.612 146.102 241.112 0 307.109 59.107 251.612 146.102"/>
			<polygon data-name="1" class="svg-triangle-1" points="241.112 0 151.117 59.107 251.612 146.102 241.112 0"/>
			<polygon data-name="3" class="svg-triangle-3" points="151.117 59.107 241.112 0 47.622 0 151.117 59.107"/>
			<polygon data-name="4" class="svg-triangle-4" points="151.117 59.107 47.622 0 0 0 0 24.608 151.117 59.107"/>
			<polygon data-name="4" class="svg-triangle-4" points="1258.812 48.607 1366 42.5 1366 152.102 1258.812 48.607"/>
			<polygon data-name="1" class="svg-triangle-1" points="307.109 59.107 559.097 0 494.6 84.605 307.109 59.107"/>
			<polygon data-name="4" class="svg-triangle-4" points="307.109 59.107 559.097 0 241.112 0 307.109 59.107"/>
			<polygon data-name="2" class="svg-triangle-2" points="650.592 92.105 845.582 0 559.097 0 650.592 92.105"/>
			<polygon data-name="1" class="svg-triangle-1" points="845.582 0 788.585 68.106 650.592 92.105 845.582 0"/>
			<polygon data-name="5" class="svg-triangle-5" points="845.582 0 946.251 54.236 788.585 68.106 845.582 0"/>
			<polygon data-name="4" class="svg-triangle-4" points="88.12 252.597 0 257.097 19.124 125.853 88.12 252.597"/>
			<polygon data-name="3" class="svg-triangle-3" points="88.12 252.597 0 361.342 0 257.097 88.12 252.597"/>
			<polygon data-name="2" class="svg-triangle-2" points="946.251 54.236 1031.573 0 845.582 0 946.251 54.236"/>
			<polygon data-name="4" class="svg-triangle-4" points="1031.573 0 1022.573 42.5 946.251 54.236 1031.573 0"/>
			<polygon data-name="1" class="svg-triangle-1" points="1031.573 0 1258.812 48.607 1022.573 42.5 1031.573 0"/>
			<polygon data-name="3" class="svg-triangle-3" points="1258.812 48.607 1366 0 1031.573 0 1258.812 48.607"/>
			<polygon data-name="1" class="svg-triangle-1" points="1258.812 48.607 1366 0 1366 42.5 1258.812 48.607"/>
			<polygon data-name="3" class="svg-triangle-3" points="163.116 717.574 0 602.454 0 725.5 163.116 717.574"/>
			<polygon data-name="1" class="svg-triangle-1" points="163.116 717.574 94.12 768 0 725.5 163.116 717.574"/>
			<polygon data-name="5" class="svg-triangle-5" points="94.12 768 0 725.5 0 768 94.12 768"/>
			<polygon data-name="5" class="svg-triangle-5" points="94.12 768 163.116 717.574 283.11 768 94.12 768"/>
			<polygon data-name="1" class="svg-triangle-1" points="1255.062 768 1366 696.575 1366 768 1255.062 768"/>
			<polygon data-name="5" class="svg-triangle-5" points="1255.062 768 1366 696.575 1270.061 650.077 1255.062 768"/>
			<polygon data-name="2" class="svg-triangle-2" points="1270.061 650.077 1366 602.454 1366 696.575 1270.061 650.077"/>
			<polygon data-name="1" class="svg-triangle-1" points="1270.061 650.077 1366 602.454 1298.377 515.361 1270.061 650.077"/>
			<polygon data-name="1" class="svg-triangle-1" points="1298.377 515.361 1319.559 414.589 1366 602.454 1298.377 515.361"/>
			<polygon data-name="4" class="svg-triangle-4" points="1319.559 414.589 1366 439.713 1366 602.454 1319.559 414.589"/>
			<polygon data-name="1" class="svg-triangle-1" points="1326.771 394.152 1351.057 325.343 1366 439.713 1326.771 394.152"/>
			<polygon data-name="1" class="svg-triangle-1" points="19.124 125.853 0 24.608 0 257.097 19.124 125.853"/>
			<polygon data-name="1" class="svg-triangle-1" points="19.124 414.589 0 602.454 0 361.342 19.124 414.589"/>
			<polygon data-name="4" class="svg-triangle-4" points="1351.057 325.343 1366 152.102 1366 439.713 1351.057 325.343"/>
			<polygon data-name="1" class="svg-triangle-1" points="1319.559 414.589 1326.771 394.152 1366 439.713 1319.559 414.589"/>
			<polygon data-name="5" class="svg-triangle-5" points="19.124 338.093 19.124 414.589 0 361.342 19.124 338.093"/>
			<polygon data-name="2" class="svg-triangle-2" points="151.117 152.102 88.12 252.597 19.124 125.853 151.117 152.102"/>
		</g>
	</g>
</svg>
</div>
              
            
!

CSS

              
                $green-1: #279441;
$green-2: #2b9744;
$green-3: #2d9a47;
$green-4: #329c49;
$green-5: #359f4b;

$blue-1: #1761ac;
$blue-2: #105fa9;
$blue-3: #005ca6;
$blue-4: #005aa4;
$blue-5: #0057a1;

$orange-1: #f86625;
$orange-2: #f56323;
$orange-3: #f16021;
$orange-4: #ee5d1d;
$orange-5: #eb5b1a;

$purple-1: #57357b;
$purple-2: #543279;
$purple-3: #804c9e;
$purple-4: #4f2e74;
$purple-5: #4d2c71;

.container {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  
  /* This fills in the cracks between the triangles */
  svg {
    background-color: $purple-3;
  }
  
  .svg-triangle-1 {
    fill: $purple-1;
    animation: triangle 4.5s infinite;
  }
  .svg-triangle-2 {
    fill: $purple-2;
    animation: triangle 4.5s .75s infinite;
  }
  .svg-triangle-3 {
    fill: $purple-3;
    animation: triangle 4.5s 1.5s infinite;
  }
  .svg-triangle-4 {
    fill: $purple-4;
    animation: triangle 4.5s 2.25s infinite;
  }
  .svg-triangle-5 {
    fill: $purple-5;
    animation: triangle 4.5s 3s infinite;
  }
}

@keyframes triangle {
  0% {
    fill: $purple-1;
  }
  50% {
    fill: $purple-5;
  }
  100% {
    fill: $purple-1;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console