<div class="canvas">
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
</div>
:root {
  --green: #CCC;
  --yellow: #CCC;
  --orange: #CCC;
  --red:  #CCC;
  --purple: #CCC;
  --cyan:  #CCC;
  
}

body {
  background: #333;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  width: 160px;
  height: 190px;
}

.pixel {
  width: 10px;
  height: 10px;
  float: left;
  animation: colorize ;
}

.pixel:nth-child(10),
.pixel:nth-child(11),
.pixel:nth-child(12),
.pixel:nth-child(25),
.pixel:nth-child(26),
.pixel:nth-child(38),
.pixel:nth-child(39),
.pixel:nth-child(40),
.pixel:nth-child(41),
.pixel:nth-child(42),
.pixel:nth-child(43),
.pixel:nth-child(44),
.pixel:nth-child(52),
.pixel:nth-child(53),
.pixel:nth-child(54),
.pixel:nth-child(55),
.pixel:nth-child(56),
.pixel:nth-child(57),
.pixel:nth-child(58),
.pixel:nth-child(59),
.pixel:nth-child(60),
.pixel:nth-child(61),
.pixel:nth-child(62){
  background-color: var(--green);
}
.pixel:nth-child(67),
.pixel:nth-child(68),
.pixel:nth-child(69),
.pixel:nth-child(70),
.pixel:nth-child(71),
.pixel:nth-child(72),
.pixel:nth-child(73),
.pixel:nth-child(74),
.pixel:nth-child(75),
.pixel:nth-child(76),
.pixel:nth-child(77),
.pixel:nth-child(78),
.pixel:nth-child(79){
  background-color: var(--yellow);
}

.pixel:nth-child(82),
.pixel:nth-child(83),
.pixel:nth-child(84),
.pixel:nth-child(85),
.pixel:nth-child(86),
.pixel:nth-child(87),
.pixel:nth-child(88),
.pixel:nth-child(89),
.pixel:nth-child(90),
.pixel:nth-child(91),
.pixel:nth-child(92),
.pixel:nth-child(93),
.pixel:nth-child(94){
  background-color: var(--yellow);
}

.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){
  background-color: var(--orange);
}
.pixel:nth-child(114),
.pixel:nth-child(115),
.pixel:nth-child(116),
.pixel:nth-child(117),
.pixel:nth-child(118),
.pixel:nth-child(119),
.pixel:nth-child(120),
.pixel:nth-child(121),
.pixel:nth-child(122),
.pixel:nth-child(123),
.pixel:nth-child(124),
.pixel:nth-child(125){
  background-color: var(--orange);
}
.pixel:nth-child(130),
.pixel:nth-child(131),
.pixel:nth-child(132),
.pixel:nth-child(133),
.pixel:nth-child(134),
.pixel:nth-child(135),
.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){
 background-color: var(--red); 
}

.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(152),
.pixel:nth-child(153),
.pixel:nth-child(154),
.pixel:nth-child(155),
.pixel:nth-child(156),
.pixel:nth-child(157),
.pixel:nth-child(158),
.pixel:nth-child(159){
  background-color: var(--red);
}
.pixel:nth-child(162),
.pixel:nth-child(163),
.pixel:nth-child(164),
.pixel:nth-child(165),
.pixel:nth-child(166),
.pixel:nth-child(167),
.pixel:nth-child(168),
.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){
  background-color: var(--purple);
}

.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(188),
.pixel:nth-child(189),
.pixel:nth-child(190),
.pixel:nth-child(191){
  background-color: var(--purple);
}
.pixel:nth-child(196),
.pixel:nth-child(197),
.pixel:nth-child(198),
.pixel:nth-child(199),
.pixel:nth-child(200),
.pixel:nth-child(201),
.pixel:nth-child(202),
.pixel:nth-child(203),
.pixel:nth-child(204),
.pixel:nth-child(205),
.pixel:nth-child(206),
.pixel:nth-child(213),
.pixel:nth-child(214),
.pixel:nth-child(215){
  background-color: var(--cyan);
}

.pixel:nth-child(219),
.pixel:nth-child(220),
.pixel:nth-child(221){
  background-color: var(--cyan);
}
View Compiled
const green = ["#60b745", "#FFFFFF", "#FAFAFA", "#CBCBCB", "#7D7D7D", "#B76E79"];
const yellow = ["#f7bf31", "#FFFFFF", "#FAFAFA", "#CBCBCB", "#7D7D7D", "#B76E79"];
const orange = ["#e85e2c", "#FFFFFF", "#FAFAFA", "#CBCBCB", "#7D7D7D", "#B76E79"];
const red = ["#c6212a", "#FFFFFF", "#FAFAFA", "#CBCBCB", "#7D7D7D", "#B76E79"];
const purple = ["#8f3b91", "#FFFFFF", "#FAFAFA", "#CBCBCB", "#7D7D7D", "#B76E79"];
const cyan = ["#0097d3", "#FFFFFF", "#FAFAFA", "#CBCBCB", "#7D7D7D", "#B76E79"];
const docStyle = document.documentElement.style;

var count = 0;
var colorizeLogo = window.setInterval(changeProperties,500);


function changeProperties(){
  if(count >5){
    count = 0;   
  }
  docStyle.setProperty('--green', green[count]);
  docStyle.setProperty('--yellow', yellow[count]);
  docStyle.setProperty('--orange', orange[count]);
  docStyle.setProperty('--red', red[count]);
  docStyle.setProperty('--purple', purple[count]);
  docStyle.setProperty('--cyan', cyan[count]);
  
  count++;
}

 // a click stops the interval
 document.addEventListener('click', (e) => {
  clearInterval(colorizeLogo);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.