label(for='toggle') Toggle body overflow
input#toggle(type='checkbox')
.jigglypuff
.jigglypuff__left-arm
.jigglypuff__left-foot
.jigglypuff__right-foot
.jigglypuff__ear-left
.jigglypuff__ear-left-inner
.jigglypuff__ear-right
.jigglypuff__ear-right-inner
.jigglypuff__body
.jigglypuff__right-arm
.jigglypuff__mouth
.jigglypuff__eye-left
.jigglypuff__eye-left-pupil
.jigglypuff__eye-right
.jigglypuff__eye-right-pupil
.jigglypuff__tuft-container
.jigglypuff__tuft
.jigglypuff__tuft-line
View Compiled
*
*:after
*:before
box-sizing border-box
// 853 x 805
:root
--size 50
--unit calc((var(--size) / 853) * 1vmin)
--pink hsl(347, 56%, 86%)
--pink-dark hsl(349, 42%, 75%)
--glare radial-gradient(circle at center, hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 100%, 100%, 0.15) 80%)
--inner-ear hsl(225, 21%, 11%)
--border hsl(0, 0%, 15%)
--eye-light hsl(191, 39%, 49%)
--eye-dark hsl(189, 81%, 29%)
--pupil-backdrop hsl(195, 86%, 15%)
// Utility function for using unit variable
u(num)
'calc(%s * var(--unit))' % num
c(path)
clip-path path
clip-path path
body
display flex
align-items center
justify-content center
flex-direction column
min-height 100vh
background hsl(260, 100%, 80%)
.jigglypuff
height u(805)
width u(853)
position relative
*
position absolute
&__body
background var(--pink-dark)
left 9.5%
top 15%
height 77.25%
width 73%
border u(5) solid var(--border)
border-radius 60% 53% 61% 58%/53% 58% 58% 61%
overflow hidden
&:before
content ''
background var(--pink)
width 239%
height 210%
left 57%
bottom 20%
border-radius 50% / 0 0 100% 100%
transform translate(-50%, 0) rotate(4deg)
position absolute
transform-origin bottom center
&__left-arm
top 56%
left 0.75%
height 15%
border u(5) solid var(--border)
width 27%
background var(--pink-dark)
border-radius 70% 0 0 100% / 25% 0 0 75%
transform-origin 100% 50%
transform rotate(1deg)
overflow hidden
&:before
content ''
position absolute
height 100%
width 41%
border-radius 0 0 60% 0 /0 0 83% 0
background radial-gradient(circle at 0 50%, var(--pink) 70%, var(--pink-dark) 90%)
left -5%
top 50%
transform translate(0, -50%)
&:after
content ''
top 20%
left 7%
height 19%
width 15%
background var(--glare)
position absolute
border-radius 50%
&__right-arm
top 77%
left 58.5%
background var(--pink-dark)
width 11%
border u(5) solid var(--border)
height 12%
transform rotate(-10deg)
border-radius 0 0 50% 50% / 0 0 100% 100%
border-top 0
&:before
content ''
position absolute
bottom 20%
left 50%
transform translate(-50%, 0)
background var(--pink)
height 100%
width 80%
border-radius 0 0 50% 50% / 0 0 100% 100%
z-index 2
&:after
content ''
position absolute
background var(--glare)
height 40%
width 25%
border-radius 50%
left 21%
bottom 57%
z-index 3
transform rotate(-10deg)
&__left-foot
height 26%
width 12%
background var(--pink-dark)
bottom 0%
left 17%
transform rotate(70deg)
border-radius 29% 70% 50% 50% / 24% 39% 67% 55%
border u(5) solid var(--border)
overflow hidden
&:after
content ''
position absolute
bottom -7%
height 60%
width 150%
border-radius 50%
background radial-gradient(circle at 50% 75%, var(--pink) 50%, var(--pink-dark))
&:before
content ''
position absolute
bottom 9%
left 20%
height 25%
width 30%
background var(--glare)
border-radius 50%
transform rotate(-10deg)
z-index 2
&__right-foot
height 25%
width 13%
background var(--pink-dark)
border u(5) solid var(--border)
bottom 0
left 61%
border-radius 25% 39% 45% 101% / 50% 64% 56% 97%
transform-origin 0 100%
transform rotate(-51deg) translate(0, 29%)
overflow hidden
&:before
content ''
position absolute
bottom -10%
background radial-gradient(var(--pink) 50%, var(--pink-dark))
width 165%
height 62%
border-radius 50%
left 50%
transform translate(-50%, 0)
&:after
content ''
position absolute
height 15%
width 35%
background var(--glare)
border-radius 50%
bottom 20%
right 10%
transform rotate(50deg)
filter blur(2px)
&__ear-left
height 30%
width 25%
background var(--pink)
left 24%
top 0%
transform-origin 0 0
transform rotate(19deg)
border-radius 9% 85% 25% 26% / 17% 30% 0 50%
border u(5) solid var(--border)
&:after
content ''
height 50%
width 75%
background var(--inner-ear)
position absolute
bottom 91%
left 8%
border calc(5 * var(--unit)) solid var(--border)
transform-origin 0 100%
transform rotate(28deg) translate(0, 100%)
border-radius 50% / 15%
c(inset(0 0 90% 0))
&-inner
height 80%
width 58%
background var(--inner-ear)
left 10%
top 8%
border u(5) solid var(--border)
border-radius 15% 0 0 44% / 20% 0 0 70%
overflow hidden
c(polygon(0 9%, 100% 43%, 100% 100%, 0 100%))
&:before
content ''
height 42%
width 70%
border-radius 50%
bottom 0
left -11%
position absolute
background var(--glare)
&__ear-right
height 35%
width 31%
border u(5) solid var(--border)
background var(--pink)
right 0%
top 35%
transform-origin 100% 0
transform rotate(30deg)
border-radius 100% 5% 56% 0 /51% 5% 65% 0
&:after
content ''
background var(--inner-ear)
width 61%
height 68%
right 4%
top 11%
position absolute
border-top u(5) solid var(--border)
c(inset(0 0 97% 80%))
&-inner
background var(--inner-ear)
width 61%
height 68%
right 8%
top 11%
border u(5) solid var(--border)
border-radius 95% 5% 46% 0 / 76% 5% 70% 0
overflow hidden
box-shadow u(15) 0 u(2) 0 var(--pink-dark)
&:before
content ''
z-index 2
background var(--glare)
height 50%
width 67%
border-radius 50%
bottom 4%
right -20%
position absolute
&__mouth
top 47%
left 33%
transform-origin 0 50%
height 15%
width 18%
border u(5) solid var(--border)
border-radius 50%
transform rotate(16deg)
c(polygon(50% 10%, 91% 100%, 5% 100%))
&__tuft-container
top 11%
left 34%
height 37%
width 37%
&:after
content ''
position absolute
bottom 0
left 6%
height 50%
width 54%
border-radius 50%
border u(5) solid var(--border)
background var(--pink)
c(polygon(100% 23%, 47% 100%, 100% 100%))
&__tuft
background var(--pink)
height 100%
width 100%
border-radius 85% 50% 50% 39% / 80% 52% 50% 55%
border u(5) solid var(--border)
c(polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%))
&-line
height 25%
width 34%
top 62%
left 40%
border-radius 95% 0 0 0 / 61% 0 0 0
border-top u(5) solid var(--border)
&__eye-left
height 24%
width 21%
border u(5) solid var(--border)
background hsla(0, 0%, 100%, 15)
top 34%
left 16%
border-radius 55% 45% 60% 40% / 58% 41% 61% 42%
&:after
content ''
position absolute
right 13%
top 41%
height 13%
width 14%
background white
c(polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%))
animation twinkle 1.5s 0.75s infinite
&-pupil
border u(5) solid var(--border)
height 77%
width 78%
right 2%
top 10%
border-radius 55% 45% 60% 40% / 58% 41% 61% 42%
background radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%),
radial-gradient(circle at 85% 34%, var(--pupil-backdrop), transparent), var(--eye-dark)
&:after
content ''
position absolute
top 11%
right 10%
height 25%
width 26%
background radial-gradient(white 75%, transparent)
border-radius 50%
&:before
content ''
height 20%
width 28%
bottom 5%
left 18%
background var(--glare)
border-radius 50%
position absolute
z-index 2
&__eye-right
border u(5) solid var(--border)
top 46%
left 51%
height 25%
width 21%
border-radius 61% 48% 56% 50% / 50% 50% 58% 50%
background hsla(0, 0%, 100%, 1)
&:after
content ''
position absolute
right 13%
top 41%
height 13%
width 14%
background white
c(polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%))
animation twinkle 2s infinite
&-pupil
height 79%
width 81%
right 2%
top 10%
overflow hidden
border u(5) solid var(--border)
border-radius 61% 48% 56% 50% / 50% 50% 58% 50%
background radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%),
radial-gradient(circle at 71% 24%, var(--pupil-backdrop), transparent),
var(--eye-dark)
&:after
content ''
position absolute
top 7%
right 15%
height 24%
width 27%
border-radius 50%
background radial-gradient(white 75%, transparent)
&:before
content ''
position absolute
bottom 5%
left 18%
border-radius 50%
height 20%
width 37%
background var(--glare)
z-index 2
label
margin-bottom 1rem
z-index 3
:checked
z-index 3
:checked ~ .jigglypuff .jigglypuff__body
overflow visible
@keyframes twinkle
0%
transform rotate(0deg) scale(0)
50%
transform rotate(540deg) scale(1.2)
100%
transform rotate(1080deg) scale(0)
View Compiled
// 404
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.