CSS Art: June (The peaceful days)

#frontendchallenge #devchallenge #css

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

Today I am posting a figment of my imagination in the form of the June CSS Challenge. Where I live, June means it's sunny, cloudy and raining at the same time. And where I live is green and full of trees and also has deer nearby. So I put them all together. Whenever I open my patio windows, I see something like this. This is what I tried to put in my CSS art. This is my inspiration.

Demo (Please re-run the pen for the best results)

Here is the codepen link for the project.

Journey

Step 1: Where to start

Figuring out what kind of a scene I was gonna create. This is one of the most hardest parts of the challenge, as if I choose something that would be too hard, I would lose interest and would give up. It had to be something that I see every day and I love seeing so that I would finish it no matter what. That is why I chose this.

Step 2: What are all the main parts

Now let's figure out what all will make up the scene. Like I mentioned it's hot, its cloudy, so we need the Sun and some clouds. Next I mentioned it's green and full of trees, so we also need green meadows and a few trees. Next I mentioned deer, since I cannot add a whole bunch of deer, I represent all of them together as one single deer.

Step 3: Putting all the parts together

Now that we have all the parts, we start off creating each part separately, I started off with the sky, with the Sun in the middle of the sky and some static clouds. Wait! clouds move don't they, so I added some keyframes for the clouds to move like they do in the sky.
Next up would be some green meadows. I took some inspiration off of google by searching for some low poly images for a summer scene and I remembered the windows wallpaper we all used to see.

So after I added those cute little meadows, let's add some trees on each of them. Now let's add the main character, our deer.

The deer was the part that took the most time to create as it has a lot of elements on it. The body, neck, head, ears, tail, front legs, hind thighs, legs, antlers aaaah!, so many parts. Let's start from the body. I created the deer based off a few google results like "low poly deer"

After the deer was painstakingly created, I couldn't just leave it static. I had to give it some life, so I animated the deer bending its neck to eat some grass, its tail and ears twitching also.

Finally it was to put everything together as I had envisioned in my mind. When I open my patio window I see this image, so I made an opening window out of the screen.

This is my first css challenge not following some of the conventional UI design and development techniques. I thank dev.to for providing this opportunity to explore and showcase my creativity.