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

              
                - var n = 0
.canvas
  while n < 1600
    - n++
    .pixel

              
            
!

CSS

              
                // Setup background color and centralize the canvas
body {
  background: #555;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  width: 400px;
  height: 400px;
}

.pixel {
  width: 10px;
  height: 10px;
  float: left;
  box-shadow: 0px 0px 1px #fff;
}

// Define the colors
$black: #1a0306;
$white: #fff;
$red: #f41f0d;
$blue: #142751;
$red100: #99150e;
$blue100: #18173D;

// Here comes the drawing
// Outline - $black
.pixel:nth-child(17),
.pixel:nth-child(18),
.pixel:nth-child(19),
.pixel:nth-child(20),
.pixel:nth-child(21),
.pixel:nth-child(22),
.pixel:nth-child(23),
.pixel:nth-child(24),
.pixel:nth-child(25),
.pixel:nth-child(26),
.pixel:nth-child(54),
.pixel:nth-child(55),
.pixel:nth-child(56),
.pixel:nth-child(67),
.pixel:nth-child(68),
.pixel:nth-child(69),
.pixel:nth-child(92),
.pixel:nth-child(93),
.pixel:nth-child(110),
.pixel:nth-child(111),
.pixel:nth-child(131),
.pixel:nth-child(152),
.pixel:nth-child(169),
.pixel:nth-child(170),
.pixel:nth-child(171),
.pixel:nth-child(172),
.pixel:nth-child(173),
.pixel:nth-child(174),
.pixel:nth-child(175),
.pixel:nth-child(188),
.pixel:nth-child(189),
.pixel:nth-child(190),
.pixel:nth-child(191),
.pixel:nth-child(192),
.pixel:nth-child(193),
.pixel:nth-child(194),
.pixel:nth-child(208),
.pixel:nth-child(209),
.pixel:nth-child(214),
.pixel:nth-child(215),
.pixel:nth-child(216),
.pixel:nth-child(227),
.pixel:nth-child(228),
.pixel:nth-child(229),
.pixel:nth-child(234),
.pixel:nth-child(235),
.pixel:nth-child(247),
.pixel:nth-child(287),
.pixel:nth-child(327),
.pixel:nth-child(367),
.pixel:nth-child(407),
.pixel:nth-child(447),
.pixel:nth-child(487),
.pixel:nth-child(527),
.pixel:nth-child(567),
.pixel:nth-child(607),
.pixel:nth-child(276),
.pixel:nth-child(316),
.pixel:nth-child(356),
.pixel:nth-child(396),
.pixel:nth-child(436),
.pixel:nth-child(476),
.pixel:nth-child(516),
.pixel:nth-child(556),
.pixel:nth-child(596),
.pixel:nth-child(636),
.pixel:nth-child(248),
.pixel:nth-child(608),
.pixel:nth-child(648),
.pixel:nth-child(688),
.pixel:nth-child(256),
.pixel:nth-child(257),
.pixel:nth-child(297),
.pixel:nth-child(337),
.pixel:nth-child(338),
.pixel:nth-child(378),
.pixel:nth-child(379),
.pixel:nth-child(419),
.pixel:nth-child(459),
.pixel:nth-child(499),
.pixel:nth-child(539),
.pixel:nth-child(579),
.pixel:nth-child(618),
.pixel:nth-child(658),
.pixel:nth-child(657),
.pixel:nth-child(696),
.pixel:nth-child(697),
.pixel:nth-child(729),
.pixel:nth-child(730),
.pixel:nth-child(731),
.pixel:nth-child(732),
.pixel:nth-child(733),
.pixel:nth-child(734),
.pixel:nth-child(735),
.pixel:nth-child(770),
.pixel:nth-child(771),
.pixel:nth-child(772),
.pixel:nth-child(773),
.pixel:nth-child(774),
.pixel:nth-child(384),
.pixel:nth-child(424),
.pixel:nth-child(464),
.pixel:nth-child(504),
.pixel:nth-child(544),
.pixel:nth-child(584),
.pixel:nth-child(305),
.pixel:nth-child(345),
.pixel:nth-child(385),
.pixel:nth-child(625),
.pixel:nth-child(665),
.pixel:nth-child(266),
.pixel:nth-child(306),
.pixel:nth-child(666),
.pixel:nth-child(706),
.pixel:nth-child(227),
.pixel:nth-child(267),
.pixel:nth-child(707),
.pixel:nth-child(747),
.pixel:nth-child(748),
.pixel:nth-child(749),
.pixel:nth-child(750),
.pixel:nth-child(751),
.pixel:nth-child(752),
.pixel:nth-child(753),
.pixel:nth-child(754),
.pixel:nth-child(789),
.pixel:nth-child(790),
.pixel:nth-child(791),
.pixel:nth-child(792),
.pixel:nth-child(793),
.pixel:nth-child(811),
.pixel:nth-child(812),
.pixel:nth-child(831),
.pixel:nth-child(832),
.pixel:nth-child(714),
.pixel:nth-child(715),
.pixel:nth-child(675),
.pixel:nth-child(635),
.pixel:nth-child(852),
.pixel:nth-child(853),
.pixel:nth-child(870),
.pixel:nth-child(871),
.pixel:nth-child(893),
.pixel:nth-child(894),
.pixel:nth-child(908),
.pixel:nth-child(909),
.pixel:nth-child(932),
.pixel:nth-child(970),
.pixel:nth-child(971),
.pixel:nth-child(1009),
.pixel:nth-child(1049),
.pixel:nth-child(1090),
.pixel:nth-child(950),
.pixel:nth-child(991),
.pixel:nth-child(992),
.pixel:nth-child(1033),
.pixel:nth-child(1073),
.pixel:nth-child(980),
.pixel:nth-child(981),
.pixel:nth-child(982),
.pixel:nth-child(1021),
.pixel:nth-child(1059),
.pixel:nth-child(1060),
.pixel:nth-child(1061),
.pixel:nth-child(1062),
.pixel:nth-child(1063),
.pixel:nth-child(1099),
.pixel:nth-child(1101),
.pixel:nth-child(1103),

