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)
  -webkit-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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.