Skip to content

Instantly share code, notes, and snippets.

@aqandrew

aqandrew/css-korok.markdown

Created May 1, 2020 01:22
Show Gist options
  • Save aqandrew/72a474a5d44e4584e3e3781ae3638135 to your computer and use it in GitHub Desktop.
Save aqandrew/72a474a5d44e4584e3e3781ae3638135 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Korok
Raw
index.pug
.container
.korok
.body
.head
.torso
.horn.left
.horn.right
.arm.left
.stick
.bottom
.top
.leaves
.leaf.left
.leaf.right
.arm.right
.legs
.leg.left
.leg.right
.face
.mask
.tip
.eyeholes
.eyehole.left.round
.eyehole.left.middle
.eyehole.left.bottom
.eyehole.right.top
.eyehole.right.middle
.eyehole.right.almond
.nose
.mouth
Raw
style.sass
$body-color: #d7b18a
$mask-color: #27674f
$stick-color: #8d9368
$leaf-color: #4e4a34
$korok-rotation: 10deg
$left-arm-rotation: 21deg
$swing-angle: 5deg
div
position: absolute
&::before,
&::after
position: absolute
.container
width: 99%
top: 25%
animation: bob 1s ease-in-out infinite
.korok
left: 40%
animation: swing 1s ease-in-out infinite
transform-origin: top right
.body
position: relative
width: 4.4rem
height: 11rem
.head
width: 100%
height: 7rem
background: $body-color
&::before
content: ''
border-bottom: 1rem solid $body-color
border-left: 4.4rem solid transparent
transform: translateY(-97%)
.torso
width: 110%
height: 4rem
top: 6.7rem
border-radius: 15% / 80%
background: $body-color
transform: translateX(-8%) skew(-4deg, -3deg)
&::after
content: ''
position: absolute
top: -9%
bottom: -9%
left: 8%
right: 8%
border-radius: 80% / 15%
background: inherit
.horn
&.left
border-bottom: 3rem solid #d7b18a
border-left: 0.8rem solid transparent
border-right: 0.8rem solid transparent
transform: translateY(-90%) rotate(40deg)
left: 88%
z-index: 1
&::before
content: ''
border-bottom: 1rem solid $body-color
border-left: 0.6rem solid transparent
border-right: 0.2rem solid transparent
background: transparent
transform: translate(-100%, 70%) rotate(-65deg)
&.right
border-bottom: 3rem solid $body-color
border-left: 1.3rem solid transparent
border-right: 1.3rem solid transparent
transform: translate(-48%, -44%) rotate(-40deg)
.arm
&.left
border-left: 1.7rem solid $body-color
border-bottom: 1.2rem solid transparent
top: 58%
left: 95%
// transform: rotate(-$left-arm-rotation)
animation: arm-swing 1s linear infinite
transform-origin: bottom
&.right
border-right: 1.4rem solid $body-color
background: transparent
border-top: 0.2rem solid transparent
border-bottom: 0.7rem solid transparent
transform: translate(-100%)
top: 61.4%
left: 1%
.legs
top: 100%
width: 100%
transform: translate(-8%)
.leg
&.left
border-top: 1rem solid transparent
border-bottom: 1rem solid transparent
border-right: 1rem solid $body-color
transform: translate(0rem, -1.2rem) rotate(22deg)
left: 72%
&.right
border-top: 1rem solid $body-color
border-left: 0.5rem solid transparent
border-right: 0.5rem solid transparent
transform: translate(-0.1rem, -0.2rem) rotate(22deg)
.face
width: 100%
height: 7rem
top: 20%
.mask
width: 4rem
height: 4rem
top: 25%
left: 50%
background: $mask-color
transform: translate(-50%) rotate(-45deg)
transform-origin: center
&::before,
&::after
content: ''
width: 2.9rem
height: 5rem
border-radius: 50%
background: $mask-color
&::before
transform: translate(-24%, -106%) rotate(59deg)
transform-origin: bottom left
&::after
top: 100%
left: 100%
transform: translate(-85%, -87%) rotate(29deg)
transform-origin: bottom right
.tip
width: 100%
height: 100%
&::before,
&::after
content: ''
width: 0.9rem
height: 4.5rem
border-radius: 100% 0 0 100% / 50% 0 0 50%
background: $mask-color
&::before
transform: translate(-0.3rem, -0.6rem) rotate(-1.1deg)
transform-origin: top left
&::after
top: 100%
transform: translate(-70%, -13%) rotate(-92deg)
transform-origin: top right
.eyehole:not(.round):not(.almond),
.mouth
border-top-left-radius: 50%
border-top: 1rem solid black
border-right: 1rem solid transparent
border-bottom: 1rem solid transparent
border-left: 1rem solid black
.eyeholes
width: 100%
height: 100%
.eyehole
&.left
left: 65%
&.round
top: 7%
width: 0.5rem
height: 0.5rem
border-radius: 50%
background: black
&.middle
top: 9%
transform: rotate(15deg) translate(-0.4rem) skew(-40deg, 10deg) scale(0.35)
&.bottom
top: 20%
transform: rotate(15deg) translate(-0.3rem) skew(-40deg, 10deg) scale(0.25)
&.right
&.top
transform: rotate(80deg) skew(10deg, -40deg) scale(0.3)
&.middle
top: 8%
left: -6%
transform: rotate(70deg) skew(10deg, -30deg) scale(0.25)
&.almond
width: 0.5rem
height: 0.5rem
top: 29%
left: 4%
background: black
border-radius: 0 50% 0 50%
transform: rotate(-29deg) skew(40deg, 10deg)
transform-origin: top left
.nose
height: 1rem
width: 1rem
border-radius: 0 50% 50% 50%
transform: translate(-50%) rotate(35deg)
border-right: 0.2rem solid black
border-bottom: 0.2rem solid black
background: lighten($body-color, 10%)
left: 50%
top: 30%
.mouth
top: 56%
left: 48%
transform: scale(0.4) translate(-86%) rotate(68deg) skew(10deg, -40deg)
.stick
// The extra 88 degrees compensates for creating the "macaroni" shape that forms the lower part of the stick
transform: rotate($korok-rotation + $left-arm-rotation - 88deg)
transform-origin: bottom left
.bottom
width: 5rem
height: 1.9rem
border-left: 1.5rem solid transparent
border-right: 0.3rem solid transparent
border-top: 0.4rem solid $stick-color
border-radius: 50%
transform: translate(-1.8rem, -0.2rem)
.top
height: 5rem
width: 0.3rem
border-left: 0.3rem solid $stick-color
border-top: 1.3rem solid transparent
border-bottom: 2.5rem solid transparent
border-radius: 50%
left: 6rem
bottom: -4.6rem
transform: rotate(90deg)
.leaves
width: 100%
left: -90%
top: -6%
animation: propeller 0.4s linear infinite
.leaf
width: 6rem
height: 2rem
background: $leaf-color
border-radius: 100% 0
// Petiole
&::before
content: ''
width: 0.2rem
height: 1rem
border-right: 0.2rem solid $leaf-color
border-bottom: 0.2rem solid transparent
top: 80%
transform: translate(-150%) rotate(45deg)
&.left
left: 320%
&.right
left: -220%
transform: rotateY(180deg)
transform-origin: left center
@keyframes propeller
0%
transform: rotateY(0deg)
100%
transform: rotateY(360deg)
@keyframes bob
0%
transform: translateY(0)
50%
transform: translateY(1rem)
100%
transform: translateY(0)
@keyframes swing
0%
transform: rotate(-$korok-rotation)
50%
transform: rotate(-$korok-rotation - $swing-angle)
100%
transform: rotate(-$korok-rotation)
@keyframes arm-swing
0%
transform: rotate(-$left-arm-rotation)
50%
transform: rotate(-$left-arm-rotation + $swing-angle)
100%
transform: rotate(-$left-arm-rotation)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment