DEV Community

Cover image for CSS Art: Drawing a Coffee Stain

CSS Art: Drawing a Coffee Stain

Alvaro Montoro on May 15, 2023

A few weeks ago, I did some CSS Art. This time it was a cup of coffee with a coffee ring stain next to it. All in HTML and CSS –and not as many ele...
Collapse
 
imthedeveloper profile image
ImTheDeveloper

This is insane.

Collapse
 
polterguy profile image
Thomas Hansen

Amazing!! :)

Collapse
 
ant_f_dev profile image
Anthony Fung

Nice!

My only (minor) comment is that the cup's a little hard to see. Maybe making it (or the background) a different colour might help it to stand out.

Well done though!

Collapse
 
erikgiovani profile image
Erik Giovani

Really incredible 👍

Collapse
 
jah_edw profile image
Jess Edwards

This is so cool, thanks for sharing!

Collapse
 
efpage profile image
Eckehard

CSS takes about 11 kB, while the final image is only 6 kB. But a nice waste of time :-)
Image description

Collapse
 
alvaromontoro profile image
Alvaro Montoro

CSS can be minified and zipped, and occupy less than the image. Additionally, it is responsive and scalable (higher quality in different sizes) while allowing for color customization, which the static image can't do. Apart from this, it is also a great way to practice some CSS properties and learn new things. I never said this was practical, but I it's not more of a waste of time than practicing CSS by building a landing page, or painting as a hobby.

Collapse
 
efpage profile image
Eckehard

I strongly appreciate the work you do to explain all the possibilities of CSS. It´s just unconventional to use CSS as a painting tool. Thank you very much!

Collapse
 
punund profile image
punund

What if we draw it as an SVG, would it be still 6KB?

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

Most likely less, especially after using tools like SVGOMG.

Collapse
 
vulcanwm profile image
Medea

woah this is amazing!