Frontend Challenge: Space Edition (Rocket Emoji CSS)

This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

This submission was inspired by celebrating people's success on a chat. One space related emoji used to acknowledge their wins is the rocket emoji.

Demo

Journey

This challenge provided an excellent learning experience. The task was to create a rocket emoji using CSS and HTML, which involved crafting shapes that are not typically seen on websites.
I started by breaking the image into 8 parts:

1. Body
2. Nose Cone
3. Window
4. Left Fin
5. Middle Fin
6. Right Fin
7. Nozzle
8. Flame

The Body is a div element that is rotated 45 degrees with a border radius added to each corner to give it a rounded appearance. This element contains the Nose Cone and the Window. The Nose Cone is a div element with a border radius of 50% which makes it a circle. It is positioned at the top of the Body. The Window is similar to the The Nose Cone but it has a border to give it a window frame and it is positioned near the center of the Body. The Left Fin is a div element with a clip-path attribute. Using this attribute I can define a polygon, which allows me to draw the fin. The Middle Fin is a div element with rounded corners. The Right Fin similar to the Left Fin but it is inverted. The Nozzle is a rectangular div element with rounded corners. The Flame is a square div element with varying border radius for each corner. A border with a deeper color was added to Flame to give it more of a flame appearance. Animation was added to Flame which simply changes the size and opacity every 2 seconds indefinitely. The background is a series of radial-gradient attributes used to create random white circles of varying sizes at different locations.

I learned some new CSS techniques, including how to create animations and polygons. In the future, I hope to add even more animations to the rocket.