Home Careers Contact Us
Back to articles
Oct 15, 2018  | by Mikhail Dziarkach

CSS Animals with your own hands

javascript css animations js
CSS Animals with your own hands

Hi, everybody. I’ve got an idea to give the task to make something amusing as a test task for new employees when hiring. Something that won’t take a lot of time and even if the applicant doesn’t suit us for any reason he won’t be offended as he will have the work which isn’t a shame for showing to someone else. The task assumes to draw any animal by means of standard CSS. I liked the idea and I decided to try. It turned out to be really interesting and I performed several similar tasks.

The first thing that was made is the animated owl. When hovering over the owl, it is able to blink and flap its wings. We will dwell upon it.

The owl was separated into 2 parts – the head and the body

Let’s start with the head. I separated it as well (eyes, beak, ears)

All the elements are simple geometric figures that are positioned relative to each other, and their extra parts are hidden by overlapping other elements. As a result, an integral structure should be obtained.

Since there are hundreds of lines of styles, then I propose to analyze only a small part. The link to the entire code will be available in the end.

The head and the eyes are blocks that are simply given `border-radius` and there is nothing unusual in them.

The beak and the ears are made with the help of `clip-path`. It allows to draw on points as on a canvas.

As a result we get something like this:

As it was described above the owl is able to blink and flap wings. It is done by means of 3 animations – eyelids and one animation for each wing.

That’s all. We have analyzed the main points. The remaining parts are made by analogy and should not cause difficulties. See the full version of the code and a experiment on https://codepen.io

See the Pen
by Mikhail (@mikhail1992)
on CodePen.

For those who are interested in it there is the example of a Cat

See the Pen
by Mikhail (@mikhail1992)
on CodePen.

Keep reading