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.
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.
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.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
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.
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).
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.
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.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
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.
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.
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.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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>
$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;
}
}
Also see: Tab Triggers