Fine...you want CSS art you got it! My first ever CSS art.

In my last post I recreated an image in SVG to prove how easy it is compared to CSS.

Rate my SVG art! [Compared to CSS art]

InHuOfficial Sep 23 3 min read

#css #html #codepen #showdev

All the CSS fans came to shout at me for bashing CSS or not using it...so now I have built the same image in CSS, hopefully that makes everybody happy!

Original image

CSS version

OK wow, how did you do that?

In the previous post I cheated and created an SVG of the image.

This post is no different, I cheated again!

All I did was write a little script (well, actually it was quite a monstrous script as you can't have curves in polygons!) that converted the SVG <path> information into polygon() coordinates that CSS can understand.

The script also had to grab the styling information and generate the HTML and CSS.

So we have 977 <divs>, each with auto generated IDs...that correspond to CSS rules...that are all using clip paths...to draw shapes and with classes to set the colours. Talk about excessively complicated!

additional: as @afif pointed out in the comments you should never just copy and paste CSSI was miles into coding this (with hard coded spaghetti code!) before I realised I didnt need pseudo elements to create the clip-pathssometimes my brain just doesnt work!

You happy now?

All the CSS mega fans will now be happy that I have finally drawn my first piece of CSS art...can I go back to my precious SVGs now?

As always, this was just a bit of fun, I am only kidding, CSS art is cool, especially when done with skill rather than cheating like me!

Have a great weekend everybody!