How to Draw a Fox with HTML and CSS

Have you ever thought about drawing something with CSS? Yes CSS! You read that right, it's possible to draw with HTML and CSS. This type of drawing is called CSS Art. Coding is not only about creating software or apps, it's also about creating art.

Following our previous CSS Art tutorials on fish, rat, and pig using CSS and HTML, and today we'll show you how to draw a logo-style fox.

Table of Contents

• Why you draw a fox using HTML and CSS?
• What you need to know?
• What is the first step in drawing the fox?
  • Draw a Frame for the Fox
  • How to Draw the Fox Head?
  • How to Draw the Fox Ears?
  • How to Draw the Fox Eyes?
  • How to Draw the Fox Fur?
  • Draw the Fox Body
  • Draw the Fox Tall
• Full HTML Structure
• Fox Drawing in HTML Editor
• Conclusion

Why you draw a fox using HTML and CSS?

Don't read this article only for educational purposes, read this for fun too. Because today's CSS Art will not have any effect in real life, it's a fun way to improve CSS skills like border-radius, transform, and pseudo-elements (::before and ::after).

You might be wondering, why are you drawing this fox? My simple answer is practice. Whether it's web or app development, the more coding you do, the more professional you become. Plus, it's quite satisfying to see your design come to life through code.

What you'll practice?

• How to create a beautiful structure with HTML elements
• How to pick the right CSS properties for specific problems
• Animate the fox ears using CSS animation properties

The Inspiration and Respect

When I draw something using CSS, I take inspiration from other images. For this logo-style fox character, I was inspired by a fox illustration, and I would like to give full credit to Rimpi Banik (Graphic Designer) for the original artwork that guided this CSS art.

What you need to know:

This article is about drawing a fox and keeping everything code-focused. So, there are a few things you need to know.

• You must have a code editor on your computer, such as VS Code or Sublime Text.
• You'll need some basic understanding of HTML elements and CSS properties.
• And leave the rest to me. I'll try to explain everything step by step.

If you get stuck at any point, you can also watch our CodeHemu YouTube tutorial for visual guidance.

What is the first step in drawing the fox?

Create a fox.html file on your local computer, and open it in a code editor. Once the file is open, we'll start writing the HTML and CSS inside it.

Let's look at your next steps and start writing the HTML and CSS.

To make the next steps easier to understand, we've split the HTML and CSS by drawing sections for clarity. You will create only the style tags without creating any basic HTML structure. Like this:

<style>
  /*fox style goes here*/
</style>

See the CSS used on each element and how it changes the look.

Draw a Frame for the Fox

The fox drawing is started by creating a div element with a frame class, which will hold every part of the fox together.

We'll create a border around this frame element to keep the drawing organized.

<div class="frame">
   <!-- fox structure goes here -->
</div>

body {
    background: #749696;
}
.frame {
  width: 300px;
  height: 400px;
  margin: 5em auto;
  position: relative;
  border: 2px solid;
}
.frame *,
.frame *:after,
.frame *:before {
  position: absolute;
}

Let's break down the details of CSS.

• We set the background color of the document body to hex code #749696.

• We have given the frame a size of 300 pixels by 400 pixels, which represents a ratio of 3:4.
• We used the margin property to center the frame on the screen. The first margin value is 5em, which moves the frame down from the top of the browser window. The auto value centers the frame horizontally.
• We set the position of the frame element to relative and the position of all the elements inside it to absolute. As a result, we can easily position the elements inside the frame using offset properties such as top, right, bottom, and left.

How to Draw the Fox Head?

Now we'll draw the fox head. Inside the existing frame element, we have added a new child element with the class head. This part is a little tricky, because we'll also use the ::before and ::after pseudo-elements to create additional shapes without adding any more HTML.

<div class="frame">
   <div class="head"></div>
</div>

.head {
    width: 200px;
    height: 200px;
    left: 50px;
    border-radius: 100%  20% 0% 20%;
    background: #f9931d;
    transform: rotate(45deg);
    z-index: 5;
}

