- const SIZE = 40
.scene
  svg(role='img' viewbox='0 0 24 24' xmlns='http://www.w3.org/2000/svg')
    title DigitalOcean
    path(d='M12.04 0C5.408-.02.005 5.37.005 11.992h4.638c0-4.923 4.882-8.731 10.064-6.855a6.95 6.95 0 014.147 4.148c1.889 5.177-1.924 10.055-6.84 10.064v-4.61H7.391v4.623h4.61V24c7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zM7.39 19.362H3.828v3.564H7.39zm-3.563 0v-2.978H.85v2.978z')
  .logo(style=`--size: ${SIZE}`)
    .logo__arc.logo__arc--inner
    .logo__arc.logo__arc--outer
    .logo__square.logo__square--one
    .logo__square.logo__square--two
    .logo__square.logo__square--three

:root
  --size 40
  --bg hsl(0, 0%, 98%)
  --hue 215
  --rotation-y -75deg
  --rotation-x -14deg
  --flip-step 5vmin
  --flipped 1


svg
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
  height calc(var(--size) * 1vmin)
  aspect-ratio 1 / 1
  opacity 0.5

*
*: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
  
.sr-only
  position absolute
  width 1px
  height 1px
  padding 0
  margin -1px
  overflow hidden
  clip rect(0, 0, 0, 0)
  white-space nowrap
  border-width 0

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

.logo
  background hsla(210, 80%, 50%, 0.25)
  height calc(var(--size) * 1vmin)
  width calc(var(--size) * 1vmin)
  position absolute
  top 50% 
  left 50%
  transform translate3d(-50%, -50%, calc(var(--flipped, 0) * (1 * var(--flip-step))))
  
  &__arc
    border-radius 50%
    position absolute
    height calc(var(--diameter) * 1%)
    width calc(var(--diameter) * 1%)
    transform translate(-50%, -50%)
    top 50%
    left 50%
    opacity 0.5
    background 'hsl(%s, 80%, 50%)' % var(--hue, 200)
    transition opacity 0.2s, background 0.2s
    
    &:hover
      opacity 0.75
    
    &--inner
      --diameter 61
      z-index 2
      transform translate3d(-50%, -50%, calc(var(--flipped, 0) * (2 * var(--flip-step))))
      &:hover
        --hue 10
      
    &--outer
      --diameter 100
      transform translate3d(-50%, -50%, calc(var(--flipped, 0) * (1 * var(--flip-step))))
      
      &:hover
        --hue 10
  
  &__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%)
    transform translate3d(0%, 0%, calc(var(--flipped, 0) * (var(--square-index, 1) * var(--flip-step))))
    background 'hsl(%s, 80%, 50%)' % var(--hue, 200)
    z-index 3
    opacity 0.5
    
    &:hover
      --hue 10 
      opacity 1     

    &--one
      --square-index 3
      --height 19.25
      --width 19.25
      --x 31
      --y 61.5
    
    &--two
      --height 14.75
      --width 14.75
      --x 16
      --y 80.75
      --square-index 4
    
    &--three
      --height 12.5
      --width 12.5
      --x 3.5
      --y 68.25
      --square-index 5
      

.scene
.scene *
  transition transform 0.2s
      
#flipper:checked ~ .scene
  --flipped 1

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

const CONFIG = {
	flipped: true,
}

const CTRL = new GUI()
CTRL.add(CONFIG, 'flipped')
	.name('Explode?')
	.onChange(flipped =>
		document.documentElement.style.setProperty('--flipped', flipped ? 1 : 0)
	)