.pixel:nth-child(1112) {
  background-color: $black;
}

// $red

.pixel:nth-child(57),
.pixel:nth-child(58),
.pixel:nth-child(59),
.pixel:nth-child(60),
.pixel:nth-child(61),
.pixel:nth-child(62),
.pixel:nth-child(63),
.pixel:nth-child(64),
.pixel:nth-child(65),
.pixel:nth-child(66),
.pixel:nth-child(97),
.pixel:nth-child(98),
.pixel:nth-child(99),
.pixel:nth-child(100),
.pixel:nth-child(101),
.pixel:nth-child(102),
.pixel:nth-child(103),
.pixel:nth-child(104),
.pixel:nth-child(105),
.pixel:nth-child(106),
.pixel:nth-child(107),
.pixel:nth-child(108),
.pixel:nth-child(109),
.pixel:nth-child(136),
.pixel:nth-child(137),
.pixel:nth-child(138),
.pixel:nth-child(139),
.pixel:nth-child(140),
.pixel:nth-child(141),
.pixel:nth-child(142),
.pixel:nth-child(143),
.pixel:nth-child(144),
.pixel:nth-child(145),
.pixel:nth-child(146),
.pixel:nth-child(147),
.pixel:nth-child(148),
.pixel:nth-child(149),
.pixel:nth-child(150),
.pixel:nth-child(151),
.pixel:nth-child(176),
.pixel:nth-child(177),
.pixel:nth-child(178),
.pixel:nth-child(179),
.pixel:nth-child(180),
.pixel:nth-child(181),
.pixel:nth-child(182),
.pixel:nth-child(183),
.pixel:nth-child(184),
.pixel:nth-child(185),
.pixel:nth-child(186),
.pixel:nth-child(187),
.pixel:nth-child(217),
.pixel:nth-child(218),
.pixel:nth-child(219),
.pixel:nth-child(220),
.pixel:nth-child(221),
.pixel:nth-child(222),
.pixel:nth-child(223),
.pixel:nth-child(224),
.pixel:nth-child(225),
.pixel:nth-child(226),
.pixel:nth-child(258),
.pixel:nth-child(259),
.pixel:nth-child(260),
.pixel:nth-child(261),
.pixel:nth-child(262),
.pixel:nth-child(263),
.pixel:nth-child(264),
.pixel:nth-child(265),
.pixel:nth-child(298),
.pixel:nth-child(299),
.pixel:nth-child(300),
.pixel:nth-child(301),
.pixel:nth-child(302),
.pixel:nth-child(303),
.pixel:nth-child(304),
.pixel:nth-child(339),
.pixel:nth-child(340),
.pixel:nth-child(341),
.pixel:nth-child(342),
.pixel:nth-child(343),
.pixel:nth-child(344),
.pixel:nth-child(380),
.pixel:nth-child(381),
.pixel:nth-child(382),
.pixel:nth-child(383),
.pixel:nth-child(420),
.pixel:nth-child(421),
.pixel:nth-child(422),
.pixel:nth-child(423),
.pixel:nth-child(460),
.pixel:nth-child(461),
.pixel:nth-child(462),
.pixel:nth-child(463),
.pixel:nth-child(500),
.pixel:nth-child(501),
.pixel:nth-child(502),
.pixel:nth-child(503),
.pixel:nth-child(540),
.pixel:nth-child(541),
.pixel:nth-child(542),
.pixel:nth-child(543),
.pixel:nth-child(580),
.pixel:nth-child(581),
.pixel:nth-child(582),
.pixel:nth-child(583),
.pixel:nth-child(619),
.pixel:nth-child(620),
.pixel:nth-child(621),
.pixel:nth-child(622),
.pixel:nth-child(623),
.pixel:nth-child(624),
.pixel:nth-child(659),
.pixel:nth-child(660),
.pixel:nth-child(661),
.pixel:nth-child(662),
.pixel:nth-child(663),
.pixel:nth-child(664),
.pixel:nth-child(698),
.pixel:nth-child(699),
.pixel:nth-child(700),
.pixel:nth-child(701),
.pixel:nth-child(702),
.pixel:nth-child(703),
.pixel:nth-child(704),
.pixel:nth-child(705),
.pixel:nth-child(737),
.pixel:nth-child(738),
.pixel:nth-child(739),
.pixel:nth-child(740),
.pixel:nth-child(741),
.pixel:nth-child(742),
.pixel:nth-child(743),
.pixel:nth-child(744),
.pixel:nth-child(745),
.pixel:nth-child(746),
.pixel:nth-child(777),
.pixel:nth-child(778),
.pixel:nth-child(779),
.pixel:nth-child(780),
.pixel:nth-child(781),
.pixel:nth-child(782),
.pixel:nth-child(783),
.pixel:nth-child(784),
.pixel:nth-child(785),
.pixel:nth-child(786),
.pixel:nth-child(787),
.pixel:nth-child(788),
.pixel:nth-child(818),
.pixel:nth-child(819),
.pixel:nth-child(820),
.pixel:nth-child(821),
.pixel:nth-child(822),
.pixel:nth-child(823),
.pixel:nth-child(824),
.pixel:nth-child(825),
.pixel:nth-child(826),
.pixel:nth-child(827),
.pixel:nth-child(828),
.pixel:nth-child(829),
.pixel:nth-child(830),
.pixel:nth-child(859),
.pixel:nth-child(860),
.pixel:nth-child(861),
.pixel:nth-child(862),
.pixel:nth-child(863),
.pixel:nth-child(864),
.pixel:nth-child(865),
.pixel:nth-child(866),
.pixel:nth-child(867),
.pixel:nth-child(868),
.pixel:nth-child(869),
.pixel:nth-child(901),
.pixel:nth-child(902),
.pixel:nth-child(903),
.pixel:nth-child(904),
.pixel:nth-child(905),
.pixel:nth-child(906),
.pixel:nth-child(907),
.pixel:nth-child(978),
.pixel:nth-child(979),
.pixel:nth-child(983),
.pixel:nth-child(984),
.pixel:nth-child(1018),
.pixel:nth-child(1019),
.pixel:nth-child(1020),
.pixel:nth-child(1022),
.pixel:nth-child(1023),
.pixel:nth-child(1024),
.pixel:nth-child(1057),
.pixel:nth-child(1058),
.pixel:nth-child(1064),
.pixel:nth-child(1065),
.pixel:nth-child(1097),
.pixel:nth-child(1098),
.pixel:nth-child(1100),
.pixel:nth-child(1102),
.pixel:nth-child(1104),
.pixel:nth-child(1105),
.pixel:nth-child(1137),
.pixel:nth-child(1138),
.pixel:nth-child(1139),
.pixel:nth-child(1140),
.pixel:nth-child(1141),
.pixel:nth-child(1142),
.pixel:nth-child(1143),
.pixel:nth-child(1144),
.pixel:nth-child(1145),
.pixel:nth-child(1177),
.pixel:nth-child(1178),
.pixel:nth-child(1179),
.pixel:nth-child(1180),
.pixel:nth-child(1181),
.pixel:nth-child(1182),
.pixel:nth-child(1183),
.pixel:nth-child(1184),
.pixel:nth-child(1185),
.pixel:nth-child(1220),
.pixel:nth-child(1221),
.pixel:nth-child(1222),
.pixel:nth-child(1070),
.pixel:nth-child(1108),
.pixel:nth-child(1109),
.pixel:nth-child(1110),
.pixel:nth-child(1111),
.pixel:nth-child(1148),
.pixel:nth-child(1149),
.pixel:nth-child(1150),
.pixel:nth-child(1151),
.pixel:nth-child(1188),
.pixel:nth-child(1189),
.pixel:nth-child(1190),
.pixel:nth-child(1228),
.pixel:nth-child(1229),
.pixel:nth-child(1386),
.pixel:nth-child(1387),
.pixel:nth-child(1426),
.pixel:nth-child(1427),
.pixel:nth-child(1466),
.pixel:nth-child(1467),
.pixel:nth-child(1468),
.pixel:nth-child(1507),
.pixel:nth-child(1508),
.pixel:nth-child(1547),
.pixel:nth-child(1548),
.pixel:nth-child(1549),
.pixel:nth-child(1589),
.pixel:nth-child(1590),
.pixel:nth-child(1070),
.pixel:nth-child(1052),
.pixel:nth-child(1092),
.pixel:nth-child(1093),
.pixel:nth-child(1094),
.pixel:nth-child(1133),
.pixel:nth-child(1134),
.pixel:nth-child(1375),
.pixel:nth-child(1376),
.pixel:nth-child(1415),
.pixel:nth-child(1416),
.pixel:nth-child(1454),
.pixel:nth-child(1455),
.pixel:nth-child(1456),
.pixel:nth-child(1494),
.pixel:nth-child(1495),
.pixel:nth-child(1533),
.pixel:nth-child(1534),
.pixel:nth-child(1535),
.pixel:nth-child(1572),
.pixel:nth-child(1573),
.pixel:nth-child(1574),
{
  background-color: $red;
}

