How to make a 2D Piggy with CSS

[INTRODUCTION] Hi! You might have seen I’ve been building a new project – a farm made with Vue! On it, I’m trying to use HTML and CSS to create and style all farm items such as vegetables, fruits, animals, backgrounds and so much more. As the project has now progressed further, I am able to share how I’ve made some of them ?

Let’s see how to create a 2D piggy using only HTML and CSS:

• We need to imagine Piggy ? as a thing made up of other small things and try to plan how do they all fit nicely together. For example, we know our Piggy will have two eyes, two ears, one nose, two nostrills and so on..Once we’ve identified everything we need to build we can start adding HTML.
  

<div class="piggy">
<!-- PIGGY'S EARS -->
  <div class="ears">
     <div class="ear-left">  </div>
     <div class="ear-right">  </div>
   </div>

<!-- PIGGY'S HEAD -->
  <div class="head">

      <!-- PIGGY'S EYES-->
        <div class="eyes">
            <div class="eye-left"><div class="dot"> </div></div>
            <div class="eye-right"><div class="dot"> </div></div>
        </div>

       <!-- PIGGY'S NOSE -->
        <div class="nose">
          <div class="nostril-left"></div>
          <div class="nostril-right"></div>
       </div>
</div>

<!--PIGGY'S BODY -->
<div class="body"></div>

<!-- PIGGY'S FEET -->
<div class="feet">
     <div class='foot-left'></div>
     <div class='foot-right'></div>
</div>
</div>

After we planned out our HTML and we know what we need to build,
we can switch to adding some styling ✨

Let’s start with Piggy’s ears ?
Piggy has two ears so we’ve made a ‘left-ear’ and a ‘right-ear’ in our HTML.

  .ears {
    display: flex;
    position: relative;
  }
 
   .ear-left{
        transform: rotate(-20deg);
        background: #582806;
        border-top-right-radius: 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        background: #ffabab;
        width: 40px;
        height: 40px;

        box-shadow: -4px -1px 2px -2px #5f3721;
        position: absolute;
   }
   .ear-right {
        transform: rotate(-20deg);
        background: #582806;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        background: #ffabab;
        width: 40px;
        height: 40px;

        box-shadow: -1px -3px 2px -2px #5f3721;

        position: absolute;
   }

 .ear-left {
    top: -10px;
    left: 0;

 }
.ear-right {
    top: -10px;
    left: 90px;
 }

Now we’re finished styling the ears,
it’s time to continue working on the rest of the head ?

We’ll start by creating a head shape and adding styling for both Piggy’s eyes:

 .head {
    background: #ffabab;
    width: 130px;
    height: 130px;
    border-radius: 100%;
    display: flex;
    align-content: center;
    position: relative;
    z-index: 1;
    box-shadow: -2px 5px 2px -2px #5f3721;
 }

 .eyes {
    display: flex;
    position: absolute;
    top: 20px;
    left: 15px;
 }

 .eye-left, 
 .eye-right {
    background: white;
    border: 3px solid #402424;
    height: 30px;
    width: 25px;
    border-radius: 100%;
    margin: 10px;
 }

 .dot {
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background: #402424;
    position: relative;
    top: 10px;
    left: 2.3px;
 }

Well done ? Our Piggy is starting to take shape ✨

The next thing we need to add in would be Piggy’s nose.
The nose will have to contain two nostrils which we will have to style as well,
so let’s get back to business ?

 .nose {
    background: #ffabab;
    height: 25px;
    width: 35px;
    border: 3px solid #402424;
    border-radius: 70%;
    position: absolute;
    top: 70px;
    left: 45px;
    display: flex;
 }

 .nostril-left, 
 .nostril-right {
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background: #402424;
    position: relative;
    top: 3px;
    margin: 5px;
 }

Well done! We’ve completed the head section for our Piggy! ?

It’s all looking very cute, but we need to add the rest of the body as well ?
Let’s quickly recap and see what else we’ve got to style:

– Piggy’s body shape
– Piggy’s feet

To make Piggy’s body we’ll need a good size circle coloured the same colour
we used to colour the head section, and the CSS we’ll need will look very simple:

/* dear junior dev trying to make sense of this, 
be careful, this is a class for piggy's body, 
not the HTML body element */

 .body {
    width: 180px;
    height: 180px;
    background: #ffabab;
    border-radius: 100%;
    position: relative;
    top: -80px;
    left: -20px;
    box-shadow: 3px 0px 2px -2px #5f3721;
 }

Fantastic! We’re almost there now! ?

The last thing we’ll need to style is both of Piggy’s feet.
We’ll need to colour them a bit darker and choose a nice shape ?

 .feet {
     display: flex;
     position: relative;
     top: -120px;
     z-index: 1;
 }

 .foot-left,
 .foot-right {
    height: 30px;
    width: 50px;
    background: #402424;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    margin: 8px;
    border: 1px solid black;
 }

That’s it! Awesome job! ?
You’ve made yourself a cute little Piggy and I hope you’ve learned something new ?

If the post was a bit too long to read, you can have a play on codepen instead ?

See the Pen CSS | Cartoon style piggy by Likii (@likiipedia) on CodePen.