Linn's Desk

index.jade

main
  .cup
    .ear
    .coffee
    .spill
      .highlight
      .highlight
      .highlight
      

Linns-Desk.markdown

Linn's Desk

This pen shows a orange coffee mug filled with coffee. Next to the mug is some spilled coffee. Inside the mug are animated ripples.

This could be used as a loader, but since that is not my intention—not sure about the original designer intentions—I have not implemented any relevant code for that purpose. If you do however want to use this as a loader, please have a look at one of my other loaders for accessibility features; e.g. correct markup.

Thanks

CSS rendition of “My Desk” by the talented Linn Fritz. Please visit her portfolio for more excellent work.

A Pen by Michiel Bijl on CodePen.

License.

script.js

// https://dribbble.com/shots/1702943-My-Desk

style.scss

$background-colour:    #2ba4a7;

$cup-outer-size:       230px;
$cup-layer-width:      14px;
$cup-inner-size:       ($cup-outer-size - $cup-layer-width * 2);

$cup-outer-colour:     #ffa951;
$cup-inner-colour:     #fc9c45;
$cup-shadow-colour:    #e49848;

$ear-width:     62px;
$ear-height:    55px;
$ear-depth:     ($cup-layer-width * 2);

$coffee-inner-colour:  #3f2517;
$coffee-middle-colour: #432719;
$coffee-outer-colour:  #3c2316;

$coffee-highlight:     #77665d;
$coffee-dribb:         #5e3624;

$dribb-animation-duration: 3s;


.cup {
  position: relative;
  padding: $cup-layer-width;
  width: $cup-outer-size;
  height: $cup-outer-size;
  border: $cup-layer-width solid $cup-outer-colour;
  border-radius: 100%;
  background-color: $cup-inner-colour;
  
  // Highlight
  &::before {
    $hightlight-size: ($cup-inner-size - ($cup-layer-width * 3.5));
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: $hightlight-size;
    height: $hightlight-size;
    border-radius: 100%;
    border: 3px solid transparent;
    border-left-color: $coffee-highlight;
    transform: translate(-50%, -50%) rotate(-45deg);
    content: '';
  }
}

.ear {
  position: absolute;
  top: 50%;
  left: $cup-inner-size;
  z-index: -1;
  transform: translateY(-50%) rotate(-40deg);
  transform-origin: (0-($cup-inner-size / 2)) 50%;
  
  width: $ear-width;
  height: $ear-height;
  overflow: hidden;
  background-color: $cup-outer-colour;
  
  // Ear shadow
  &::before {
    $ear-shadow-size: ($cup-outer-size + $cup-layer-width);
    display: block;
    position: absolute;
    top: 50%;
    right: 100%;
    width: $ear-shadow-size;
    height: $ear-shadow-size;
    border-radius: 100%;
    transform: translateX($ear-depth) translateY(-50%);
    background-color: $cup-shadow-colour;
    content: '';
  }
}

.coffee {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow:
    inset 0 0 0 $cup-layer-width $coffee-outer-colour,
    inset 0 0 0 ($cup-layer-width * 2) $coffee-middle-colour;
  background-color: $coffee-inner-colour;
  
  // Dribbs
  &::before,
  &::after {
    display: block;
    position: absolute;
    top: $cup-layer-width;
    left: $cup-layer-width;
    width: 83.90804598%;
    height: 83.90804598%;
    box-shadow: inset 0 0 0 ($cup-layer-width / 3) $coffee-dribb;
    border-radius: 100%;
    opacity: 0;
    transform-origin: 50% 50%;
    animation: dribb ease-out infinite $dribb-animation-duration;
    content: '';
  }
  
  &::after {
    animation-delay: ($dribb-animation-duration / 2);
  }
}

.spill {
  position: absolute;
  bottom: -90px;
  left: 100%;
  z-index: -1;
  width: 22px;
  height: 22px;
  background-color: $coffee-outer-colour;
  border-radius: 100%;
  box-shadow: 
    -53px -28px 0 5px $coffee-outer-colour,
    -20px -150px 0 28px $coffee-outer-colour,
    -80px -85px 0 28px $coffee-outer-colour,
    -20px -90px 0 35px $coffee-outer-colour;
  
  .highlight {
    position: absolute;
    border: 2px solid transparent;
    border-left-color: $coffee-highlight;
    border-radius: 100%;
    transform: rotate(-45deg);
    
    &:nth-child(1) {
      top: 50%;
      left: 50%;
      width: 18px;
      height: 18px;
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    
    &:nth-child(2) {
      top: -31px;
      left: -56px;
      width: 28px;
      height: 28px;
    }
    
    &:nth-child(3) {
      bottom: 65px;
      left: -33px;
      width: 40px;
      height: 40px;
      border-width: 3px;
      transform: rotate(-70deg);
    }
  }
}

@keyframes dribb {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  
  60% {
    opacity: .7;
  }
  
  80%, 100% {
    transform: scale(1);
    opacity: 0;
  }
}

// Unimportant bits
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $background-colour;
}