// Shadow: red - $red100
.pixel:nth-child(57),
.pixel:nth-child(94),
.pixel:nth-child(95),
.pixel:nth-child(96),
.pixel:nth-child(132),
.pixel:nth-child(133),
.pixel:nth-child(134),
.pixel:nth-child(135),
.pixel:nth-child(1417),
.pixel:nth-child(1457),
.pixel:nth-child(1496),
.pixel:nth-child(1497),
.pixel:nth-child(1536),
.pixel:nth-child(1575),
.pixel:nth-child(1576),
.pixel:nth-child(1425),
.pixel:nth-child(1465),
.pixel:nth-child(1505),
.pixel:nth-child(1506),
.pixel:nth-child(1546),
.pixel:nth-child(1586),
.pixel:nth-child(1587),
.pixel:nth-child(1588),
.pixel:nth-child(736),
.pixel:nth-child(775),
.pixel:nth-child(776),
.pixel:nth-child(813),
.pixel:nth-child(814),
.pixel:nth-child(815),
.pixel:nth-child(816),
.pixel:nth-child(817),
.pixel:nth-child(854),
.pixel:nth-child(855),
.pixel:nth-child(856),
.pixel:nth-child(857),
.pixel:nth-child(858),
.pixel:nth-child(895),
.pixel:nth-child(896),
.pixel:nth-child(897),
.pixel:nth-child(898),
.pixel:nth-child(899),
.pixel:nth-child(900),
.pixel:nth-child(938),
.pixel:nth-child(939),
.pixel:nth-child(940),
.pixel:nth-child(941),
.pixel:nth-child(942),
.pixel:nth-child(943),
.pixel:nth-child(944),
.pixel:nth-child(1091),
.pixel:nth-child(1131),
.pixel:nth-child(1172),
.pixel:nth-child(1173),
.pixel:nth-child(1174),
.pixel:nth-child(1213),
.pixel:nth-child(1214),
.pixel:nth-child(1132) {
  background-color: $red100;
}

