Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                .table
  .table-cell
    .container
      .frame1
        - for (var x = 0; x < 2500; x++)
          .item1
      .frame2
        - for (var x = 0; x < 2500; x++)
          .item2
              
            
!

CSS

              
                $aaa: 624 625 626 633 634 674 734 783 829 833 874 884 885 924 926 927 935 973 975 980 1023 1030 1032 1034 1072 1076 1077 1122 1126 1129 1173 1178 1179 1180 1181 1184 1185 1224 1231 1232 1233 1234 1275 1276 1315 1323 1327 1328 1329 1330 1331 1332 1333 1364 1367 1370 1371 1373 1380 1382 1383 1414 1424 1431 1433 1437 1464 1469 1475 1479 1481 1484 1485 1486 1514 1520 1521 1525 1527 1528 1531 1532 1533 1572 1573 1574 1575 1576 1585 1616 1617 1621 1622 1623 1635 1668 1669 1673 1720 1722 1723 1734 1769 1772 1777 1778 1782 1783 1819 1823 1824 1825 1826 1829 1830 1831 1869 1876 1877 1920 1921 1923 1924;
$aab: 675 776 928 929 930 931 932 977;
$aac: 676 727 1672;
$aad: 677;
$aae: 679 680 681 682 732 878 879 880 881 882 883 934 974 1025 1875;
$aaf: 683 1721 1770;
$aag: 684 728 834 886;
$aah: 724 774 824 830 831 832 976 982 1026 1872;
$aai: 725 775;
$aaj: 726;
$aak: 729 730 731;
$aal: 733 777 1415 1465 1567 1568 1618;
$aam: 778 779 780 827 828;
$aan: 781 1375 1376;
$aao: 782;
$aap: 825 826;
$aaq: 835 1085 1186 1316 1324 1336 1368 1387 1419 1535;
$aar: 875 876 1476 1477 1478 1482 1483 1526;
$aas: 877 925;
$aat: 933;
$aau: 978 981 983;
$aav: 979 1229 1386 1423 1474 1571;
$aaw: 984;
$aax: 1024;
$aay: 1027 1078 1123 1127 1130 1131 1174 1175 1182 1183 1226 1227 1278 1279 1280 1281 1384 1435 1436 1470 1471 1472 1523 1524;
$aaz: 1028 1031 1033 1073 1079 1081 1124 1128 1132 1133 1134 1473 1515 1516 1566 1619 1620;
$aba: 1029 1074 1080 1177 1228 1229 1385 1422;
$abb: 1075 1230 1418;
$abc: 1082 1083 1420 1421 1466 1467 1517 1570;
$abd: 1084;
$abe: 1125 1176 1282;
$abf: 1135 1283 1334 1335 1372 1378 1429;
$abg: 1225 1277 1434 1522;
$abh: 1325 1326 1377 1381 1426 1427 1432;
$abi: 1365 1416 1518 1519 1569 1671 1820 1873;
$abj: 1366;
$abk: 1374 1425;
$abl: 1379 1480 1579 1627 1628 1629 1633 1677 1678 1679;
$abm: 1417 1468;
$abn: 1428;
$abo: 1430 1530 1534;
$abp: 1529 1577 1578 1624 1625 1626 1674 1675 1676 1779;
$abq: 1565 1670;
$abr: 1580 1581 1584 1630 1631 1634;
$abs: 1582;
$abt: 1583 1632;
$abu: 1680 1681;
$abv: 1682 1683 1729 1730 1731;
$abw: 1684;
$abx: 1724 1725 1726 1727 1728 1732 1733 1773 1774 1775 1776 1780 1781 1827 1828;
$abz: 1771 1874;
$aca: 1821;
$acb: 1822;
$acc: 1870;
$acd: 1871;

$matrix1: $aaa $aab $aac $aad $aae $aaf $aag $aah $aai $aaj $aak $aal $aam $aan $aao $aap $aaq $aar $aas $aat $aau $aav $aaw $aax $aay $aaz $aba $abb $abc $abd $abe $abf $abg $abh $abi $abj $abk $abl $abm $abn $abo $abp $abq $abr $abs $abt $abu $abv $abw $abx $abz $aca $acb $acc $acd;

$baa: 624 625 626 633 634 674 734 783 829 833 874 884 885 924 926 927 935 973 975 980 1023 1030 1032 1034 1072 1076 1077 1122 1126 1129 1173 1178 1179 1180 1181 1184 1185 1224 1231 1232 1233 1234 1275 1276 1323 1327 1328 1329 1330 1331 1332 1333 1370 1371 1373 1380 1382 1383 1424 1431 1433 1437 1469 1475 1479 1481 1484 1485 1486 1516 1517 1518 1519 1520 1521 1525 1527 1528 1531 1532 1533 1564 1565 1572 1573 1574 1575 1576 1585 1614 1621 1622 1623 1635 1664 1673 1714 1715 1720 1722 1723 1734 1766 1767 1768 1769 1772 1777 1778 1782 1783 1819 1823 1824 1825 1826 1829 1830 1831 1869 1876 1877 1920 1921 1923 1924;
$bab: 675 776 928 929 930 931 932 977;
$bac: 676 727 1672;
$bad: 677;
$bae: 679 680 681 682 732 878 879 880 881 882 883 934 974 1025 1875;
$baf: 683 1566 1569 1570 1615 1616 1619 1620 1721 1770;
$bag: 684 728 834 886;
$bah: 724 774 824 830 831 832 976 982 1026 1872;
$bai: 725 775;
$baj: 726;
$bak: 729 730 731;
$bal: 733 777;
$bam: 778 779 780 827 828;
$ban: 781 1375 1376;
$bao: 782;
$bap: 825 826;
$baq: 835 1085 1186 1324 1336 1387 1419 1535;
$bar: 875 876 1476 1477 1478 1482 1483 1526;
$bas: 877 925;
$bat: 933;
$bau: 978 981 983 1667 1668 1717 1718;
$bav: 979 1229 1386 1423 1474 1571;
$baw: 984;
$bax: 1024;
$bay: 1027 1078 1123 1127 1130 1131 1174 1175 1182 1183 1226 1227 1278 1279 1280 1281 1384 1435 1436 1470 1471 1472 1523 1524;
$baz: 1028 1031 1033 1073 1079 1081 1124 1128 1132 1133 1134 1473;
$bba: 1029 1074 1080 1177 1228 1229 1385 1422;
$bbb: 1075 1230;
$bbc: 1082 1083 1420 1421;
$bbd: 1084;
$bbe: 1125 1176 1282;
$bbf: 1135 1283 1334 1335 1372 1378 1429;
$bbg: 1225 1277 1434 1522;
$bbh: 1325 1326 1377 1381 1426 1427 1432;
$bbi: 1671 1820 1873;
$bbj: 0;
$bbk: 1374 1425;
$bbl: 1379 1480 1579 1627 1628 1629 1633 1677 1678 1679;
$bbm: 0;
$bbn: 1428;
$bbo: 1430 1530 1534;
$bbp: 1529 1577 1578 1624 1625 1626 1674 1675 1676 1779;
$bbq: 1670;
$bbr: 1580 1581 1584 1630 1631 1634;
$bbs: 1582;
$bbt: 1583 1632;
$bbu: 1680 1681;
$bbv: 1682 1683 1729 1730 1731;
$bbw: 1684;
$bbx: 1724 1725 1726 1727 1728 1732 1733 1773 1774 1775 1776 1780 1781 1827 1828;
$bbz: 1771 1874;
$bca: 1821;
$bcb: 1822;
$bcc: 1870;
$bcd: 1871;
$bce: 1567 1568 1617 1618;
$bcf: 1665 1666 1669 1716 1719;

$matrix2: $baa $bab $bac $bad $bae $baf $bag $bah $bai $baj $bak $bal $bam $ban $bao $bap $baq $bar $bas $bat $bau $bav $baw $bax $bay $baz $bba $bbb $bbc $bbd $bbe $bbf $bbg $bbh $bbi $bbj $bbk $bbl $bbm $bbn $bbo $bbp $bbq $bbr $bbs $bbt $bbu $bbv $bbw $bbx $bbz $bca $bcb $bcc $bcd $bce $bcf;

$bg: (1: #282828, 2: #E86050, 3: #A75000, 4: #292A2A, 5: #272828, 6: #A85000, 7: #292929, 8: #292828, 9: #F19058, 10: #E7604F, 11: #F82038, 12: #784028, 13: #C80018, 14: #F92038, 15: #F72038, 16: #E96150, 17: #2A2A2A, 18: #A10000, 19: #A00000, 20: #E65F50, 21: #F09058, 22: #EF8F58, 23: #282929, 24: #EF9058, 25: #E96050, 26: #F19158, 27: #EF9158, 28: #262828, 29: #F7B981, 30: #F7B77E, 31: #E76050, 32: #282A2A, 33: #2A2828, 34: #C70018, 35: #A95000, 36: #A75000, 37: #C90018, 38: #3870A9, 39: #F7B781, 40: #9F0000, 41: #3870A7, 42: #284881, 43: #2A2A28, 44: #F9F9F9, 45: #4697CF, 46: #4899D1, 47: #3971A8, 48: #3870A8, 49: #2A2A29, 50: #284880, 51: #DF8030, 52: #E08030, 53: #EFC830, 54: #A95100, 55: #F0C830, 56: #F7B77F, 57: #774028);

$i: 1;

@each $m in $matrix1 {
  @each $colour in $m {
    .item1:nth-child(#{$colour}) {
      background: #{map-get($bg, $i)};
    }
  }
  $i: $i+1;
}

$i: 1;

@each $m in $matrix2 {
  @each $colour in $m {
    .item2:nth-child(#{$colour}) {
      background: #{map-get($bg, $i)};
    }
  }
  $i: $i+1;
}

.frame1 {
    animation: colorswitch 0.5s step-end infinite;
}
@keyframes colorswitch {
    0% {z-index:3}
    50% {z-index:1}
}

.table {
  width: 100%;
  height: 100%;
  height: 100vh;
  display: table;
}

.item1, .item2 {
  float: left;
  width: 4px;
  height: 4px;
}

.table-cell {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

.frame1, .frame2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  background: #26C4DC;
}

.frame1 {
  z-index: 1;
}

.frame2 {
  z-index: 2;
}

body {
  background: #26C4DC;
}
              
            
!

JS

              
                
              
            
!
999px

Console