- 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__wrapper
.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:root
--size 40
--bg hsl(0, 0%, 98%)
--hue 215
--rotation-y 75
--rotation-x -14
--remove 0
--initial-delay 1
--wave-speed 2
--fade-speed 0.5
--filter-speed 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
.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
overflow hidden
.scene__wrapper
position fixed
height 100vh
width 100vw
top 0
left 0
display grid
place-items center
&:after
&:before
content ''
position absolute
height 100vh
width 100vw
background 'hsl(%s, 100%, %s)' % (var(--hue) calc(var(--lightness, 50) * 1%))
transform translate3d(100%, 0, 200vmin)
animation-name wave
animation-duration calc(var(--wave-speed) * 1s)
animation-delay calc(var(--initial-delay) * 1s)
animation-timing-function ease-in
&:before
--lightness 85
animation-timing-function ease-out
.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 50
--offset-y 10
--offset-z -2
&--two
--height 14.75
--width 14.75
--x 16
--y 80.75
--offset-x -35
--offset-y -20
--offset-z 4
&--three
--height 12.5
--width 12.5
--x 3.5
--y 68.25
--offset-x 100
--offset-y 30
--offset-z -6
.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
.cylinder__segment
.cuboid__side
.logo__cap
animation-name fade-in, filter-in
animation-duration calc(var(--fade-speed) * 1s), calc(var(--filter-speed) * 1s)
animation-delay calc(((var(--initial-delay) + var(--wave-speed)) * var(--fade-coefficient, 0.75)) * 1s), calc(((var(--initial-delay) + var(--wave-speed)) * var(--filter-coefficient, 1.25)) * 1s)
animation-fill-mode both
@keyframes filter-in
from
filter brightness(1)
@keyframes fade-in
from
opacity 0
@keyframes wave
from
transform translate3d(-100%, 0, 200vmin)
.dg.ac
z-index 9999 !importantimport { GUI } from 'https://cdn.skypack.dev/dat.gui'
const CONFIG = {
'initial-delay': 1,
'wave-speed': 2,
'fade-speed': 0.5,
'filter-speed': 1,
'fade-coefficient': 0.75,
'filter-coefficient': 1.25,
}
const SCENE = document.querySelector('.scene__wrapper')
const UPDATE = () => {
const CURRENT = SCENE
SCENE.remove()
Object.keys(CONFIG).forEach(key => document.documentElement.style.setProperty(`--${key}`, CONFIG[key]))
requestAnimationFrame(() => document.body.appendChild(CURRENT))
}
const CTRL = new GUI()
CTRL.add(CONFIG, 'initial-delay', 0, 5, 0.1).name('Initial Delay (s)').onFinishChange(UPDATE)
CTRL.add(CONFIG, 'filter-speed', 0, 5, 0.1).name('Filter Speed (s)').onFinishChange(UPDATE)
CTRL.add(CONFIG, 'wave-speed', 0, 5, 0.1).name('Wave Speed (s)').onFinishChange(UPDATE)
CTRL.add(CONFIG, 'fade-speed', 0, 5, 0.1).name('Fade Speed (s)').onFinishChange(UPDATE)
CTRL.add(CONFIG, 'fade-coefficient', 0, 5, 0.01).name('Fade Coefficient').onFinishChange(UPDATE)
CTRL.add(CONFIG, 'filter-coefficient', 0, 5, 0.01).name('Filter Coefficient').onFinishChange(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)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.