cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
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

CSS3 Illustration and animation.

Mug is resizable with just 1 Sass edit. Try it.

Happy Holidays!


  1. i love your color choice

  2. Looks really good! I'd consider using transforms instead of margins, top, left etc. Will definitely help with the slight stutter of the steam. Good job though!

  3. @thejamespower Thanks for the tip! I never even thought about it. I'll give it try and see if it's even smoother. I'll keep you posted.

    I usually still avoid transforms for positioning elements, given of the lack of support in older browsers. But this is when I work, and when I play with code I forget this ;)

  4. U are my favorite css painting, as always cool!! :D cheers @ilithya

  5. @xhepigerta Thanks! You have yourself some pretty UI/UX interesting pens as well ;)

  6. @thejamespower Hey, I tried today to animate the steam via translate X and Y, and removed my left, top positions and margins, and did not work out for me. It looked badly, like a robot, not smooth at all. The way I have it now was the smoothest way I could find. I was curious to give it a try, as I agree sometimes it does make an animation smoother using purely transforms, but somehow, at least I, couldn't find it. Happy new year!

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

You must be logged in to comment.