Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                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++
              
            
!

CSS

              
                *
  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)
              
            
!

JS

              
                const restart = () => {
  const MARKUP = document.body.innerHTML
  document.body.innerHTML = ''
  requestAnimationFrame(() => (document.body.innerHTML = MARKUP))
}
document.body.addEventListener('click', restart)

              
            
!
999px

Console