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

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

CSS

              
                /* 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%
              
            
!

JS

              
                // Nothing to see here 👀
              
            
!
999px

Console