- const SIZE = 40
mixin cylinder(radius = 10, sides = 10, cut = [5, 10], top = true, bottom = true)
  - const innerAngle = (((sides - 2) * 180) / sides) * 0.5
  - const cosAngle = Math.cos(innerAngle * (Math.PI / 180))
  - const side =  2 * radius * Math.cos(innerAngle * (Math.PI / 180))
  //- Use the cut to determine how many sides get rendered and from what point
  .cylinder(style=`--side: ${side}; --sides: ${sides}; --radius: ${radius};` class!=attributes.class)
    if top
      .cylinder__end.cylinder__segment.cylinder__end--top
    if bottom
      .cylinder__end.cylinder__segment.cylinder__end--bottom
    - const [start, end] = cut
    - let i = start
    while i < end
      .cylinder__side.cylinder__segment(style=`--index: ${i};`)
      - i++

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--inner
      +cylinder((SIZE * 0.61) * 0.5, 80, [0, 60], false, false).cylinder-arc.cylinder-arc--inner
    .logo__arc.logo__arc--outer
      +cylinder((SIZE * 1) * 0.5, 100, [0, 75], true, true).cylinder-arc.cylinder-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
    .logo__cap.logo__cap--top
    .logo__cap.logo__cap--bottom
View Compiled
:root
  --size 40
  --bg hsl(0, 0%, 98%)
  --hue 215
  --rotation-y 75
  --rotation-x -14
  --remove 0

.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

.cylinder
  --bg 'hsl(%s, 100%, 50%)' % var(--hue)
  height 100%
  width 100%
  position relative

  &__segment
    filter brightness(var(--b, 1))
    background var(--bg, hsl(0, 80%, 50%))
    position absolute
    top 50%
    left 50%

  // Top
  &__end
    --b 1.2
    --end-coefficient 0.5
    height 100%
    width 100%
    border-radius 50%
    opacity calc(1 - var(--remove))
    transform translate3d(-50%, -50%, calc((var(--depth, 0) * var(--end-coefficient)) * 1vmin))
    transition opacity 0.2s

  &__end--bottom
    --b 0.8
    --end-coefficient -0.5

  &__side
    --b 0.89
    height calc(var(--depth, 30) * 1vmin)
    width calc(var(--side) * 1vmin)
    transform translate(-50%, -50%) rotateX(90deg) rotateY(calc((var(--index, 0) * 360 / var(--sides)) * 1deg)) translate3d(50%, 0, calc((var(--radius) * (var(--cylinder-projection, 100) / 100)) * 1vmin))

*
*: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(calc((var(--coefficient-y, 0) * var(--rotation-x, 0)) * 1deg)) rotateY(calc((var(--coefficient-x, 0) * var(--rotation-y, 0)) * 1deg))

.logo
  height calc(var(--size) * 1vmin)
  width calc(var(--size) * 1vmin)
  position absolute
  top 50% 
  left 50%
  transform translate(-50%, -50%)
  
  &__cap
    position absolute
    height calc(var(--size) * 0.1925vmin)
    width calc(var(--size) * 0.1975vmin)
    background 'hsl(%s, 100%, 50%)' % var(--hue)

    &--top
      filter brightness(0.5)
      height calc((var(--size) * 0.1925vmin) * var(--cylinder-depth, 1))
      top 50%
      transform translate(0, -50%) rotateX(90deg)
    
    &--bottom
      bottom 0
      right 50%
      transform translate(50%, 0) rotateY(90deg)
      width calc((var(--size) * 0.1925vmin) * var(--cylinder-depth, 1))
  
  &__arc
    border-radius 50%
    position absolute
    height calc(var(--diameter) * 1%)
    width calc(var(--diameter) * 1%)
    transform translate(-50%, -50%)
    top 50%
    left 50%
    
    &--inner
      --diameter 61
      
    &--outer
      --diameter 100
  
  &__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(calc(min(0, %s * %s) * 1%), calc((%s * %s) * 1%), calc((%s * %s) * 1vmin))' % (var(--coefficient-x, 0) var(--offset-x, 0) var(--coefficient-y) var(--offset-y, 0) var(--coefficient-x) var(--offset-z, 0))

    &--one
      --height 19.25
      --width 19.25
      --x 31
      --y 61.5
      --offset-x var(--offset-x-one, 0)
      --offset-y var(--offset-y-one, 0)
      --offset-z var(--offset-z-one, 0)
    
    &--two
      --height 14.75
      --width 14.75
      --x 16
      --y 80.75
      --offset-x var(--offset-x-two, 0)
      --offset-y var(--offset-y-two, 0)
      --offset-z var(--offset-z-two, 0)
    
    &--three
      --height 12.5
      --width 12.5
      --x 3.5
      --y 68.25
      --offset-x var(--offset-x-three, 0)
      --offset-y var(--offset-y-three, 0)
      --offset-z var(--offset-z-three, 0)
      
