mixin leaf($index)
.leaf(class=`leaf--${$index}`)
div
div
div
mixin flower($index)
.flower(class=`flower--${$index}`)
- let p = 0
while (p < 4)
.flower__petal(class=`flower__petal--${p}`)
div
div
div
div
- p++
.flower__core
.leif
.leif__arch
.leif__himself
.leif__container
.leif__body
.leif__arm--left
.claw
.claw
.claw
.leif__arm--right
.leif__cap
div
div
div
div
div
div
div
div
.leif__head
.leif__face
.leif__face-border
div
div
div
.leif__eye.leif__eye--right
div
div
div
.leif__eye.leif__eye--left
div
div
div
.leif__face-patch
.leif__mouth
div
div
div
div
div
div
.leif__mouth-patch
.leif__nose
.leif__cheek.leif__cheek--left
.leif__cheek.leif__cheek--right
.leif__eye-open.leif__eye-open--left
.leif__eye-open.leif__eye-open--right
.leif__eye-closed.leif__eye-closed--left
.leif__eye-closed.leif__eye-closed--right
.leif__pot
.flower__show
.flower__container
+flower()
.leif__forearm
.claw
.claw
.claw
- let l = 1
while l < 11
+leaf(l)
- l++
- let f = 1
while f < 6
+flower(f)
- f++
- let s = 1
while s < 5
.star(class=`star--${s}`)
- s++*
box-sizing border-box
u($d)
'calc(%s * var(--unit))' % $d
c($p)
-webkit-clip-path $p
clip-path $p
:root
// 493 x 511
--coefficient 1vmin
--size 50
--min-size 200
--unit calc((var(--size) / 493) * var(--coefficient))
--stroke hsl(0, 0%, 5%)
--lip-color hsl(0, 100%, 85%)
--cheek-color hsl(0, 100%, 75%)
--tongue-color hsl(0, 100%, 60%)
--cap-color hsl(100, 90%, 40%)
--leaf-color hsl(100, 90%, 30%)
--backdrop hsl(140, 80%, 28%)
--eye-shade hsl(20, 20%, 25%)
--fur-color hsl(33, 23%, 62%)
--face hsl(0, 0%, 95%)
--eye hsl(0, 0%, 95%)
--outfit hsl(40, 90%, 50%)
--pupil hsl(205, 80%, 20%)
--pot-color hsl(40, 100%, 70%)
--default-petal-color red
--cap-accent hsl(50, 100%, 50%)
--peak-color hsl(100, 90%, 25%)
--flower-core hsl(50, 90%, 50%)
--stroke-border '%s solid var(--stroke)' % u(5)
body
min-height 100vh
background hsl(0, 100%, 85%)
img
.leif
height u(511)
width u(493)
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
.leif
*
*:after
*:before
position absolute
&__himself
height 100%
width 100%
c(circle(50% at 50% 38%))
&__container
height 100%
width 100%
animation pop-in 0.5s 1s both cubic-bezier(.58,.68,.71,1.41)
&__eye-closed
animation blink-closed 8s infinite steps(1)
border u(10) solid var(--stroke)
c(polygon(0 45%, 100% 60%, 100% 100%, 0 100%))
border-radius 50%
&--left
height 18%
left 12%
width 14%
bottom 51%
&--right
height 19%
left 48%
width 16%
bottom 45%
&__arch
height 100%
width 100%
border-radius 50%
background var(--backdrop)
bottom 12%
border var(--stroke-border)
&__eye-open
animation blink-open 8s infinite steps(1)
&--left
height 18%
left 12%
width 14%
border-radius 50%
background var(--eye)
bottom 51%
&:after
content ''
position absolute
top 35%
left 60%
height 50%
width 50%
transform translate(-50%, -50%)
border-radius 50%
background var(--pupil)
&--right
height 19%
left 48%
width 16%
border-radius 50%
background var(--eye)
bottom 45%
&:after
content ''
position absolute
top 34%
left 39%
height 50%
width 50%
transform translate(-50%, -50%)
border-radius 50%
background var(--pupil)
&__pot
height 17%
width 20%
background var(--stroke)
left 32%
top 60%
transform rotate(-4deg)
c(polygon(0 -100%, 100% -100%, 100% 25%, 90% 25%, 70% 100%, 30% 100%, 10% 25%, 0 25%))
&:after
&:before
content ''
background var(--pot-color)
left 50%
transform translate(-50%, 0)
z-index 3
&:before
height 15%
width 90%
top 5%
&:after
bottom 5%
height 70%
width 90%
c(polygon(0 -100%, 100% -100%, 100% 25%, 92% -10%, 70% 100%, 30% 100%, 8% -10%, 0 25%))
.flower__container
width 100%
height 100%
left 0
bottom 0
animation grow 2s 2s linear both
.flower__show
height 100%
width 100%
left 0
bottom 100%
c(inset(0 0 0 0))
.flower
bottom 0
--size 70
--r 40
--hue 210
z-index -2
&:before
content ''
width 10%
height 100%
background var(--stroke)
top 50%
left 50%
transform-origin 50% 0
transform rotate(calc(var(--r) * -1deg)) translate(-50%, 0)
&__arm--right
left 56%
top 58%
height 15%
transform rotate(7deg)
width 9%
border var(--stroke-border)
border-radius 30% 70%
background var(--fur-color)
&__body
height 50%
width 27%
background var(--outfit)
top 50%
left 36%
border var(--stroke-border)
border-radius 40% 60% 50% 50% / 62% 62% 30% 30%
&:after
&:before
content ''
&:before
height 20%
width 100%
top 15%
left 0
background var(--fur-color)
c(polygon(0 50%, 25% 0, 100% 0, 100% 100%, 0 100%))
&:after
width 25%
height 30%
border var(--stroke-border)
border-radius 50%
right 10%
top 10%
background var(--outfit)
transform rotate(12deg) translate(15%, 0)
&__forearm
height 8%
width 20%
background var(--fur-color)
border var(--stroke-border)
top 65.25%
left 42%
transform-origin 100% 50%
transform rotate(-8deg)
border-radius 30% 0 0 30% / 25% 0 0 25%
c(polygon(-50% 0, 90% 0, 96% 100%, -50% 100%))
.claw
width 35%
height 35%
border-radius 50%
background var(--stroke)
top calc(var(--t, 5) * 1%)
right 95%
transform-origin 100% 50%
transform rotate(calc(var(--r, 1) * 1deg))
c(polygon(0 50%, 100% 0, 100% 100%))
&:nth-of-type(2)
--t 30
--r -3
&:nth-of-type(3)
--t 60
--r 2
&__head
top 13.5%
width 62%
height 48%
left 51.5%
transform translate(-50%, 0%)
background var(--fur-color)
border-radius 50% / 50%
border var(--stroke-border)
&__face
bottom 7%
left 3%
height 85%
width 83.5%
border-radius 47% 50% 61% 52%/48% 57% 54% 56%
overflow hidden
&-border
height 100%
width 100%
div:nth-of-type(1)
height 74%
width 47%
background var(--face)
border-radius 50%
top 6%
left -1%
transform rotate(17deg)
div:nth-of-type(2)
background var(--face)
top 4%
transform rotate(-44deg)
right 4%
border-radius 50%
height 84%
width 51%
div:nth-of-type(3)
height 150%
width 200%
top 50%
left 50%
background var(--face)
transform translate(-50%, 0)
&__face-patch
height 150%
width 100%
top 40%
left 50%
background var(--face)
transform translate(-50%, 0)
c(polygon(0 15%, 8% 2%, 15% 9%, 26% 9%, 31% 0, 50% 0, 53% 11%, 68% 15%, 77% 8%, 100% 42%))
&__nose
background var(--lip-color)
top 50%
left 27%
border-radius 50%/50%
height 16%
width 18%
transform rotate(10deg)
&:after
&:before
content ''
width 13%
height 34%
background hsl(0, 0%, 25%)
border-radius 50% / 25%
&:after
left 31%
top 35%
&:before
left 59%
top 37%
&__cheek
background var(--cheek-color)
border-radius 50% 50% 40% 60% / 50% 50% 50% 50%
&--left
height 20%
width 10%
top 52%
left 4%
&--right
height 20%
width 16%
top 62%
right 18%
&__mouth-patch
width 50%
height 5%
background var(--face)
bottom 36%
left 14%
transform-origin 0 100%
transform rotate(5deg)
&__arm--left
height 30%
width 8%
top 56%
background var(--fur-color)
border var(--stroke-border)
left 40%
border-radius 100% 0 50% 50% / 50%
transform-origin 50% 0
transform rotate(34deg)
.claw
height 13%
width 10%
background var(--stroke)
border-radius 50%
top 95%
left calc(var(--x, 26) * 1%)
&:nth-of-type(2)
--x 37
&:nth-of-type(3)
--x 50
&__mouth
width 45%
height 26%
background var(--face)
bottom 12%
left 14%
// overflow hidden
c(polygon(0 5%, 100% 17%, 100% 100%, 0 100%))
& > div:nth-of-type(1)
background var(--lip-color)
width 150%
height 200%
bottom 0
left 50%
transform-origin bottom center
transform translate(-50%, 0) rotate(4deg)
border-radius 0 0 50% 50%/0 0 100% 100%
& > div:nth-of-type(2)
background hsla(0, 0%, 0%, 1)
bottom 21%
width 133%
height 200%
border-radius 0 0 50% 50%/0 0 100% 100%
left 50%
transform-origin bottom center
transform translate(-50%, 0) rotate(4deg)
overflow hidden
c(polygon(50% 50%, 87% 100%, 10% 100%))
&:after
content ''
height 10%
width 26%
border-radius 50% 50% 0 0 / 100% 100% 0 0
bottom -2%
left 50%
transform translate(-50%, 0)
background var(--tongue-color)
& > div:nth-of-type(3)
background var(--lip-color)
bottom 43%
width 185%
height 200%
left 50%
transform-origin bottom center
transform translate(-50%, 0) rotate(4deg)
border-radius 0 0 50% 50%/0 0 100% 100%
& > div:nth-of-type(4)
background var(--face)
bottom 62%
width 185%
height 200%
left 50%
transform-origin bottom center
transform translate(-50%, 0) rotate(4deg)
border-radius 0 0 50% 50%/0 0 100% 100%
& > div:nth-of-type(5)
left 0%
top 0
height 100%
width 21%
border-top calc(10 * var(--unit)) solid var(--face)
border-radius 50%
transform rotate(-49deg) translate(27%, -5%)
& > div:nth-of-type(6)
right 0%
top 0
height 100%
width 24%
border-top calc(10 * var(--unit)) solid var(--face)
border-radius 50%
transform rotate(52deg) translate(0%, 5%)
&__eye
&--left
height 40%
width 30%
top 22%
background var(--face)
overflow hidden
& > div
background var(--eye-shade)
height 111%
width 107%
right 0
top 0
border-radius 65% 30% 50% 50% / 78% 36% 50% 0%
& > div:nth-of-type(1)
background var(--face)
height 100%
width 100%
border-radius 65% 30% 50% 50% / 78% 36% 50% 0%
top 29%
left 6%
transform rotate(4deg)
& > div:nth-of-type(2)
background var(--eye-shade)
width 68%
height 68%
border-radius 50%
right 0
&--right
background var(--face)
height 45%
width 52%
left 50%
top 31%
transform rotate(52deg)
overflow hidden
& > div
background var(--eye-shade)
height 131%
width 138%
left 0
top 3%
border-radius 50% 50% 0 100% /50% 30% 0 55%
// overflow hidden
& > div:nth-of-type(1)
background var(--face)
height 109%
width 87%
transform rotate(19deg) translate(10%, 19%)
border-radius 50% 50% 0 0 / 100% 100% 0 0
& > div:nth-of-type(2)
background var(--eye-shade)
height 57%
width 35%
border-radius 50%
top 16%
left 0
&:after
content ''
height 27%
width 36%
border-radius 50%
border-top calc(5 * var(--unit)) solid var(--eye-shade)
left 92%
top 17%
transform rotate(-60deg)
&__cap
height 20%
width 30%
left 39%
top 1%
& > div:nth-of-type(1)
right 0
top 0
width 90%
height 150%
border-radius 50%
border var(--stroke-border)
background var(--cap-color)
& > div
background var(--cap-color)
height 10%
width 17%
border-radius 50%
top 13%
left 31%
& > div:nth-of-type(1)
z-index 2
& > div:nth-of-type(2)
& > div:nth-of-type(3)
& > div:nth-of-type(4)
& > div:nth-of-type(5)
& > div:nth-of-type(6)
background var(--cap-accent)
transform translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%)) rotate(calc(var(--r, 0) * 1deg))
& > div:nth-of-type(2)
--x -55
--y -5
& > div:nth-of-type(3)
--x 22
--y -70
--r 120
height 12%
& > div:nth-of-type(4)
--x 85
--y -5
--r -20
height 11%
& > div:nth-of-type(5)
--x 30
--y 80
--r 60
height 11%
& > div:nth-of-type(6)
--x -50
--y 80
--r 130
height 11%
// Peak/brim
& > div:nth-of-type(2)
width 107%
height 62%
top 48%
border var(--stroke-border)
border-radius 50%
transform rotate(17deg) translate(-1%, 1%)
background var(--peak-color)
.flower
--petal-color 'hsl(%s, 100%, 50%)' % var(--hue)
height calc(var(--size, 125) * var(--unit))
width calc(var(--size, 125) * var(--unit))
bottom 1%
left 50%
transform translate(-50%, 0) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%)) rotate(calc(var(--r, 0) * 1deg))
&__core
top 50%
left 50%
height 30%
width 30%
border-radius 50%
border var(--stroke-border)
transform translate(-50%, -50%)
background var(--flower-core)
transform-style preserve-3d
&:after
&:before
content ''
height 25%
width 220%
background var(--stroke)
border-radius 5% / 50%
top 50%
left 50%
transform translate3d(-50%, -50%, -1px)
&:after
transform translate3d(-50%, -50%, -1px) rotate(90deg)
&__petal
height 50%
width 50%
top 0
left 50%
transform translate(-50%, 0)
transform-origin 50% 100%
c(polygon(-50% 0, 50% 100%, 150% 0))
&:after
content ''
width 60%
left 50%
height 100%
border-radius 50%
border-top u(10) solid var(--petal-color, var(--default-petal-color))
transform-origin 50% 0
transform translate(-50%, 0) rotate(180deg) translate(0, -34%)
c(inset(0 0 80% 0))
&--0
transform translate(-50%, 0) rotate(0deg)
&--1
transform translate(-50%, 0) rotate(90deg)
&--2
transform translate(-50%, 0) rotate(180deg)
&--3
transform translate(-50%, 0) rotate(270deg)
& > div:nth-of-type(1)
left 50%
width 60%
// transform-origin 0 25%
height 100%
bottom 0
border-radius 50% / 25%
background var(--stroke)
transform-origin 50% 100%
transform translate(-50%, 0) rotate(-23deg) translate(0, 0)
& > div:nth-of-type(2)
left 50%
width 60%
// transform-origin 100% 25%
height 100%
border-radius 50% / 25%
background var(--stroke)
transform-origin 50% 100%
transform translate(-50%, 0) rotate(23deg) translate(0, 0)
&:after
content ''
height 100%
width 100%
border-top u(10) solid var(--stroke)
border-radius 50%
transform-origin 50% 0
transform rotate(-23deg) rotate(-180deg) translate(65%, -18%)
c(inset(0 0 81% 0))
& > div:nth-of-type(3)
left 50%
width 100%
height 100%
bottom 0
transform translate(-50%, 0)
c(polygon(-34% 0, 50% 90%, 134% 0))
&:after
&:before
content ''
height 100%
width 43%
left 50%
bottom 0
border-radius 50% / 25%
background var(--petal-color, var(--default-petal-color))
&:before
transform translate(-50%, 0) rotate(37deg) translate(27%, 0%)
&:after
transform translate(-50%, 0) rotate(-37deg) translate(-27%, 0%)
.flower--1
--hue 190
--x 0
--y 0
--size 125
--r 0
.flower--2
--hue 320
--x 140
--y -75
--size 75
--r 40
.flower--3
--hue 30
--x -140
--y -75
--size 75
--r 80
.flower--4
--hue 0
--x -170
--y -85
--size 105
--r 85
.flower--5
--hue 260
--x 170
--y -85
--size 105
--r -85
.leaf
left calc(var(--x) * 1%)
top calc(var(--y) * 1%)
height 14%
width 7%
transform-origin 50% 100%
transform rotate(calc(var(--r) * 1deg)) scale(var(--scale, 1)) rotateY(calc(var(--flip, 0) * 180deg))
& > div:nth-of-type(1)
border-radius 90% 10% 50% 50% / 75% 10% 50% 25%
height 100%
width 100%
background var(--stroke)
c(polygon(0 0, 103% 0, 50% 50%, 100% 100%, 0 100%))
& > div:nth-of-type(2)
background var(--leaf-color)
width 100%
border-radius 50%
height 100%
border-radius 90% 10% 50% 50% / 75% 10% 50% 25%
transform scale(0.7) translate(6%, 0)
c(polygon(0 0, 90% 0, 75% 50%, 100% 100%, 0 100%))
& > div:nth-of-type(3)
height 100%
width 100%
left 100%
top 0
border-left var(--stroke-border)
border-width u(10)
// border-color orange
transform-origin bottom center
border-radius 90% 10% 50% 50% / 75% 10% 50% 25%
transform translate(-15%, 0) rotate(-18deg)
c(polygon(0 0, 71% 0, 100% 41%, 9% 81%))
.leaf--1
--x 8
--y 52
--r 5
--flip 0
--scale 1
.leaf--2
--x 9
--y 56
--r -45
--flip 1
--scale 1.1
.leaf--3
--x 23
--y 68
--r -85
--flip 0
--scale 1
.leaf--4
--x 26
--y 67
--r 70
--flip 1
--scale 1.05
.leaf--5
--x 24
--y 68
--r -140
--flip 0
--scale 1
.leaf--6
--x 66
--y 66
--r -65
--flip 0
--scale 1
.leaf--7
--x 71
--y 68
--r 145
--flip 1
--scale 1
.leaf--8
--x 71
--y 68
--r 90
--flip 1
--scale 1
.leaf--9
--x 84
--y 52
--r 5
--flip 1
--scale 1
.leaf--10
--x 86
--y 52
--r 40
--flip 1
--scale 1
.star
height u(20)
width u(20)
top calc(var(--y, 50) * 1%)
left calc(var(--x, 50) * 1%)
animation sparkle 2s calc(var(--d, 0) * 1s) infinite both
&:after
&:before
content ''
height 100%
width 40%
border-radius 50% / 25%
background white
left 50%
top 0
transform translate(-50%, 0) rotate(calc(var(--r, 0) * 1deg))
&:after
--r 90
&--1
--x 30
--y 90
--d 2.25
&--2
--x 4
--y 51
--d 2
&--3
--x 92
--y 49
--d 3
&--4
--x 66
--y 92
--d 2.5
@keyframes pop-in
from
transform translate(0, 100%)
@keyframes sparkle
0%, 50%, 100%
transform scale(0) rotate(0)
25%
transform scale(1.2) rotate(450deg)
@keyframes grow
from
transform translate(0, 100%)
@keyframes blink-open
0%, 10%, 40%, 100%
transform scale(1)
25%
transform scale(0)
@keyframes blink-closed
0%, 10%, 40%, 100%
transform scale(0)
25%
transform scale(1)const restart = () => {
const MARKUP = document.body.innerHTML
document.body.innerHTML = ''
requestAnimationFrame(() => (document.body.innerHTML = MARKUP))
}
document.body.addEventListener('click', restart)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.