// $blue
.pixel:nth-child(933),
.pixel:nth-child(945),
.pixel:nth-child(946),
.pixel:nth-child(947),
.pixel:nth-child(948),
.pixel:nth-child(949),
.pixel:nth-child(985),
.pixel:nth-child(986),
.pixel:nth-child(987),
.pixel:nth-child(988),
.pixel:nth-child(989),
.pixel:nth-child(990),
.pixel:nth-child(991),
.pixel:nth-child(1025),
.pixel:nth-child(1026),
.pixel:nth-child(1027),
.pixel:nth-child(1028),
.pixel:nth-child(1029),
.pixel:nth-child(1030),
.pixel:nth-child(1031),
.pixel:nth-child(1032),
.pixel:nth-child(1066),
.pixel:nth-child(1067),
.pixel:nth-child(1255),
.pixel:nth-child(1256),
.pixel:nth-child(1257),
.pixel:nth-child(1258),
.pixel:nth-child(1259),
.pixel:nth-child(1260),
.pixel:nth-child(1261),
.pixel:nth-child(1262),
.pixel:nth-child(1263),
.pixel:nth-child(1264),
.pixel:nth-child(1265),
.pixel:nth-child(1266),
.pixel:nth-child(1267),
.pixel:nth-child(1295),
.pixel:nth-child(1296),
.pixel:nth-child(1297),
.pixel:nth-child(1298),
.pixel:nth-child(1299),
.pixel:nth-child(1300),
.pixel:nth-child(1301),
.pixel:nth-child(1302),
.pixel:nth-child(1303),
.pixel:nth-child(1304),
.pixel:nth-child(1305),
.pixel:nth-child(1306),
.pixel:nth-child(1307),
.pixel:nth-child(1335),
.pixel:nth-child(1336),
.pixel:nth-child(1337),
.pixel:nth-child(1338),
.pixel:nth-child(1339),
.pixel:nth-child(1340),
.pixel:nth-child(1341),
.pixel:nth-child(1342),
.pixel:nth-child(1343),
.pixel:nth-child(1344),
.pixel:nth-child(1345),
.pixel:nth-child(1346),
.pixel:nth-child(1347),
.pixel:nth-child(1377),
.pixel:nth-child(1378),
.pixel:nth-child(1379),
.pixel:nth-child(1380),
.pixel:nth-child(1381),
.pixel:nth-child(1382),
.pixel:nth-child(1383),
.pixel:nth-child(1384),
.pixel:nth-child(1385),
.pixel:nth-child(1418),
.pixel:nth-child(1424),
.pixel:nth-child(1066),
.pixel:nth-child(1067),
.pixel:nth-child(1106),
.pixel:nth-child(1107),
.pixel:nth-child(1146),
.pixel:nth-child(1147),
.pixel:nth-child(1186),
.pixel:nth-child(1187),
.pixel:nth-child(1223),
.pixel:nth-child(1224),
.pixel:nth-child(1225),
.pixel:nth-child(1226),
.pixel:nth-child(1227),
.pixel:nth-child(1186),
.pixel:nth-child(1187), 
.pixel:nth-child(1071), 
.pixel:nth-child(1072),
.pixel:nth-child(934),
.pixel:nth-child(935),
.pixel:nth-child(936),
.pixel:nth-child(937),
.pixel:nth-child(972),
.pixel:nth-child(973),
.pixel:nth-child(974),
.pixel:nth-child(975),
.pixel:nth-child(976),
.pixel:nth-child(977),
.pixel:nth-child(1010),
.pixel:nth-child(1011),
.pixel:nth-child(1012),
.pixel:nth-child(1013),
.pixel:nth-child(1014),
.pixel:nth-child(1015),
.pixel:nth-child(1016),
.pixel:nth-child(1017),
.pixel:nth-child(1050),
.pixel:nth-child(1051),
.pixel:nth-child(1055),
.pixel:nth-child(1056),
.pixel:nth-child(1095),
.pixel:nth-child(1096),
.pixel:nth-child(1135),
.pixel:nth-child(1136),
.pixel:nth-child(1175),
.pixel:nth-child(1176),
.pixel:nth-child(1215),
.pixel:nth-child(1216),
.pixel:nth-child(1217),
.pixel:nth-child(1218),
.pixel:nth-child(1219) {
  background-color: $blue;
}
              
            
!

JS

              
                
              
            
!
999px

Console