<div id="my-isometric-text">#CPC</div>

$color-red: #F44336;
$color-blue: #1E88E5;
$color-yellow: #FDD835;

$text-dark-edge-color: rgba(black, 0.5);
$text-light-edge-color: rgba(white, 0.9);

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: Bungee;
  margin: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#fa9028, $color-red 80%);
}

.iso-text {
  font-size: 50vmin;
  font-weight: 700;
  letter-spacing: 5vmin;
  position: relative;
  width: 100%;
  height: 100%;
  white-space: pre;
  
  div {
    transform: rotateX(60deg) rotateZ(-45deg) translateX(-50%) translateY(-50%) translateZ(calc(var(--depth) * 0.4vmin));
    transform-origin: 0 0;
    position: absolute; 
    top: 50%; 
    left: 50%;
    z-index: var(--depth);
    text-shadow: 
      0 -2px 0 $text-dark-edge-color, 
      2px 0 0 $text-dark-edge-color, 
      0 2px 0 rgba($text-dark-edge-color, 0.3);
    
    &:first-child {
      text-shadow: 
        0 -2px 0 $text-dark-edge-color, 
        2px 0 0 $text-dark-edge-color;
    }
    
    &:nth-child(2) {
      color: black;
    }
    
    &:last-child {
      color: $text-dark-edge-color;
      text-shadow: 
        0 2px 0 $text-dark-edge-color, 
        0 -2px 0 $text-dark-edge-color, 
        2px 0 0 $text-dark-edge-color, 
        -2px 0 0 $text-dark-edge-color,
        -10px 10px 5px rgba($text-dark-edge-color, 0.2),
        -10px 10px 55px rgba($text-dark-edge-color, 0.3);
    }
  }
}

// Play with these options to create different designs!
const defaults = {
  depth: 30,
  gap: 1,
  layersPerColor: 7,
  faceColor: '#FDD835',
  sideColors: ['#1E88E5', '#F44336', '#FDD835']
}

const getColor = (i, {depth, sideColors, layersPerColor, faceColor}) => {
  if (i === 0) {
    return faceColor;
  }
  if (i > 1 && i < depth - 1) {
    return sideColors[Math.floor((i - 2) / layersPerColor) % sideColors.length];
  }
};

const isometricText = (target, options = {}) => {
  
  options = {...defaults, options};
  
  const text = target.innerText;
  target.innerText = '';
  target.classList.add('iso-text');
  
  for (let i = 0, color = 0; i < options.depth; i++, color++) {
    const div = document.createElement('div');
    div.innerText = text;
    div.style.setProperty("--depth", options.depth - i * options.gap);
    div.style.setProperty("color", getColor(i, options));
    target.appendChild(div);
  }
};

isometricText(document.getElementById('my-isometric-text'));