<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="120" height="100" fill="#F5F5F5"/>
<g id="triangles">
<rect width="120" height="100" fill="white"/>
<g id="lights">
<path id="light1" d="M50.25 50.0836C50.9167 50.4685 50.9167 51.4308 50.25 51.8157L13.5 73.0333C12.8333 73.4182 12 72.9371 12 72.1673V29.7321C12 28.9623 12.8333 28.4811 13.5 28.866L50.25 50.0836Z" fill-opacity="0.8"/>
</g>
<g id="darks">
<path id="dark1" d="M50.25 50.0836C50.9167 50.4685 50.9167 51.4308 50.25 51.8157L13.5 73.0333C12.8333 73.4182 12 72.9371 12 72.1673V29.7321C12 28.9623 12.8333 28.4811 13.5 28.866L50.25 50.0836Z" fill-opacity="0.8"/>
<path id="dark2" d="M69.25 50.0836C69.9167 50.4685 69.9167 51.4308 69.25 51.8157L32.5 73.0333C31.8333 73.4182 31 72.9371 31 72.1673V29.7321C31 28.9623 31.8333 28.4811 32.5 28.866L69.25 50.0836Z" fill-opacity="0.8"/>
</g>
</g>
</svg>

:root {
  --dark-color: #27ae60;
  --light-color: #f39c12;
}

#darks{
   /*  Fun -- the group fill targets the child paths   */
  fill: var(--dark-color);
}

#lights {
  fill: var(--light-color);
}


#light1,
#dark1,
#dark2 {
  transition: all 1s ease;
}

#dark1 {
  transform: translateX(-100%);
}

svg:hover #light1 {
  transform: translateX(20%);
}

svg:hover #dark2 {
  transform: translateX(40%);
  opacity: 0;
}

svg:hover #dark1 {
  transform: translateX(0%);
}
const svg = document.getElementById('triangles');
const colors = ['#e74c3c', '#8e44ad', '#2c3e50', '#95a5a6', '#f1c40f'];

svg.onclick = (e) => {
const getRandomColor = () => colors[Math.floor(Math.random() * colors.length)];

document.documentElement.style.cssText = `
--dark-color: ${getRandomColor()};
--light-color: ${getRandomColor()};
`  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.