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!