DEV Community

loading...
Cover image for How to draw a banana with CSS

How to draw a banana with CSS

isarisariver profile image Marian ・4 min read

Hi. My name is Marian and this is my first post on dev.to! I wanted to start with something light, so here is a floating banana made only with Html and CSS.

banana

The Background

To get started I first added a blue background to the page and added a container to be able to position the banana.

Html

  <div class="page">
    <div class="container">
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

CSS

.page {
  width: 960px;
  padding: 50px 50px;
  margin: 30px auto;
  border-radius: 2%;
  background-color: #81e4e4;     /*light blue*/
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.container {
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

The Body

The body of the banana consists of two rectangles with rounded borders.

One of the rectangles is yellow and forms the body of the banana, the other has the same color as the background and creates the bend of the banana.

Both rectangles have width=0. What we see on the screen is only the border.

(For illustration I changed the color of the outline to black in the screenshot).

Alt Text

Html

<div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
      </div>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

CSS

.container {
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
}

.banana {
  height: 500px;
  width: 500px;
  top: 80px;
  position: relative;
}

.banana-body {
  height: 80%;
  width: 0px;
  top: 50px;
  left: 160px;
  border-right: 180px solid #ecec13;    /* yellow */
  border-radius: 0 150px 150px 0%;
  position: absolute;
  transform: rotate(15deg);
}

.banana-outline {
  height: 120%;
  width: 0px;
  top: -20px;
  left: -50px;
  border-top: 30px solid transparent;
  border-right: 120px solid #81e4e4;  /* light blue  */
  border-radius: 0 120px 120px 0%;
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

The Eyes

The eyes consist of two big white circles and two small black circles.

Alt Text

Html

<div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
        <div class="banana-eyes">
          <div class="banana-left-eye"></div>
          <div class="banana-right-eye"></div>
        </div>
      </div>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

CSS

.banana-left-eye {
  width: 90px;
  height: 90px;
  border: 5px solid #e6e619;      /* yellow */
  background: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  top: 180px;
  left: 200px;
}

.banana-left-eye::after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  width: 35px;
  height: 35px;
  left: 30px;
  top: 30px;
}

.banana-right-eye {
  width: 90px;
  height: 90px;
  border: 5px solid #e6e619;      /* yellow */
  background: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  top: 180px;
  left: 290px;
}

.banana-right-eye::after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  width: 35px;
  height: 35px;
  left: 30px;
  top: 30px;
}
Enter fullscreen mode Exit fullscreen mode

The Mouth

The mouth is another rectangle with rounded border.
Alt Text

Html

  <div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
        <div class="banana-eyes">
          <div class="banana-left-eye"></div>
          <div class="banana-right-eye"></div>
        </div>
        <div class="banana-mouth"></div>
      </div>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

CSS

.banana-mouth {
  width: 30px;
  height: 20px;
  border-radius: 0 0 5em 5em;
  border-bottom: 5px solid #675340; /* dark outline */
  border-right: 5px solid #675340; /* dark outline */
  border-left: 5px solid #675340; /* dark outline */
  position: absolute;
  left: 270px;
  top: 270px;
}
Enter fullscreen mode Exit fullscreen mode

The banana ends

The banana doesn't look very banana-ey yet, so let's also add top- and bottom end.

Alt Text

Html

  <div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
        <div class="banana-end"></div>
        <div class="banana-top"></div>
        <div class="banana-eyes">
          <div class="banana-left-eye"></div>
          <div class="banana-right-eye"></div>
        </div>
        <div class="banana-mouth"></div>
      </div>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

CSS

.banana-end {
  width: 10px;
  height: 15px;
  border-radius: 0 0 3em 3em;
  background: #996633;            /* brown */
  position: absolute;
  transform: rotate(65deg);
  bottom: 60px;
  left: 160px;
}

.banana-top {
  width: 35px;
  height: 12px;
  background: #4d9933;            /* green */
  position: absolute;
  transform: rotate(25deg);
  border-radius: 50% 0 0 50%;
  top: 33px;
  left: 210px;
}
Enter fullscreen mode Exit fullscreen mode

Make it float!

Since the banana floats above the ground, we should add a shadow. It's hard to be completely still while floating, so let's also animate it.

Alt Text

Html

  <div class="page">
    <div class="container">
      <div class="banana">
        <div class="banana-body">
          <div class="banana-outline"></div>
        </div>
        <div class="banana-end"></div>
        <div class="banana-top"></div>
        <div class="banana-eyes">
          <div class="banana-left-eye"></div>
          <div class="banana-right-eye"></div>
        </div>
        <div class="banana-mouth"></div>
      </div>
      <div class="banana-float"></div>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

CSS

/* we created this class at the beginning and only have to add the new items here */
.banana { 
  height: 500px;
  width: 500px;
  top: 80px;
  position: relative;
  animation-name: float; /* NEW */ 
  animation-duration: 5s; /* NEW */
  animation-iteration-count: infinite; /* NEW */
  animation-timing-function: ease; /* NEW */
}
.banana-float {
  width: 350px;
  height: 10px;
  border-radius: 50%;
  background-color: #868679;
  position: relative;
  top: 330px;
  left: -150px;
}

@keyframes float {
  0%, 100% {
    top: 80px;
  }

  50% {
    top: 70px;
  }
}
Enter fullscreen mode Exit fullscreen mode

BONUS - Animate the eyes

Let's also animate the eyes to make it look even more silly.

Alt Text

CSS

/* add the animation to the eyes*/
.banana-right-eye::after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  width: 35px;
  height: 35px;
  left: 30px;
  top: 30px;
  animation: eyes 2s infinite; /* NEW */
}
.banana-left-eye::after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  width: 35px;
  height: 35px;
  left: 30px;
  top: 30px;
  animation: eyes 2s infinite; /* NEW */
}

