- 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--outer
.logo__square.logo__square--one
.logo__square.logo__square--two
.logo__square.logo__square--three
View Compiled
:root
--size 40
--bg hsl(0, 0%, 98%)
--hue 215
--rotation-y -75deg
--rotation-x -14deg
--flip-step 5vmin
svg
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
height calc(var(--size) * 1vmin)
aspect-ratio 1 / 1
opacity 1
*
*: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
background none
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
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 translate3d(-50%, -50%, calc(var(--flipped, 0) * (1 * var(--flip-step))))
transition opacity 0.2s, clip-path 0.2s
-webkit-clip-path polygon(0 calc((100 - ((1 - var(--reveal, 0)) * 100)) * 1%), 0 100%, 100% 100%, 100% 0)
clip-path polygon(0 calc((100 - ((1 - var(--reveal, 0)) * 100)) * 1%), 0 100%, 100% 100%, 100% 0)
&__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 translate3d(-50%, -50%, calc(var(--flipped, 0) * (1 * var(--flip-step))))
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%)
background 'hsl(%s, 100%, 50%)' % var(--hue)
&--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
View Compiled
import { GUI } from 'https://cdn.skypack.dev/dat.gui'
const CONFIG = {
reveal: false,
}
const CTRL = new GUI()
CTRL.add(CONFIG, 'reveal')
.name('Reveal?')
.onChange(reveal =>
document.documentElement.style.setProperty('--reveal', reveal ? 1 : 0)
)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.