Pure Responsive CSS Snorlax 😅

index.pug

mixin claw(index)
  .snorlax__foot-claw(class=`snorlax__foot-claw--${index}`)
    div
.snorlax
  .snorlax__head
    .snorlax__head-outline
    .snorlax__ear.snorlax__ear--left
    .snorlax__ear.snorlax__ear--right
    .snorlax__brow.snorlax__brow--left
    .snorlax__brow.snorlax__brow--right
    .snorlax__eye.snorlax__eye--left
    .snorlax__eye.snorlax__eye--right
    .snorlax__mouth
      .snorlax__tooth.snorlax__tooth--left
      .snorlax__tooth.snorlax__tooth--right
  .snorlax__arm-left
    .snorlax__arm-wrapper
      .snorlax__claws--left
      .snorlax__arm-left-arm
  .snorlax__arm-right
    .snorlax__claws--right
    .snorlax__arm-right-arm
    .snorlax__claw
  .snorlax__body
    .snorlax__body-shade
    .snorlax__belly
      .snorlax__belly-segment.snorlax__belly-segment--one
      .snorlax__belly-segment.snorlax__belly-segment--two
  .snorlax__left-foot
    .snorlax__left-foot-foot
    +claw('one')
    +claw('two')
    +claw('three')
  .snorlax__right-foot
    .snorlax__right-foot-foot
    +claw('four')
    +claw('five')
    +claw('six')

pure-responsive-css-snorlax.markdown

Pure Responsive CSS Snorlax 😅

Seem to love doing this to myself! 😅

This one was a little harder than I anticipated but it's pure CSS Snorlax 😎

Not perfect, there are definitely some rough edges ha.

Enjoy!

A Pen by Jhey on CodePen.

License.

script.babel

// 404

style.stylus

*
*:after
*:before
  box-sizing border-box

:root
  // We know our img is 300x237
  --size 60
  --unit calc((var(--size) / 300) * 1vmin)
  // colors
  --belly hsl(39, 66%, 84%)
  --dark-belly hsl(35, 29%, 59%)
  --body hsl(164, 26%, 28%)
  --dark-body hsl(199, 43%, 15%)
  --foot hsl(21, 43%, 41%)
  --claws hsl(0, 0%, 98%)


body
  min-height 100vh
  display flex
  align-items center
  background hsl(190, 70%, 30%)
  justify-content center