@keyframes eyes {

  0%, 50%, 100% {
    left: 30px;
  }

  25% {
    left: 20px;
  }

75% {
  left: 40px;
}

}
Enter fullscreen mode Exit fullscreen mode

One Last Thing

If you made it until here, well done and thank you so much!
I originally made this when I started coding and wanted to get better at CSS. I even created a repository on GitHub at the time to collect my drawings. https://github.com/mrnbck/drawing-with-css

Whether you are new to web development or just enjoy drawing with CSS, I would love to see more contributions to the repo. If you are not finished with Hacktoberfest yet, it might even count towards your Pull Requests :)

Discussion (13)

pic
Editor guide
Collapse
jfbrennan profile image
Jordan Brennan • Edited

It's 2020, shoulda used React with react-canvas plus Redux to manage the eye state and Next.js for SSR 😜

Collapse
aftabksyed profile image
Aftab Syed

Love the CSS banana 🍌 Specially the eye animations 👀

Collapse
jana profile image
Jana

I just started to learn css and I would NEVER imagine that you could use it to draw. It is just amazing

Collapse
isarisariver profile image
Marian Author

Yes, it's amazing. I thought exactly the same when I saw something like this for the first time! It helped me so much to get used to CSS and all the different properties. Search for "pure css" on Codepen for much, much better examples of what can be done with CSS. I love this one codepen.io/miocene/pen/mjLPVp

Collapse
jana profile image
Jana

Thank you for your dancing banana

Collapse
andrewgilliland profile image
Andrew Gilliland

I love bananas! Thank you for making this delightful css creation.

Collapse
andrewchmr profile image
Andriy Chemerynskiy

But can you do it in a single div? ( ͡° ͜ʖ ͡°)

Collapse
isarisariver profile image
Marian Author

I'll have to google it ( ͡~ ͜ʖ ͡°)

Collapse
sirjson profile image
Raffael Zica

Since we have the technology for a banana, when will we finally be able to do this in CSS? media.giphy.com/media/qr093KEQQE5T...

Collapse
isarisariver profile image
Marian Author

I'd love to see that. Shouldn't be too hard :)

Collapse
luxhy profile image
luxhy

Um can you follow me on code pen @luxhy so you can teach me how to do that

Collapse
isarisariver profile image
Marian Author

Hi @luxhy I added it to Codepen, hope that helps :)
codepen.io/mrnbck/pen/MWebRZX

Collapse
luxhy profile image
luxhy

Thank you i appreciate that