CodePen Embed - Mood Swing


<div class="container">
  
  <div class="sun"></div>
  
  <div class="bumps">
    <div class="inner">
      <div class="bump"></div>
      <div class="bump"></div>
      <div class="bump"></div>
      <div class="bump"></div>
    </div>
  </div>
  
  <div class="character">
    
    <div class="head">
      <div class="eye"></div>
      <div class="eye"></div>
      <div class="mouth">
        <svg class="mouth-shadow" viewbox="0 0 140 70">
          <path d="M0.719238 10.072C0.593337 9.19833 0.90809 11.3826 0.902179 11.3388C0.171209 5.92824 5.26432 0.0485929 10.7239 0.000389747C10.768 0 9.65972 0 10.103 0C10.7062 0 11.0078 0 11.0427 0.000243102C16.4269 0.037787 19.5259 2.52743 20.7228 7.77705C20.7305 7.81105 20.8785 8.48175 21.1745 9.82315C26.1201 32.2342 46.1021 49 70 49C93.8979 49 113.88 32.2342 118.825 9.82314C119.121 8.48175 119.269 7.81105 119.277 7.77706C120.474 2.52743 123.573 0.0377857 128.957 0.000243085C128.992 0 129.294 0 129.897 0C130.34 0 129.232 0 129.276 0.00038972C134.736 0.0485912 139.829 5.92824 139.098 11.3388C139.092 11.3826 139.407 9.19831 139.281 10.072C134.398 43.9598 105.24 70 70 70C34.7603 70 5.6025 43.9598 0.719238 10.072Z"></path>
        </svg>
        <svg class="flipper" viewbox="0 0 140 70">
          <path d="M0.719238 10.072C0.593337 9.19833 0.90809 11.3826 0.902179 11.3388C0.171209 5.92824 5.26432 0.0485929 10.7239 0.000389747C10.768 0 9.65972 0 10.103 0C10.7062 0 11.0078 0 11.0427 0.000243102C16.4269 0.037787 19.5259 2.52743 20.7228 7.77705C20.7305 7.81105 20.8785 8.48175 21.1745 9.82315C26.1201 32.2342 46.1021 49 70 49C93.8979 49 113.88 32.2342 118.825 9.82314C119.121 8.48175 119.269 7.81105 119.277 7.77706C120.474 2.52743 123.573 0.0377857 128.957 0.000243085C128.992 0 129.294 0 129.897 0C130.34 0 129.232 0 129.276 0.00038972C134.736 0.0485912 139.829 5.92824 139.098 11.3388C139.092 11.3826 139.407 9.19831 139.281 10.072C134.398 43.9598 105.24 70 70 70C34.7603 70 5.6025 43.9598 0.719238 10.072Z"></path>
        </svg>
      </div>
    </div>
    
  </div>
</div>

/* Colours */
$penbackground: #377771
$cardBackground: #FFC9AD
$cardBackgroundDarker: #FFAD85
$ground: #FF8E72
$groundDarker: #FF6C47
$characterHead: #377771
$characterBorder: #204642
$mouth: #F08080
$mouthDark: #CD6E6E

/* Sizes */
$containerWidth: 380px
$containerHeight: 500px
$groundNodeWidth: 250px
$groundNodeHeight: 300px
$circleOffset: 50px
$characterSize: 150px
$borderRadius: 20px
$eyeRadius: 45px
$pupilRadius: 15px
$sunRadius: 200px


/* Positions */
$groundNodesStartX: -($groundNodeWidth - ($containerWidth / 3) + ($groundNodeWidth / 2) + $borderRadius)
$groundNodesEndX: $groundNodesStartX - $groundNodeWidth


/* Timings */
$cycleDuration: 3s


/* Main stage sylings */
html, body
  margin: 0
  padding: 0
  width: 100%
  height: 100%
  box-sizing: border-box

body 
  display: flex
  align-items: center
  justify-content: center
  background-color: $penbackground


.container 
  -webkit-mask-image: -webkit-radial-gradient(white, black)
  display: flex
  background-color: $cardBackground
  position: relative
  width: 380px
  height: 500px
  border-radius: 20px
  overflow: hidden
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
  animation: DayCycle 3s infinite cubic-bezier(0.41, 0.15, 0.64, 0.91) -1s
  
  
/* Custom animations */
@keyframes GroundLoop 
  from 
    left: $groundNodesStartX
  to 
    left: $groundNodesEndX

@keyframes CharacterSway
  0%
    transform: translate(0, 0)
  55%
    transform: translate($groundNodeWidth / 2, 0)
  100%
    transform: translate(0, 0)
 
@keyframes CharacterMotion
  10%
    bottom: 0
  27.5%
    bottom: -65px
  50%
    bottom: 0
  
