css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. This is freakin beautiful

  2. Amazing...very well done!

  3. I love this!

  4. So awesome!

  5. Great attention to details! :)

  6. Wonderful CSS work love it

  7. Incredible, I wish I could create something like this.

    Also, did you experiment with having the coffees stream emit from behind the metal in the animation? - Thought from this angle that may look more realistic. What do you think?

  8. Hey @DanHaddock! For some reason I didn't think having the coffee behind looked good when I first built it. On second thoughts, I think you are right, so I changed it. Tell me what you think! Thanks for bringing it up :) Why don't you have a go at it? Try with a simple shape first, look at each CSS property and try recreating it. Once you get the logic behind it, move on to the next shape. What really helps me in my learning process is forking pens and deconstructing them. This way I can focus on each piece of code at a time. Also check out this course for building pure CSS images https://coding-artist.teachable.com/p/how-to-make-pure-css-images Hope this helps!

  9. Absolutely love your work, @agathaco.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.