A slice of cake?

a-slice-of-cake.markdown

A slice of cake?

CSS Drawing : SASS loop and a choco bunny

A Pen by bona on CodePen.

License.

index.pug

.artboard
  .cake
    .deco
      .bunny
        - for (var e = 0; e < 2; e++)
          .eye
        .mouth
    .marmelade
      - for (var x = 0; x < 15; x++)
        .marmelade--bar
    .light
    .basement
      .text One year with you
      .base

style.scss

//FONTS
@import url('https://fonts.googleapis.com/css?family=Vibur');
$font-primary: 'Vibur', cursive;

// COLORS
$white: #fff;
$light-grey: #fafaf2;
$black: #000;
$almond: #FFECCC;
$ruby: #A4303F;
$choco: #9F7E69;
$vanilla: #D2BBA0;

// SETS
$w-board: 400px;
$h-board: 350px;


// GENERAL
*, *::before, *::after{
  box-sizing: border-box;
}
body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: $font-primary;
  background-color: $almond;
}

.artboard{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: $w-board;
  height: $h-board;
  padding-top: 10rem;
}



// DRAWING STYLES

.cake{
  z-index: 2;
  position: relative;
  width: 300px;
  height: 120px;
  background: $vanilla;
  &::before, &::after{
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 15px;
  }
  &::before{
    top: 56%;   
    background: rgba($ruby, .3);
  }
  &::after{
    top: 77%;
    background: $choco;
  }
  
  .deco{
    position: relative;
    &::before{
      z-index: 1;
      content: '';
      position: absolute;
      top: -75px;
      left: 50%;
      transform: translateX(-50%);
      height: 50px;
      width: 50px;
      background: $white;
      border-radius: 50%;
      box-shadow: -40px 0 0 0 $white,
                   40px 0 0 0 $white,
                  -80px 0 0 0 $white,
                   80px 0 0 0 $white;
    }
    .bunny{
      content: '';
      position: absolute;
      bottom: 52px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 60px;
      background: $choco;
      border-radius: 50%;
      opacity: 1;
      &::before, &::after{
        content: '';
        top: -40px;
        position: absolute;
        width: 15px;
        height: 50px;
        background: inherit;
        transform-origin: bottom center;
        border-radius: 50% 50% 0 0;
      }
      &::before{
        left: 10px;
        transform: rotate(-20deg);
        animation: greetSx 6s infinite;
      }
      &::after{
        right: 10px;
        transform: rotate(20deg);
        animation: greetDx 6s infinite;
      }
      
      .eye{
        position: absolute;
        top:12px;
        width: 10px;
        height: 18px;
        background: rgba($vanilla, .7);
        border-radius: 50%;
        &:nth-child(1){
          left: 15px;
        }
        &:nth-child(2){
          right: 15px;
        }
        &::before, &::after{
          content: '';
          position: absolute;
        }
        &::before{
          top: 4px;
          left: 1px;
          width: 6px;
          height: 6px;
          background: $almond;
          border-radius: 50%;
        }
        &::after{
          top: 10px;
          right: 1px;
          width: 4px;
          height: 4px;
          background: $almond;
          border-radius: 50%;
        }
      }
      
      .mouth{
        position: absolute;
        top: 33px;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 3px;
        background: rgba($vanilla, .7);
        border-radius: 50%; 
      }
    }
  }
  
  .marmelade{
    z-index: 2;
    position: absolute;
    left: 0;
    top: -50px;
    width: 100%;
    background: $vanilla;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    &--bar{
      display: block;
      float: left;
      width: 6.66666667%;
      background: rgba($ruby, .6);
      border-radius: 0 0 12px 12px;
    }
    // LOOP
    @for $i from 1 through 15{
      //INTERPOLATION
      &--bar:nth-child(#{$i}){
        // random() returns a value between
        // 1 and the parameter passed.
        // Here i added 29 to have a min
        // value of 30px and a max of 100px
        $randHeight: random(71) + 29; 
        
        // Different delay for fall animation
        $del: ($i * 0.1) + s;
        
        //SASS CONDITIONALS
        // Set element's random height 
        // the random value is > 80
        @if $randHeight > 80 {
          position: relative;
          height: $randHeight + px;
          transform: translateY(-48%);
          animation: fall 5s $del linear forwards; 
        }
        @else{
          height: 50px;
          border-radius: 0;
          position: relative;
          &::before{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px;
            background: $vanilla;
            border-radius: 18px 18px 0 0;
          }
        }
      }
    }
  }
  
  .basement{
    position: absolute;
    bottom: -25px;
    left: -2rem;
    right: -2rem;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: $white;
    border-radius: 0 0 6px 6px;
    &::before{
      content: '';
      position: absolute;
      left: 0;
      top: 105px;
      width: 100%;
      height: 1px;
      background: rgba($choco, .25);
    }
    .text{
      color: rgba($ruby, .6);
    }
    .base{
      position: absolute;
      width: 40px;
      height: 80px;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: $light-grey;
      &::before, &::after{
        position: absolute;
        top: 0;
        content: '';
      }
      &::before{
        left: -40px;
        border-bottom: 20px solid $light-grey;
        border-top: 60px solid transparent;
        border-right: 10px solid $light-grey;
        border-left: 30px solid transparent;
      }
      &::after{
        right: -40px;
        border-bottom: 20px solid $light-grey;
        border-top: 60px solid transparent;
        border-left: 10px solid $light-grey;
        border-right: 30px solid transparent;
      }
    }
  }
}




// ANIMATIONS

@keyframes fall {
  from{
    transform: translateY(-48%);
  }
  to{
    transform: translateY(0);
  }
}

@keyframes greetSx{
  0%{
    transform: rotate(-20deg);
  }
  10%{
    transform: rotate(-20deg);
  }
  12%{
    transform: rotate(-10deg);
  }
  14%{
    transform: rotate(-20deg);
  }
  16%{
    transform: rotate(-10deg);
  }
  18%{
    transform: rotate(-20deg);
  }
  100%{
    transform: rotate(-20deg);
  }
}
@keyframes greetDx{
  0%{
    transform: rotate(20deg);
  }
  10%{
    transform: rotate(20deg);
  }
  12%{
    transform: rotate(10deg);
  }
  14%{
    transform: rotate(20deg);
  }
  16%{
    transform: rotate(10deg);
  }
  18%{
    transform: rotate(20deg);
  }
  100%{
    transform: rotate(20deg);
  }
}