@keyframes SwitchThatMood
  0%
    transform: rotate(-12deg) scaleY(1)
  60%
    transform: rotate(195deg) scaleY(1)
  85%
    transform: rotate(167deg) scaleY(0.8)
  90%
    transform: rotate(168deg) scaleY(-1)
  92%
    transform: rotate(168deg) scaleY(-0.8)
  93.5%
    transform: rotate(168deg) scaleY(-1)
  95% 
    transform: rotate(168deg) scaleY(-0.9)
  97.5%
    transform: rotate(168deg) scaleY(-1)
  98% 
    transform: rotate(168deg) scaleY(-0.95)
  98.25%
    transform: rotate(168deg) scaleY(-1)
  99.25%
    transform: rotate(168deg) scaleY(-0.98)
  100%
    transform: rotate(168deg) scaleY(-1)
    
@keyframes MouthColours
  60%
    fill: $mouth
  85%
    fill: $mouthDark
  86%
    fill: $mouth

@keyframes EyeMove
  0%
    transform: rotate(0deg)
  60%
    transform: rotate(720deg)
  85%
    transform: rotate(680deg)
  100%
    transform: rotate(720deg)
 
@keyframes SunMove
  from
    transform: translate(0, 0) rotate(90deg)
  to
    transform: translate(-$containerWidth - $sunRadius, 0) rotate(-90deg)
  
  
@keyframes DayCycle
  0%
    background-color: $cardBackgroundDarker
  50%
    background-color: $cardBackground
  100%
    background-color: $cardBackgroundDarker

@keyframes GroundColourCycle
  0%
    background-color: $groundDarker
  50%
    background-color: $ground
  100%
    background-color: $groundDarker

  
/* ...the rest */
.sun
  position: absolute
  top: -$sunRadius / 1.5
  right: -$sunRadius
  width: $sunRadius
  height: $sunRadius
  background-color: #FAFF70
  border-radius: 50%
  opacity: 0.5
  transform-origin: center bottom
  animation: SunMove 3s infinite cubic-bezier(0.41, 0.15, 0.64, 0.91) -1s

.bumps 
  position: absolute
  bottom: 0
  left: 0
  width: 100%
  height: 100%
  overflow: hidden

.inner 
  position: absolute
  bottom: -($groundNodeHeight / 3)
  left: $groundNodesStartX
  display: inline-flex
  white-space: nowrap
  animation: GroundLoop $cycleDuration linear infinite

.bump 
  position: relative
  width: $groundNodeWidth
  height: $groundNodeHeight
  background-color: $ground
  animation: GroundColourCycle $cycleDuration infinite cubic-bezier(0.41, 0.15, 0.64, 0.91) -1s
  
  &::after 
    content: ''
    width: $groundNodeWidth + $circleOffset
    height: $groundNodeWidth + $circleOffset
    position: absolute
    background-color: $cardBackground
    border-radius: 50%
    top: -50%
    left: -50%
    animation: DayCycle $cycleDuration infinite cubic-bezier(0.41, 0.15, 0.64, 0.91) -1s
  
.character 
  position: absolute
  width: $characterSize
  height: $characterSize
  bottom: 115px
  left: ($containerWidth / 3) - ($characterSize / 2) - $borderRadius
  
.head 
  width: 100%
  height: 100%    
  position: absolute
  bottom: 0
  left: 0
  border-radius: 50%
  background-color: $characterHead
  border: $borderRadius solid $characterBorder
  box-shadow: inset -10px 0 0 rgba(0, 0, 0, 0.1)
  animation: CharacterSway $cycleDuration infinite cubic-bezier(0.4, -0.01, 0.65, 0.97), CharacterMotion $cycleDuration infinite cubic-bezier(0.76, 0.32, 0.17, 0.85)
    
.mouth
  position: absolute
  width: 90%
  height: 50%
  border-radius: 30px
  top: 50%
  left: 50%
  transform: translateX(-50%)

svg.mouth-shadow
  width: 100%
  height: 95%
  position: absolute
  top: 17%
  animation: SwitchThatMood $cycleDuration infinite cubic-bezier(0.4, -0.01, 0.65, 0.97), MouthShadowOpacity $cycleDuration cubic-bezier(0.4, -0.01, 0.65, 0.97)
  transform-origin: center top
    
  path
    fill: rgba(0, 0, 0, 0.1)
  
svg.flipper
  width: 100%
  height: 95%
  animation: SwitchThatMood $cycleDuration infinite cubic-bezier(0.4, -0.01, 0.65, 0.97)
  transform-origin: center top

  path
    width: 100%
    height: 100%
    fill: $mouth
    animation: MouthColours $cycleDuration infinite cubic-bezier(0.4, -0.01, 0.65, 0.97)
  
.eye
  width: $eyeRadius
  height: $eyeRadius
  border-radius: 50%
  background: linear-gradient(#F9F7F3, #eae4d6)
  position: absolute
  top: -$eyeRadius - 5px
  left: calc(50% - #{$eyeRadius})
  
  &::after
    content: ''
    position: absolute
    width: 10px
    height: 10px
    background-color: #204642
    border-radius: 50%
    left: calc(50% - 5px)
    top: calc(50% - 5px)
    transform-origin: 40% 60%
    animation: EyeMove $cycleDuration infinite
    
  &:nth-child(2)
    left: 50%
    
    &::after 
      transform-origin: 30% 30%

View Compiled

// Nothing to see here 👀

This Pen is owned by Alexander Mold on CodePen.

See more by @alexjmold on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.