.head:after,
.head:before {
    content: "";
    width: 150px;
    height: 150px;
    border-radius: 0 100% 0 100%;
    background: white;
}

.head:after{
    left: 38px;
    top: 113px;
    transform: rotate(315deg);
}

.head:before {
    left: 115px;
    top: 37px;
    transform: rotate(43deg);
}

Let's see how the fox head is drawn with CSS.

• We first create a 200px by 200px box to form the basic shape of the fox head.
• Since all elements inside the frame are already positioned absolute, we simply move the head 50px from the left side.
• We use transform to rotate the box by 45 degrees and border-radius to round its corners. What we do is make the first corner completely round, the third corner sharp, and the other two corners 20% rounded.
• We use pseudo-elements to create two white cheeks on both sides of the fox.

How to Draw the Fox Ears?

Next, draw two ears on either side of the fox head.

Two <div> elements with the ear class were added inside the frame element, positioned below the head element. We used the left and right classes to position each ear separately.

<div class="frame">
   <div class="head"></div>
   <div class="ear left"></div>
   <div class="ear right"></div>
</div>

Normal ear shape (.ear)

We set both boxes to 100px in height and 150px in width, creating the rectangular shape. Then we filled them with white and added a 23px thick orange border using box-shadow.

.ear {
    height: 100px;
    width: 150px;
    top: 6px;
    background: #ffffff;
    box-shadow: 0 0 0 23px #f9931d;
}

Left and right ear positioning

We used left to position each ear in the correct direction and used border-radius to give the ears a distinct shape.

.ear.right {
    transform: rotate(319deg);
    left: 140px;
    animation: right-ear-move 1.5s ease-in-out infinite alternate;
    border-radius: 250% 0% 250% 0%;
}
.ear.left {
    transform: rotate(41deg);
    left: 0px;
    border-radius: 0% 250% 0% 250%;
    animation: left-ear-move 1.5s ease-in-out infinite alternate;
}

Ears animation

Now let's look at the animation part of the ears.

We controlled the animation using @keyframes and defining how the ears rotate over a 1.5 seconds duration. As the animation plays, each ear rotates smoothly back and forth.

The right ear rotates between angles of 319 degrees and 340 degrees, while the left ear rotates between angles of 20 degrees and 41 degrees.

@keyframes right-ear-move {
  0%, 50%  {transform: rotate(330deg)}
  25%, 75% {transform: rotate(340deg)}
  100%     {transform: rotate(319deg)}
}
@keyframes left-ear-move {
  0%, 50%  {transform: rotate(20deg)}
  25%, 75% {transform: rotate(30deg)}
  100%     {transform: rotate(41deg)}
}

How to Draw the Fox Eyes?

In HTML, we have used two div elements to draw the eyes. Like the ears, these elements use the left and right classes for positioning.

<div class="frame">
   <!-- ...... -->
   <div class="ear right"></div>
   <div class="eye left"></div>
   <div class="eye right"></div>
</div>

Next, we start drawing the eyes. Their height and width are each set to 30 pixels, and they are positioned 150 pixels from the top of the frame.

.eye {
    height: 30px;
    width: 30px;
    top: 150px;
    z-index: 5;
    background: white;
    border-radius: 50%;
    border-top: 15px solid #50332d;
}

The highlighted part of the eye is the border-radius. Here, we set the top border to 15 pixels in black, which will look like the eyelids.

.eye.right {
    left: 186px;
}

.eye.left {
    left: 88px;
}

We placed the right eye 186px from the left side of the head, and the left eye 88px from the left side of the head.

Draw the Fox Nose

At this point, we have drawn the head, ears, and eyes, but a face is not complete without a nose. So, we are using a div element to draw the nose.

<div class="frame">
   <!-- ...... -->
   <div class="eye right"></div>
   <div class="nose"></div>
</div>

The nose is 56 pixels width and 30 pixels height, with background-color set t0 #50332d.

