This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
Comfort means different things to different people. For my little brother, it comes from the simple joys of childhoodβa fresh apple after school and watching Doraemon on TV.
Those memories inspired him to create this CSS art scene featuring a cheerful Kawaii Apple alongside Doraemon flying with his iconic Bamboo Copter (Take-copter). Everything is built using pure HTML and CSS, without SVGs or images, as a fun way to recreate that nostalgic feeling.
Demo
https://codepen.io/editor/JDS-YOGI-and-CO/pen/019fb706-d082-761c-9159-d32a35acb032
π The Journey
Watching this project come together was fun because every part of the illustration was carefully built using CSS.
π¨ Crafting the Characters
Doraemon is created with layered elements, gradients, and carefully shaped border-radius values.
Small details like the pocket, bell, and facial features use shadows and highlights to add depth.
The Kawaii Apple uses soft asymmetric curves, expressive eyes, and gentle highlights to give it a friendly, playful look.
β¨ Adding Life with Animation
To make the scene feel lively, several lightweight CSS animations were included:
A spinning Bamboo Copter using transform and perspective for a subtle 3D effect.
A playful jelly bounce animation for the apple.
Gentle floating and blinking animations that add a little personality to both characters.
π± What He Learned
While building this project, he explored a few interesting CSS techniques, including:
Using radial-gradient() to create depth and lighting.
Layering multiple elements to build recognizable characters.
Combining simple animations to make the artwork feel more alive.
Fine-tuning proportions until everything looked balanced.
π A Little Note
This project was created by my cute little brother, who enjoys experimenting with CSS art and animations. It's a small tribute to the comforting memories many of us share from childhood.
Hopefully, it brings a smile to your face and reminds you of those simple, happy moments too.
Thanks for checking it out!
π License
Released under the MIT License.
Feel free to explore the code, remix it, or create your own CSS art inspired by it.