- const SIZE = 40

mixin cuboid()
  .cuboid(class!=attributes.class)
    if block
      block
    - let s = 0
    while s < 6
      .cuboid__side
      - s++

.scene
  .logo(style=`--size: ${SIZE}`)
    .logo__arc.logo__arc--outer
    .logo__square.logo__square--one
      +cuboid().square-cuboid.square-cuboid--one
    .logo__square.logo__square--two
      +cuboid().square-cuboid.square-cuboid--two
    .logo__square.logo__square--three
      +cuboid().square-cuboid.square-cuboid--three

:root
  --size 40
  --bg hsl(0, 0%, 98%)
  --hue 215
  --rotation-y -75deg
  --rotation-x -14deg
  --depth-multiplier 1

.cuboid
  width 100%
  height 100%
  position relative
  // 1 is the top and go t, r, back, l, f, b

  &__side
    filter brightness(var(--b, 1))
    position absolute

  &__side:nth-of-type(1)
    --b 1.1
    height calc(var(--depth, 20) * 1vmin)
    width 100%
    top 0
    transform translate(0, -50%) rotateX(90deg)

  &__side:nth-of-type(2)
    --b 0.9
    height 100%
    width calc(var(--depth, 20) * 1vmin)
    top 50%
    right 0
    transform translate(50%, -50%) rotateY(90deg)

  &__side:nth-of-type(3)
    --b 0.5
    width 100%
    height calc(var(--depth, 20) * 1vmin)
    bottom 0
    transform translate(0%, 50%) rotateX(90deg)

  &__side:nth-of-type(4)
    --b 1
    height 100%
    width calc(var(--depth, 20) * 1vmin)
    left 0
    top 50%
    transform translate(-50%, -50%) rotateY(90deg)

  &__side:nth-of-type(5)
    --b 0.8
    height 100%
    width 100%
    transform translate3d(0, 0, calc(var(--depth, 20) * 0.5vmin))
    top 0
    left 0

  &__side:nth-of-type(6)
    --b 1.2
    height 100%
    width 100%
    transform translate3d(0, 0, calc(var(--depth, 20) * -0.5vmin)) rotateY(180deg)
    top 0
    left 0

*
*:after
*:before
  box-sizing border-box
  transform-style preserve-3d
  touch-action none

body
  background var(--bg)
  min-height 100vh
  display grid
  place-items center

.scene
  position relative
  transform translate3d(0, 0, 100vmin) rotateX(-16deg) rotateY(28deg) rotateX(90deg)

.logo
  height calc(var(--size) * 1vmin)
  width calc(var(--size) * 1vmin)
  position absolute
  top 50% 
  left 50%
  opacity calc(1 - (var(--reveal, 0) * 0.5))
  transform translate(-50%, -50%)
  
  &__arc
    border-radius 50%
    position absolute
    height calc(var(--diameter) * 1%)
    width calc(var(--diameter) * 1%)
    transform translate(-50%, -50%)
    top 50%
    left 50%
      
    &--outer
      --diameter 100
      transform translate(-50%, -50%)
      border calc(var(--size) * 0.1925vmin) solid hsl(215, 100%, 50%)
      -webkit-mask conic-gradient(transparent 0deg 90deg, black 90deg)
      mask conic-gradient(transparent 0deg 90deg, black 90deg)
      transform translate(-50%, -50%) rotate(180deg)
  
  &__square
    position absolute
    height calc(var(--height, 0) * 1%)
    width calc(var(--width, 0) * 1%)
    left calc(var(--x, 0) * 1%)
    top calc(var(--y, 0) * 1%)

    &--one
      --height 19.25
      --width 19.25
      --x 31
      --y 61.5
    
    &--two
      --height 14.75
      --width 14.75
      --x 16
      --y 80.75
    
    &--three
      --height 12.5
      --width 12.5
      --x 3.5
      --y 68.25
      
.square-cuboid
  .cuboid__side
    background 'hsl(%s, 100%, 50%)' % var(--hue)
  &--one
    --depth calc((var(--size) * 0.1925) * var(--depth-multiplier))
  &--two
    --depth calc((var(--size) * 0.1475) * var(--depth-multiplier))
  &--three
    --depth calc((var(--size) * 0.125) * var(--depth-multiplier))

import { GUI } from 'https://cdn.skypack.dev/dat.gui'

const CONFIG = {
	depth: 1,
}

const CTRL = new GUI()
CTRL.add(CONFIG, 'depth', 0, 5, 0.1)
	.name('Depth Multiplier')
	.onChange(depth =>
		document.documentElement.style.setProperty('--depth-multiplier', depth)
	)