.snorlax
  *
  *:after
  *:before
    position absolute

  height calc(237 * var(--unit))
  width calc(300 * var(--unit))
  position relative

  &:before
    content ''
    position absolute
    bottom 0
    width 100%
    height 20%
    border-radius 50%
    filter blur(10px)
    opacity 0.5
    background #111
    transform translate(-50%, 25%)
    left 50%

  &__body
    border-radius 50% 45% 50% 50% / 68% 50% 28% 30%
    height 74%
    width 79%
    border calc(2 * var(--unit)) solid black
    background var(--body)
    overflow hidden
    top 60%
    left 47%
    transform translate(-50%, -50%)

    &-shade
      background var(--dark-body)
      height 30%
      width 80%
      bottom 0
      border-radius 50%
      left 50%
      transform translate(-50%, 50%)

      &:after
        content ''
        position absolute
        width 25%
        height 150%
        border-radius 50%
        background var(--dark-body)
        left 9%
        bottom 24%
        transform rotate(-22deg)

  &__brow
    background var(--belly)

    &--left
      width 50%
      height 100%
      left 5%
      top 11%
      border-radius 65% 47% 0 50%/70% 39% 0 44%

    &--right
      width 54%
      height 100%
      right 4%
      top 10%
      overflow hidden
      border-radius 45% 80% 0 50%/72% 77% 0 44%
      &:before
        content ''
        right 0
        height 100%
        width 32%
        bottom 0
        background var(--dark-belly)
        z-index 2

      &:after
        content ''
        right 16%
        height 100%
        width 32%
        bottom 36%
        background var(--belly)
        z-index 3
        border-radius 0 0 75% 0 / 0 0 36% 0



  &__eye
    height calc(2 * var(--unit))
    width 15%
    background black
    top 33%
    z-index 5

    &--left
      left 21%
    &--right
      right 25%

  &__mouth
    height calc(2 * var(--unit))
    width 30%
    background black
    top 52%
    left 48%
    transform translate(-50%, 0)

  &__tooth
    background black
    height 235%
    width 20%
    bottom 100%
    $clip = polygon(0 100%, 50% 0, 100% 100%)
    -webkit-clip-path $clip
    clip-path $clip

    &:after
      content ''
      background var(--claws)
      height 100%
      width 100%
      $clip = polygon(0 100%, 50% 0, 100% 100%)
      -webkit-clip-path $clip
      clip-path $clip
      transform-origin bottom center
      transform scale(0.65)

    &--left
      left 0
    &--right
      right 0

  &__head
    height 30%
    width 45%
    left 50%
    top 5%
    transform translate(-50%, 0)

  &__head-outline
    background var(--body)
    height 100%
    width 100%
    border calc(2 * var(--unit)) solid black
    border-radius 75% 75% 25% 25% / 110% 110% 0% 0%
    overflow hidden

    &:after
      content ''
      right -5%
      height 110%
      width 15%
      border-radius 50% / 50%
      top -5%
      background var(--dark-body)

  &__ear
    height 64%
    border calc(2 * var(--unit)) solid black
    background var(--body)
    top -14%
    width 35%
    position absolute
    overflow hidden
    border-radius 15% 85% 0 10% / 20% 100% 0 80%
    $clip = polygon(0 0, 100% 0, 100% 18%, 0 90%)
    -webkit-clip-path $clip
    clip-path $clip


    &:before
      content ''
      top 0
      left 0
      background var(--body)
      position absolute
      z-index 2
      height 100%
      width 15%
      border-radius 28%
      transform-origin top center
      transform rotate(-67deg) translate(11%, 23%)

    &--left
      left 4%

    &--right
      right 4%
      top -15%
      transform rotateY(180deg)

      &:after
        content ''
        left -10%
        width 25%
        background var(--dark-body)
        height 100%
        top -10%
        border-radius 50% / 50%

  &__belly
    position absolute
    height 50%
    width 82%
    left 50%
    top 0
    transform translate(-49%, 0%)

    &:after
      content ''
      position absolute
      width 58%
      height 50%
      border-top calc(10 * var(--unit)) solid var(--belly)
      top 90%
      left 50%
      clip-path polygon(5% 0, 79% 0, 90% 100%, 5% 100%)
      transform translate(-50%, -26%)
      z-index 3
      border-radius 50% 50% 0 0/50% 50% 50% 50%



  &__belly-segment
    &--one
      height 83%
      width 100%
      bottom 0%
      left 0%
      // border calc(2 * var(--unit)) solid black
      background var(--belly)
      transform-origin 0 100%
      transform translate(6.5%, 13%) rotate(-20deg)
      border-radius 40% 55% 0 17% / 60% 100% 0% 40%
      $clip = polygon(0 0, 75% 0, 75% 100%, 0 100%)
      -webkit-clip-path $clip
      clip-path $clip
      z-index 2

      &:before
        content ''
        position absolute
        top 100%
        background var(--belly)
        left 50%
        height 80%
        width 80%
        border-radius 10%
        transform translate(-50%, -81%) rotate(10deg)
    &--two
      height 90%
      width 100%
      bottom 0%
      right 0%
      transform-origin 100% 100%
      background var(--dark-belly)
      transform translate(-7%, 14%) rotate(20deg)
      border-radius 0% 34% 34% 0 / 0% 60% 40% 0%
      $clip = polygon(30% 0, 100% 0, 100% 150%, 30% 150%)
      -webkit-clip-path $clip
      clip-path $clip

      &:after
        content ''
        position absolute
        right 10%
        top -4%
        width 100%
        height 102%
        transform-origin right bottom
        transform rotate(-2deg)
        background var(--belly)
        z-index 3
        border-radius 0 14% 19% 0/0 50% 50% 0

      &:before
        content ''
        background var(--belly)
        position absolute
        z-index 2
        height 50%
        width 50%
        bottom 0
        left 50%
        transform translate(-50%, 31%) rotate(-20deg)

  &__arm-left
    height 85%
    width 24%
    left 12%
    top 14%
    transform rotate(-21deg)

  &__claws--left
    background black
    top -4%
    width 60%
    height 10%
    left 48%
    $clip = polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%)
    -webkit-clip-path $clip
    clip-path $clip
    transform translate(-50%, 0)

    &:after
      content ''
      width 100%
      height 100%
      $clip = polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%)
      -webkit-clip-path $clip
      clip-path $clip
      transform-origin bottom center
      background white
      transform scaleY(0.8) scaleX(0.95)

  &__arm-left-arm
    background var(--body)
    height 68%
    width 100%
    top 0
    left 0
    border-radius 44% 54% 50% 50%/50% 60% 40% 50%
    transform-origin 50% 60%
    transform rotate(0deg)
    overflow hidden
    border calc(2 * var(--unit)) solid black
    // animation wave 5s infinite ease

    &:after
      content ''
      right 0
      width 50%
      background var(--dark-body)
      height 120%
      top 50%
      transform translate(56%, -50%) rotate(-15deg)
      border-radius 50%
      $clip = inset(0 50% 0 0)
      -webkit-clip-path $clip
      clip-path $clip
      animation fade 6s infinite linear

      @keyframes fade
        0%, 100%
          opacity 1
        50%
          opacity 0
  &__arm-wrapper
    animation wave 6s infinite ease
    height 100%
    width 100%
    transform-origin 56% 41%
    @keyframes wave
      0, 100%
        transform rotate(0deg)
      50%
        transform rotate(-100deg)

  &__arm-right
    height 50%
    width 17%
    right 7%
    top 28%
    transform rotate(-39deg)

  &__claw
    bottom 0
    width 15%
    height 9%
    background black
    transform translate(109%, 19%) rotate(45deg)
    $clip = polygon(0 0, 100% 0, 50% 100%)
    -webkit-clip-path $clip
    clip-path $clip

    &:after
      content ''
      $clip = polygon(0 0, 100% 0, 50% 100%)
      -webkit-clip-path $clip
      clip-path $clip
      height 100%
      width 100%
      background white
      transform scale(0.5)

  &__arm-right-arm
    height 100%
    width 100%
    border-radius 25% 75% 65% 35%/56% 60% 40% 30%
    background var(--dark-body)
    overflow hidden
    border calc(2 * var(--unit)) solid #000

    &:after
      content ''
      height 100%
      width 130%
      border-radius 50%
      background var(--body)
      bottom 8%
      left -9%

  &__claws--right
    bottom -6%
    left 25%
    height 22%
    width 57%
    background black
    $clip = polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0)
    -webkit-clip-path $clip
    clip-path $clip
    &:after
      height 100%
      width 100%
      content ''
      background white
      $clip = polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0)
      -webkit-clip-path $clip
      clip-path $clip
      transform-origin top center
      transform scaleY(0.85) scaleX(0.85)

  &__left-foot
    height 34%
    width 29%
    bottom 0
    left 2.5%

  &__left-foot-foot
    height 100%
    width 100%
    top 0
    left 0
    background var(--belly)
    border-radius 60% 40% 55% 40%/60% 45% 55% 40%
    border calc(2 * (var(--unit))) solid black
    overflow hidden

    &:after
    &:before
      content ''

    &:after
      border calc(2 * var(--unit)) solid black
      height 38%
      width 49%
      border-radius 50%
      background var(--foot)
      left 38%
      bottom 11%
      transform rotate(-36deg)

    &:before
      background var(--dark-belly)
      height 73%
      width 100%
      left 32%
      bottom 0
      transform-origin left center
      border-radius 61% 20% 20% 37%/73% 50% 50% 50%
      transform rotate(10deg)

  &__foot-claw
    top 50%
    left 50%
    width 20%
    height 30%

    &:after
      content ''
      background var(--claws)
      bottom 12%
      height 35%
      width 67%
      left 15%
      border-radius 50%

    &:before
      content ''
      bottom 2%
      left 0
      width 100%
      height 56%
      border-radius 50%
      background var(--claws)
      border calc(3 * var(--unit)) solid black

    & > div
      width 100%
      height 66%
      top 0
      left 0
      background black
      $clip = 'polygon(0 100%, %s 0, 100% 100%)' % calc(var(--clip-point) * 1%)
      -webkit-clip-path $clip
      clip-path $clip

      &:after
        content ''
        height 100%
        width 100%
        background var(--claws)
        bottom 0
        left 0
        transform-origin bottom center
        transform scale(0.7)
        $clip = 'polygon(0 100%, %s 0, 100% 100%)' % calc(var(--clip-point) * 1%)
        -webkit-clip-path $clip
        clip-path $clip

    &--one
      --clip-point 65
      left -5%
      top 52%
      transform rotate(-90deg)
      width 15%
      height 23%

    &--two
      --clip-point 50
      top 9%
      left 3%
      height 26%
      transform rotate(-45deg)

    &--three
      --clip-point 20
      top -10%
      left 34%
      width 21%
      height 25%

    &--four
      --clip-point 20
      top -18%
      left 49%
      width 21%
      height 34%
      transform rotate(45deg)
    &--five
      --clip-point 50
      top 0%
      left 78%
      width 21%
      height 31%
      transform rotate(40deg)
    &--six
      --clip-point 50
      top 37%
      left 95%
      width 19%
      height 27%
      transform rotate(90deg)

  &__right-foot
    bottom 0
    right 6.5%
    width 28%
    height 35%
  &__right-foot-foot
    height 100%
    width 100%
    border calc(2 * var(--unit)) solid black
    background var(--belly)
    overflow hidden
    border-radius 50% 50% 50% 50% / 50% 45% 55% 50%

    &:before
    &:after
      content ''
      bottom 0

    &:before
      left 5%
      border-radius 50%
      height 62%
      width 77%
      background var(--dark-belly)

    &:after
      left 10%
      border-radius 50%
      border calc(2 * var(--unit)) solid #000
      bottom 14%
      height 42%
      background var(--foot)
      width 55%