brk/website/cube/style.css

.cube {
  --size: 1rem;
  --iso-scale: calc(sqrt(3) / 2);
  --empty-alpha: 0.4;
  --step: 0.033;
  --width: calc(var(--size) * 2 * var(--iso-scale));
  --height: calc(var(--size) * 2);
  --face-base: currentColor;
  --face-top: var(--face-base);
  --face-right: oklch(from var(--face-base) calc(l - var(--step) * 2) c h);
  --face-left: oklch(from var(--face-base) calc(l - var(--step)) c h);
  --face-bottom: oklch(from var(--face-base) calc(l - var(--step) * 3) c h);
  --is-empty: round(down, calc(1 - var(--fill)), 1);

  display: inline-block;
  position: relative;
  flex-shrink: 0;
  width: var(--width);
  height: var(--height);
  overflow: visible;

  .face {
    position: absolute;
    transform-origin: 0 0;
    width: var(--size);
    height: var(--size);
    transform: translateY(50%) var(--orient)
      translate(calc(var(--size) * var(--x)), calc(var(--size) * var(--y)))
      scale(var(--scale-x, 1), var(--scale-y));
  }

  .liquid {
    background: var(--face-color);
    opacity: calc(1 - var(--is-empty));
    --scale-y: calc(var(--iso-scale) * var(--fill));
    --stack-shift: calc(var(--iso-scale) * (1 - var(--fill)));
  }

  .glass {
    background: oklch(from var(--face-color) l c h / var(--empty-alpha));
    --scale-y: calc(var(--iso-scale) * (1 - var(--fill)));
    --stack-shift: 0;
  }

  .front {
    &.top,
    &.bottom {
      --orient: rotate(30deg) skewX(-30deg);
      --scale-y: var(--iso-scale);
    }

    &.right {
      --orient: rotate(-30deg) skewX(-30deg);
      --face-color: var(--face-right);
      --x: 1;
      --y: calc(var(--stack-shift) + var(--iso-scale));
    }

    &.left {
      --orient: rotate(30deg) skewX(30deg);
      --face-color: var(--face-left);
      --x: 0;
      --y: var(--stack-shift);
    }

    &.top {
      --face-color: var(--face-top);
      --x: 0;
      --y: calc(var(--stack-shift) - var(--iso-scale));
    }

    &.bottom {
      --face-color: var(--face-bottom);
      --x: 1;
      --y: 0;
    }
  }

  .rear {
    &.right {
      --orient: rotate(30deg) skewX(30deg);
      --face-color: var(--face-left);
      --x: 1;
      --y: calc(var(--stack-shift) - var(--iso-scale));
    }

    &.left {
      --orient: rotate(-30deg) skewX(-30deg);
      --face-color: var(--face-top);
      --x: 1;
      --y: var(--stack-shift);
      --scale-x: -1;
    }
  }

  .liquid {
    &.front.top {
      --x: calc(1 - var(--fill));
    }
  }
}

@keyframes cube-fill {
  from {
    --fill: 0.01;
  }
  to {
    --fill: 1;
  }
}

@property --fill {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}