estherjan

Illustrations for Breakfast

During the first week of Creative Code Immersive, we've been learning the basics of HTML, CSS and a bit of Javascript. The workshop assignment for the first week is to draw out a triptych with a topic of our own choice, and we can decide whether or not the drawings will be sequential.

Breakfast Triptych created by me.

I started brainstorming during breakfast, and while nibbling off my Nutella toast, I came across this tutorial on Youtube, animating a toaster in CSS and HTML. Staring at the tutorial on the screen, and my Nutella toast in the plate, I decided to create a sequential triptych with my breakfast art the main theme, and quickly sketched out my idea.

Quick concept sketch on my notebook

The first couple lines of code were actually hard to set up the environment. I kept on getting confused in positioning the three canvases. In the end, I used the "column" function in CSS.

At first, I wanted the countertop to be checkered, but realized I couldn't draw it out, so went on to create it in stripes. The tutorial here about CSS stripes helped me a lot to weave the three panels together.

After the three-panel-environment was set up, the rest were pretty easy to draw out, I just have to keep on adjusting the positions since I'm using positioning-absolute all the way through the illustrations. (The code is quite long, so I'm placing them at the bottom of this blogpost)

When all the illustrations were mostly created, I started to work on the animations. The "transform:rotate" was very helpful in making elements spin and rotate.

Final production of the Breakfast Triptych

See it in CodePen

body {
  margin: 0;
  padding: 0;
}

.collumnfirst {
  width: 360px;
  float: left;
  height: 500px;
  margin: 10px;
  background-color: #B1BFE2;
}

.collumnsecond {
  width: 360px;
  height: 500px;
  float: left;
  margin: 10px;
  background-color: #95B4AE;
}

.collumnthird {
  width: 360px;
  height: 500px;
  float: left;
  margin: 10px;
  background-color: #DE907D;
}

/*Table*/
.vertical-stripes {
            background: repeating-linear-gradient( 
            90deg,
            #F9F7E9,
              #F9F7E9 20px,
            #454B66 20px,
            #454B66 25px);
            height: 150px;
            width: 360px;
  position: relative;
  top: 300px;
        }

/*Tea*/
.cup {
  position: absolute;
  margin: 10px;
  width: 90px;
  height: 130px;
  top:280px;
  left: 140px;
  border-radius: 40px 40px 40px 40px;
  background-color: #DE907D;
}

.mugshadow {
  position: absolute;
  margin: 10px;
  width: 120px;
  height: 60px;
  top:370px;
  left: 140px;
  border-radius: 60px 60px 60px 60px;
  opacity: 0.5;
  background-color: black;
}

.handle {
  position: absolute;
  margin: 10px;
  width: 30px;
  height: 30px;
  top:320px;
  left: 200px;
/*   border-radius: 40px 40px 40px 40px; */
  border: 1em solid #DE907D;
}

.liquid {
  position: absolute;
  margin: 10px;
  width: 70px;
  height: 45px;
  top:290px;
  left: 150px;
  border-radius: 90px 90px 60px 70px;
  background-color: white;
  animation: 6s teadone infinite;
}

@keyframes teadone {
  90% {
    opacity: 0.5;
    background-color: #F7D49D;
  }
  95% {
    background-color: #F7D49D;
  }
}

.teabag {
  position: absolute;
  margin: 10px;
  width: 40px;
  height: 50px;
  top:60px;
  left: 170px;
  transform: skew(20deg, -40deg);
  background-color: #F9F7E9;
  animation: 6s drop infinite;
}

.teabagshadow {
  position: absolute;
  margin: 10px;
  width: 40px;
  height: 50px;
  top:65px;
  left: 175px;
  transform: skew(20deg, -40deg);
  background-color: #AFAFAF;
  animation: 6s drop infinite;
}

@keyframes drop{
  50% {
    transform: translateY(290px);
  }
}

.tealeaves {
  position: absolute;
  margin: 10px;
  width: 20px;
  height: 30px;
  top:150px;
  left: 300px;
  transform: skew(20deg, -40deg);
  background-color: #DE907D;
}

.cupcover {
  position: absolute;
  margin: 10px;
  width: 90px;
  height: 80px;
  top:335px;
  left: 140px;
  border-radius: 0px 0px 40px 40px;
  background-color: #DE907D;
}

/*Toaster in the middle*/
.toaster {
  position: absolute;
  margin: 10px;
  width: 120px;
  height: 90px;
  top:300px;
  left: 480px;
  border-radius:25px 25px 0 0;
  background-color: #B1BFE2;
}

.cover{
  position: absolute;
  margin: 10px;
  width: 120px;
  height: 90px;
  top:300px;
  left: 520px;
  border-radius:25px 25px 0 0;
  background-color: #454B66;
}

.toastershadow {
  position: absolute;
  margin: 10px;
  width: 180px;
  height: 50px;
  top:380px;
  left: 480px;
  border-radius:25px 25px 25px 25px;
  opacity: 0.5;
  background-color: black;
}

.b1, .b2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:#F9F7E9;
  position: absolute;
}
.b1 {
    top:25px;
  left: 55px;
}

