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++
View Compiled
*
  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)
View Compiled
const restart = () => {
  const MARKUP = document.body.innerHTML
  document.body.innerHTML = ''
  requestAnimationFrame(() => (document.body.innerHTML = MARKUP))
}
document.body.addEventListener('click', restart)
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.