.nose {
    width: 56px;
    height: 30px;
    z-index: 5;
    top: 228px;
    left: 123px;
    background-color: #50332d;
    border-radius: 50%;
}

How to Draw the Fox Fur?

Now we are proceeding with drawing the fur on both sides of the face. A parent div element with the class name fur is created, inside which two child div elements are added. These elements have been given the class names left and right.

<div class="frame">
   <!-- ...... -->
   <div class="nose"></div>
   <div class="fur">
       <div class="left"></div>
       <div class="right"></div>
   </div>
</div>

Here, we draw three strands of fur on each side of the face using pseudo-elements.

On the right side, the whiskers are created using .right::after, .right::before, and .right. On the other hand, the whiskers are created using .left::after, .left::before, and .left.

.fur {
    top: 166px;
    left: 37px;
    height: 59px;
    width: 227px;
    z-index: 4;
}

.fur .right::after, 
.fur .right::before, 
.fur .right {
    border-left: 20px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.fur .left::after, 
.fur .left::before, 
.fur .left {
    border-right: 20px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
.fur .left {
    top: 10px;
    left: -5px;
    transform: rotate(-20deg);
}
.fur .right {
    top: 10px;
    right: -5px;
    transform: rotate(20deg);
}
.fur .right::after {
    display: block;
    content: "";
    top: 0;
    right: 2px;
}
.fur .right::before {
    display: block;
    content: "";
    top: -17px;
    right: 2px;
}
.fur .left::before {
    display: block;
    content: "";
    top: -17px;
    left: 2px;
}
.fur .left::after {
    display: block;
    content: "";
    top: 0;
    left: 2px;
}

Draw the Fox Body

Next, we draw the body below the head. To do this, we create a div element with the class name body.

<div class="frame">
   <!-- ...... -->
       <div class="right"></div>
   </div>
   <div class="body"></div>
</div>

.body {
    top: 193px;
    left: calc((100% - 63%) / 2);
    height: 215px;
    width: 200px;
    background: #fcab17;
    border-radius: 50% 50% 20% 20% / 50%;
    z-index: 2;
}

Let's look at the CSS used to shape the body.

• We placed the body 193 pixels below the top of the frame, just below the head.
• We also centered the body horizontally using the CSS calc(...) function.
• The body shape is given a height of 215 pixels and a width of 200 pixels, making the body appear longer.
• We set the z-index to 2 to keep the body below the head.

Draw the Fox Tall

Next, we draw the fox tail. The tail is created using a div element with the class name tail, that's placed inside the body container.

<div class="frame">
   <!-- ...... -->
   <div class="body">
    <div class="tall"></div>
   </div>
</div>

.tall {
    top: 92px;
    left: calc((100% - 133%) / 2);
    height: 155px;
    background: #f9931d;
    width: 300px;
    background-image: linear-gradient(294deg, #fff 30%, #f9931d 30%);
    border-radius: 100% 50% 23% 103% / 81%;
    z-index: 2;
    transform: rotate(15deg);
}

Let's look at the CSS used to shape the tall.

• We use transform: rotate(...) to give the tail a curved shape.
• We apply a linear-gradient to represent the lighter fur at the tip of the tail.
• We position the tail above the body using a z-index value of 2.

Full HTML Structure

Below is the complete HTML structure used to draw the fox.

<div class="frame">
    <div class="head"></div>
    <div class="ear left"></div>
    <div class="ear right"></div>
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="nose"></div>
    <div class="fur">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="body">
        <div class="tall"></div>
    </div>
</div>

Fox Drawing in HTML Editor

Below is a live demo of the fox logo-style drawing. Click Run Code to see the animation.

Conclusion

Congratulations! We created an image of a fox using HTML and CSS, layering different elements. By combining shapes, pseudo-elements, and gradients, we were able to create a logo-like design. This method shows that it's possible to create detailed images using CSS.

Thank you for reading. Please come back to read again.

Happy web development!