.b2 {
  top:40px;
  left: 55px;
}

.button {
  position: absolute;
  width:15px;
  height: 15px;
  border-radius: 50%;
  border:2px solid white;
  background-color: #DE907D;
  top:56px;
  left: 51px;
}

.slot1{
  position:absolute;
  background-color:#AAAAAA;
  height: 50px;
  width: 8px;
  border-radius: 15px;
  top:25px;
  left: 130px;
}

.slot2{
  position:absolute;
  background-color:#AAAAAA;
  height: 50px;
  width: 8px;
  border-radius: 15px;
  top:25px;
  left: 145px;
}

.handle1{
  background-color: white;
  height: 5px;
  width:20px;
  position: absolute;
  left: 0.1px;
  animation: 6s move infinite;
}

@keyframes move{
  50% {
    transform: translateY(31px);
  }
}

.handle2{
  background-color: white;
  height: 5px;
  width:20px;
  position: absolute;
}

.l1, .l2, .l3, .l4{
  background-color: #AAAAAA;
  width:10px;
  height: 15px;
  border-radius: 0px 0px 15px 15px;
  position: absolute;
}

.l1{
  top: 90px;
  left: 5px;
}

.l2{
  top: 90px;
  left: 30px;
}

.l3{
  top: 90px;
  right: 5px;
}

.l4{
  top: 90px;
  right: 30px;
}

.base {
  background-color: #DE907D;
  width:120px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top 200px;
}

.toast{
  position: absolute;
  margin: 10px;
  width: 90px;
  height: 90px;
  top:230px;
  left: 520px;
  border-radius: 20px 20px 20px 20px;
  background-color: #F7D49D;
  animation: 6s fly infinite;
}

@keyframes fly {
  50% {
    transform: translateY(30px);
  }
  87% {
    transform: translateY (-100px);
  }
}


