This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
π Inspiration
πͺ© WELCOME TO CHIMAEK SOUL CLUB!
Open every night. No dress code. One item on the menu. ππΊ
Chimaek (μΉλ§₯) is a Korean portmanteau of "Chi" (Chicken) and "Maek" (Maekju, Korean for beer).
And it is my soul food β in every sense of the words.
π» "Let's have Chimaek."
In Korea, this simple sentence means much more than "Let's eat fried chicken and drink beer."
It means:
πͺ "You worked hard today."
π "Let's take a break."
π₯ "Let's enjoy this moment together."
Chimaek is...
π the reward after a long day at work
π« the comfort after exhaustion
π a way to celebrate good news
π¨βπ©βπ§ a reason to gather with friends and family
π a chance to forget your worries, even if it's just for one evening
One street, countless Chimaek restaurants β an everyday sight in many Korean cities. Created with AI Β· Β© 2026 [Sohee Lee]
For many Koreans, Chimaek is more than a favorite mealβit's a small ritual that marks the end of a busy day and the beginning of a moment to relax.
Koreans love fried chicken so much that busy neighborhoods are often lined with chicken restaurants. It's completely normal to find several fried chicken restaurants on a single block, each with its own recipe, loyal customers, and atmosphere.
That feeling of comfort, warmth, and togetherness is what I wanted to capture through this CSS artwork. β¨
π¬ Demo
SOUL CLUB is open. πͺ© Doors at sunset, lights already running at 125 BPM.
When the sun goes down, SOUL CLUB comes aliveβit's what the end of a long day feels like.
π§ The room does everything. Beams sweep, the floor pulses, the strobe lands on every beat.
πͺ The bucket is on stage, because tonight it's the main event.
π The chicken never moves. It isn't performing β it's waiting for you.
π₯ Two glasses lean in, clink, and drift apart. Once a second, forever.
π οΈ Journey
Instead of drawing one realistic illustration, I wanted to capture the feeling of Chimaek β so I gave it a room, a tempo, and a toast.
π Building the chicken. Each piece is a single element wearing a clip-path polygon with 20 points at uneven radii. Fried chicken is defined by its craggy silhouette far more than by its shading, so the outline had to do the work. Three grades of crust share the same 18-degree spokes and differ only in how far the long and short radii spread apart: a wide spread reads as shattered batter, a narrow one as smooth crisp skin.
πͺ© Building the room. The sweeping club beams are a repeating-conic-gradient pinned to a point above the frame and rotated β which is genuinely what a lighting rig looks like from the floor. mask-image fades them out before they reach the ground, and mix-blend-mode makes the coloured light sit on the chicken instead of next to it. The rest is gradients, border-radius, layered box-shadows and pseudo-elements, all sized in vmin so the scene scales to any screen.
π΅ Building the tempo. Everything the room does runs off one custom property:
:root { --beat: .48s; --bar: 1.92s; } /* 125 BPM */
The strobe, the floor pulse and the beam sweep are all whole multiples of it, so the lighting can never drift out of time with itself. Change that one number and the whole club changes tempo. The toast runs on its own 1-second clock, deliberately off the beat, because two people clinking glasses are never in time with the music.
π³ Three things that surprised me
π Faces appear whether you want them or not. My first crust texture was a dark oval with a curved stroke underneath, repeated on every piece β and all of them ended up smiling at me. I replaced the ovals with hard-edged chips and the chicken turned into cartoon cheese instead, because a solid patch on a yellow surface reads as a hole. What finally worked was the same patch faded out at the edges. Two matched dots with a curve underneath will read as a face no matter what you intended.
π Contrast matters more than detail. The first version had a cream background, and since fried chicken and beer are both amber, the food dissolved into the glasses. Moving the whole scene into a dark room fixed the chicken, the foam and the label in a single change β and that's why this piece ended up at night.
π€ Restraint reads better than energy. An early version had the glasses swinging halfway across the poster and crashing together in a burst of foam. It looked exciting and it was wrong: it read as a big night out. So I cut the wind-up, took the tilt from 17 degrees down to 7, and moved the glasses close enough that they only have to lean. Making the movement smaller is what finally made it feel like Chimaek.
βΏ Accessibility
The whole scene is a single role="img" with a written description, so a screen reader gets one object instead of 121 empty divs. prefers-reduced-motion stops every animation.
π What's next
I'd like to try the same approach on a whole street β a Korean block at night with a glowing chicken sign in every building, which is what the photo above actually looks like.
π Code is MIT licensed.
Top comments (1)
I'm craving fried chicken.