DEV Community

Cover image for Drawing a Thanksgiving turkey with CSS
Alvaro Montoro
Alvaro Montoro

Posted on

Drawing a Thanksgiving turkey with CSS

Today is Thanksgiving, so I decided to draw from scratch a small Thanksgiving turkey with HTML and CSS:

The drawing is inspired by this one, although someone mentioned that it looks like the turkeys from South Park πŸ˜…

Drawing the turkey with CSS

The first thing was setting the stage by creating a "canvas," where the whole drawing would be contained.

A big circle positioned around the center of the canvas would be the turkey's body, and with smaller box-shadows, we have the thighs too.

Next came the wings, which basically are a square with opposed rounded borders (border-radius: 100% 0%). We rotate them and place them on the sides of the turkey's body.

We use another circle for the head, and with a pseudo-element (::before), we also create the neck. Inside the head, we will have three more elements:

  • The eyes are a circle and its box-shadow.
  • For the beak –that is a triangle– we opted for using borders to generate it, but it could be done in different ways in CSS.
  • And the wattle is an ellipse in which one corner is not rounded at all.

After that, the legs were simple rectangles. And with both the ::before and ::after pseudo-elements, we did the toes (using rotations and specifying a transform-origin.)

Now came a fun part: the tail feathers. We start with an oval and then clone it several times. With the :nth-child() selector, we can do a couple of things: give different colors to odd and even tail feathers, and rotate each feather a different degree.

The last thing is the pilgrim's hat. This is done in two parts: the bottom is an ellipse, and the top is an oval with extreme values, so it flattens a little.

We use clip-path to "cut" the turkey's head and make it seem like the hat is around it.

We use an inset box-shadow to draw a band on the hat top and a pseudo-element to make the pin for the final touches.


You can watch on Youtube a time-lapse of the process described above:

Top comments (2)

Collapse
 
pgradot profile image
Pierre Gradot

Amazing!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!