/* Tabletop */
.table-cloth {
            background: repeating-linear-gradient( 
            -45deg,
            #F9F7E9,
              #F9F7E9 20px,
            #454B66 20px,
            #454B66 25px);
            position: absolute;
            height: 450px;
            width: 360px;
        }

.plate {
  position: absolute;
  width: 250px;
  height: 250px;
  top:230px;
  right: 400px;
  border-radius: 50%;
  background-color: #454B66;
}

.plateshadow {
  position: absolute;
  width: 250px;
  height: 250px;
  top:240px;
  right: 390px;
  border-radius: 50%;
  opacity:0.5;
  background-color: black;
}

.toast2{
  position: absolute;
  margin: 10px;
  width: 120px;
  height: 120px;
  top:250px;
  right: 480px;
  transform: rotate(20deg);
  border-radius: 40px 40px 40px 40px;
  background-color: #F7D49D;
}
.jam2{
  position: absolute;
  margin: 10px;
  width: 100px;
  height: 100px;
  top:260px;
  right: 490px;
  transform: rotate(20deg);
  border-radius: 40px 40px 40px 40px;
  background-color: #DE907D;
  animation: 6s spread infinite;
}

@keyframes spread {
  50% {
    opacity: 0.2;
    transition: ease-in;
  }
}
.toast2{
  position: absolute;
  margin: 10px;
  width: 120px;
  height: 120px;
  top:250px;
  right: 480px;
  transform: rotate(20deg);
  border-radius: 40px 40px 40px 40px;
  background-color: #F7D49D;
}

.toast3{
  position: absolute;
  margin: 10px;
  width: 120px;
  height: 120px;
  top:320px;
  right: 440px;
  transform: rotate(60deg);
  border-radius: 40px 40px 40px 40px;
  background-color: #F2BB72;
}

.jam3{
  position: absolute;
  margin: 10px;
  width: 100px;
  height: 100px;
  top:330px;
  right: 450px;
  transform: rotate(60deg);
  border-radius: 40px 40px 40px 40px;
  background-color: #5E3F24;
  animation: 6s spread infinite;
}

.cupshadow {
  position: absolute;
  width: 100px;
  height: 100px;
  top:140px;
  right: 350px;
  border-radius: 50%;
  opacity:0.5;
  background-color: black;
}

.cuptop {
  position: absolute;
  width: 100px;
  height: 100px;
  top:120px;
  right: 360px;
  border-radius: 50%;
  background-color: #DE907D;
}

.handletop{
  position: absolute;
  width: 20px;
  height: 40px;
  top:130px;
  right: 350px;
  transform: rotate(60deg);
  background-color: #DE907D;
}

.tea {
  position: absolute;
  width: 80px;
  height: 80px;
  top:130px;
  right: 370px;
  border-radius: 50%;
  background-color: #F7D49D;
}

.spoon {
  position: absolute;
  width: 15px;
  height: 50px;
  top:150px;
  right:450px;
  transform: rotate(260deg);
  background-color: #AFAFAF;
  animation: 2s spin infinite;
}

@keyframes spin {
  rom {
        transform:rotate(250deg);
    }
    to {
        transform:rotate(270deg);
    }
}

// HTML code //

<div class="collumnfirst col1">
  <p style="text-align:center;" "font-family:courier;">Tea</p>
  <div class="vertical-stripes"></div>
  <div class="mugshadow"></div>
  <div class="handle"></div>
  <div class="cup"></div>
  <div class="liquid"></div>
  <div class="teabagshadow"></div>
  <div class="teabag"></div>
<!--   <div class="tealeaves"></div> -->
  <div class="cupcover"></div>
</div>


<div class="collumnsecond col2">
  <p style="text-align:center;" "font-family:courier;">Toast</p>
  <div class="vertical-stripes"></div>
  <div class="toastershadow"></div>
  <div class="toast"></div>
  <div class="cover">
    <div class="l3"></div>
    <div class="l4"></div>
  </div>
  <div class="toaster">
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="button"></div>
    <div class="slot1">
      <div class="handle2"></div>
    </div>
    <div class="slot2">
      <div class="handle1"></div>
    </div>
    <div class="l1"></div>
    <div class="l2"></div>
  </div>
</div>

<div class="collumnthird col3">
    <p style="text-align:center;" "font-family:courier;">Breakfast!</p>
    <div class="table-cloth"></div>
  <div class="plateshadow"></div>
  <div class="plate"></div>
  <div class="toast3"></div>
  <div class="jam3"></div>
  <div class="toast2"></div>
  <div class="jam2"></div>
  <div class="cupshadow"></div>
  <div class="cuptop"></div>
  <div class="handletop"></div>
  <div class="tea"></div>
  <div class="spoon"></div>
  </div>
</div>

Creative Code

ABOUT

Illustrations for Breakfast