.square-cuboid
  .cuboid__side
    background 'hsl(%s, 100%, 50%)' % var(--hue)
  &--one
    --depth calc(var(--size) * 0.1925)
  &--two
    --depth calc(var(--size) * 0.1475)
  &--three
    --depth calc(var(--size) * 0.125)
    
.cylinder-arc
  --depth calc((var(--size) * 0.1925) * var(--cylinder-depth, 1))
  transform translate(-50%, -50%) rotate(-90deg)
  position absolute
  top 50%
  left 50%
  
  &--outer
    .cylinder__end--top
    .cylinder__end--bottom
      --b 0.8
      background-color transparent
      border-width calc(var(--size) * 0.1975vmin)
      border-style solid
      border-color 'hsl(%s, 100%, 50%)' % var(--hue)
      --clip polygon(50% 0, 50% 50%, 0 50%, 0 100%, 100% 100%, 100% 0)
      -webkit-clip-path var(--clip)
      clip-path var(--clip)
      
    .cylinder__end--bottom
      --b 1.2
View Compiled
import { GUI } from 'https://cdn.skypack.dev/dat.gui'

const CONFIG = {
	'rotation-x': -14,
	'rotation-y': 75,
	'offset-x-one': 50,
	'offset-y-one': 10,
	'offset-z-one': -2,
	'offset-x-two': -35,
	'offset-y-two': -20,
	'offset-z-two': 4,
	'offset-x-three': 100,
	'offset-y-three': 30,
	'offset-z-three': -6,
}

const UPDATE = () => Object.keys(CONFIG).forEach(key => document.documentElement.style.setProperty(`--${key}`, CONFIG[key]))


const CTRL = new GUI()
const SCENE = CTRL.addFolder('Scene Rotation (deg)')
const CUBES = CTRL.addFolder('Cube Translation (%)')

SCENE.add(CONFIG, 'rotation-x', -180, 180, 1).name('X').onChange(UPDATE)
SCENE.add(CONFIG, 'rotation-y', -180, 180, 1).name('Y').onChange(UPDATE)

const ONE = CUBES.addFolder('Cube One')
const TWO = CUBES.addFolder('Cube Two')
const THREE = CUBES.addFolder('Cube Three')

ONE.add(CONFIG, 'offset-x-one', -300, 300, 1).name('X').onChange(UPDATE)
ONE.add(CONFIG, 'offset-y-one', -300, 300, 1).name('Y').onChange(UPDATE)
ONE.add(CONFIG, 'offset-z-one', -300, 300, 1).name('Z').onChange(UPDATE)

TWO.add(CONFIG, 'offset-x-two', -300, 300, 1).name('X').onChange(UPDATE)
TWO.add(CONFIG, 'offset-y-two', -300, 300, 1).name('Y').onChange(UPDATE)
TWO.add(CONFIG, 'offset-z-two', -300, 300, 1).name('Z').onChange(UPDATE)

THREE.add(CONFIG, 'offset-x-three', -300, 300, 1).name('X').onChange(UPDATE)
THREE.add(CONFIG, 'offset-y-three', -300, 300, 1).name('Y').onChange(UPDATE)
THREE.add(CONFIG, 'offset-z-three', -300, 300, 1).name('Z').onChange(UPDATE)


const mapRange = (inputLower, inputUpper, outputLower, outputUpper) => {
  const INPUT_RANGE = inputUpper - inputLower
  const OUTPUT_RANGE = outputUpper - outputLower
  return value => outputLower + (((value - inputLower) / INPUT_RANGE) * OUTPUT_RANGE || 0)
}

const BOUNDS = 1     
const updateParallax = ({ x, y }) => {
  const POS_X = mapRange(0, window.innerWidth, -BOUNDS, BOUNDS)(x)
  const POS_Y = mapRange(0, window.innerHeight, -BOUNDS, BOUNDS)(y)
  document.body.style.setProperty('--coefficient-x', POS_X)
  document.body.style.setProperty('--coefficient-y', POS_Y)
}

document.addEventListener('pointermove', updateParallax)

UPDATE()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.