Thea

Posted on Aug 3

Khachapuri: Georgian Cheese Bread in Pure CSS

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission 🍲🥧

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

When I think about comfort food, the first dish that comes to my mind is Imeretian Khachapuri (იმერული ხაჭაპური). It's a traditional cheese bread from the Imereti region in western Georgia. It has soft yeast dough with melted Imeruli cheese inside, baked until golden brown and brushed with butter after baking. Unlike pizza, the cheese is completely inside the dough. For me, khachapuri is more than food; it's warmth, home, and childhood memories. I wanted to recreate this fresh, steaming bread using only HTML and CSS.

Demo

Journey

1. Pure CSS

Every visible part, from the bread texture to the steam and slicing animation, is made only with HTML and CSS.No images, SVG, canvas, or JavaScript.

2. Slicing the Circle with clip-path Math

Instead of creating one full loaf and hiding it with overlays, I divided it into 13 slices, using clip-path: polygon(). Thirteen slices were enough to make the bread disappear smoothly without adding too many HTML elements.

.khachapuri-slice:nth-of-type(1) { 
clip-path: polygon(50% 50%, 38.01% 1.46%, 61.99% 1.46%);
animation: slice-cut-1 20s linear infinite; 
}

Each slice uses the same gradient layers, so together they look like one seamless loaf until the animation starts.

3. Layering the Oven-Baked Sheen

To recreate the look of freshly baked bread, I layered several radial gradients to create:

Darker baked spots (rgba(135,65,20,.55))
Toasted golden areas (#efb33d)
A glossy highlight (rgba(255,245,170,.55)) to simulate fresh butter brushed over hot dough.

4. Magazine Layout with shape-outside

To make the layout feel more like a food blog, I wrapped the text around the plate using CSS shapes:

.khachapuri-frame {
  float: left;
  shape-outside: circle(48%);
  width: clamp(180px, 24vw, 320px);
  height: clamp(180px, 24vw, 320px);
}

5. Accessibility & Polish

The slice animations respect @media (prefers-reduced-motion: reduce), so the dish stays as a whole loaf for users who prefer less motion. The closing line, გემრიელად მიირთვით!, is also marked with lang="ka" so screen readers can pronounce it correctly as Georgian.

გემერიელად მიირთვით!
Enjoy your meal!❤️

Top comments (25)

FrancisTRᴅᴇᴠ (っ◔◡◔)っ • Aug 3

Now I am hungry lol. Feels like this challenge is going to be a place to remind me to eat food D:

Good work though Thea!!

Thea • Aug 4

Mission accomplished then - remind devs to grab a snack 😃

Thanks a lot! 😊

sassenheimer • Aug 3

Quote from your GH bio:

"The only way to get smarter is by playing a smarter opponent." - Fundamentals of Chess

You have a repo called JS_algorithms and also a python one titled leetcode.

I'd like to ask you to rescue me.

Peter Norvig from Google and his mercenaries are patrolling the premises.
His code took all the memory, and the process is not responding within time limits.

Pete's wall clock time is going to be your opponent.

Option A) Accept the call for the Hero's Journey.
I'll clarify the problem statement, on request give hints etc. You can still opt out at any point though.

Option B) Decline the call for the Hero's Journey.
No faceloss. I just wave goodbye and disappear.

Your call, highflyer910

Thea • Aug 4

Lol didn't expect a Hero's Journey invitation in the comments 😄

I chose Option A:) Too curious now! Let's see the problem and whether I can survive Peter's mercenaries ⚔️🍿

sassenheimer • Aug 4

I'll contact you soon on a sidechannel.

Comment deleted

Thea • Aug 22

A secret? In a public Dev.to comment section? Too late! 😃
Now I'm wondering if Dev.to is ready for the steel pipe and the whole backward-tracing adventure... 👀

Giorgi Kobaidze • Aug 3

I thought my brain was playing tricks with me. Didn’t expect Khachapuri to pop up here.

Didn’t know you were Georgian either😄

Thea • Aug 3

So Khachapuri gave me away 😄😄 lol yeah, we're a rare species on dev.to

Super cool to connect😊

PubliFlow • Aug 8

Good CSS/HTML coverage. The landscape here moves quickly — worth noting that container queries and :has() selector support have reached baseline, which can simplify many of the responsive patterns we previously needed JS for.

Thea • Aug 8

Great point! :has() and container queries are definitely on my list to dive deeper into. Thanks for reading 😊

PubliFlow • Aug 8

Container queries will be especially useful for this kind of CSS art since you can scale the internal cheese and crust details based on the parent wrapper rather than the viewport. Pairing that with :has() for state management could let you create interactive hover effects for the steam rising from the bread without relying on JavaScript. I would love to hear what you discover when you test them out in your next build.

Thea • Aug 9

This is such a thoughtful comment 😊 You've given me great ideas to experiment with in my next CSS project. Thanks again for the inspiration!

PubliFlow • Aug 9

Glad that sparked some ideas for your next project. When you experiment with responsive CSS art, combining container queries with the @property at-rule can create incredibly smooth, fluid animations that react to the element itself rather than the viewport. I would love to see what you end up building with those techniques.

Hosein Mahmoudi • Aug 3

The clip-path math for slicing the bread into 13 pieces is so clever! 🤯 Making all slices look like one seamless loaf using layered gradients must have taken a lot of patience. Also, props for adding the lang="ka" attribute for accessibility. Amazing job and good luck with the challenge! 🇬🇪✨

Thea • Aug 4

Thanks so much! Happy you noticed those details; I spent quite a bit of time getting the clip-path slices right😃
Good luck with your netry too! 🚀

Allen Richard • Aug 6

This is such a creative way to combine culture, food, and technology. Turning a childhood memory into an HTML and CSS creation shows how coding can also tell meaningful stories.