JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

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

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.

` ````
- var n_rows = 7, p = [];
style
- for(var ridx = 1; ridx < n_rows; ridx++) {
- var col_lim_inf = n_rows - ridx;
- var col_lim_sup = n_rows + ridx;
- var idx_lim_inf = Math.pow(ridx, 2) + 1;
- var idx_lim_sup = idx_lim_inf + 2*ridx;
- var a = [[idx_lim_inf], [idx_lim_sup]];
- var na = a.length;
- for(var i = 1; i < n_rows - ridx; i++) {
- for(var j = 0; j < na; j++) {
- var k = a[j][i - 1] + 2*(i + ridx)
- a[j].push(k);
- }
- }
- var sel = `.s3gon:nth-child(n + ${idx_lim_inf}):nth-child(-n + ${idx_lim_sup})`
- if(ridx%2)
- p.push(sel)
| #{sel} { --ridx: #{ridx + 1} }
| .s3gon:nth-child(#{a[0].join('), .s3gon:nth-child(')}) { --cidx: #{col_lim_inf} }
| .s3gon:nth-child(#{a[1].join('), .s3gon:nth-child(')}) { --cidx: #{col_lim_sup} }
- }
| #{p.join(', ')} { --p0: -1 }
.grid(style=`--n-rows: ${n_rows}; --n-cols: ${2*n_rows + 1}; --cidx: ${n_rows}`)
- for(var ridx = 0; ridx < n_rows; ridx++)
- for(var cidx = n_rows - ridx; cidx <= n_rows + ridx; cidx++)
.s3gon
```

` ````
@import 'compass/css3';
@function getPolyPoints(
$n: 3 /* number of poly vertices */,
$oa: -90deg /* angular offset of 1st poly vertex */) {
$ba: 360deg/$n; // base angle corrensponding to 1 poly edge
$pl: (); // list of points, initially empty
@for $i from 0 to $n {
$ca: $i*$ba + $oa; // angle current point is at wrt x axis
$x: calc(50%*(1 + #{cos($ca)})); // x coord of current point
$y: calc(50%*(1 + var(--p)*#{sin($ca)})); // y coord of current point
$pl: $pl, $x $y // add current point coords to points list
}
@return $pl
}
$c: #ff1ead;
$l: 5vmin;
$t: 1s;
$n3gon: 3;
$ba3gon: 360deg/$n3gon;
$rc3gon: .5*$l/sin(.5*$ba3gon);
$dc3gon: 2*$rc3gon;
$ri3gon: .5*$l/tan(.5*$ba3gon);
$h3gon: .5*$l*sqrt(3);
$mv: .5*($h3gon - $dc3gon);
$mh: .5*(.5*$l - $dc3gon);
:before, :after {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
body {
display: grid;
place-content: center;
position: relative;
margin: 0;
height: 100vh;
background: $c;
&:before {
opacity: .5;
background: #000;
animation: invert 2*$t ease-in-out (-$t) infinite alternate;
content: ''
}
}
.grid {
display: grid;
padding: -$mv (-$mh);
filter: drop-shadow(2px 2px 5px $c)
}
.s3gon {
--m: calc(.5*(1 - var(--p0, 1)*var(--p1, 1)));
--p: calc(2*var(--m) - 1);
grid-row: var(--ridx);
grid-column: var(--cidx, var(--n-rows));
position: relative;
margin: calc(#{$mv} - (1 - var(--m))*#{$ri3gon}) $mh;
width: $dc3gon; height: $dc3gon;
&:before, &:after {
background: $c;
clip-path: polygon(getPolyPoints());
animation: shrink $t ease-out infinite alternate;
animation-delay: calc(var(--cidx)*#{-$t}/var(--n-cols));
content: ''
}
&:before {
background: #000;
animation-name: shrink, invert;
animation-timing-function: ease-in, steps(1);
animation-duration: $t, 2*$t
}
&:nth-child(odd) { --p1: -1 }
}
@keyframes shrink { 95%, 100% { transform: scale(0) } }
@keyframes invert { 50% { background: #fff; } }
```

` ````
// no JS here, but check out version #2 of this demo https://codepen.io/thebabydino/pen/bzVqQp
```

999px

Shift F
Opt F
Find & Replace

Also see: Tab Triggers