DEV Community

Cover image for ๐Ÿ˜ก Fine...you want CSS art you got it! ๐Ÿ’ช My first ever CSS art.
GrahamTheDev
GrahamTheDev

Posted on

๐Ÿ˜ก 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.

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

Livai Ackerman

CSS version

**See, CSS art is easy too! ๐Ÿ˜‰**

ย 

ย 


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 CSSโ€ฆI was miles into coding this (with hard coded spaghetti code!) before I realised I didnโ€™t need pseudo elements to create the clip-pathsโ€ฆsometimes my brain just doesnโ€™t 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!

Top comments (28)

Collapse
 
danbmky profile image
Dan Bamikiya

Can you share your monstrous script?
Thanks!

Collapse
 
danbmky profile image
Dan Bamikiya

if i wanted to attempt this which i wouldn't cause...waste of time. i would've used a single div(just to flex) and applied a whole bunch of gradients on the background-image property (something like this: github.com/danBamikiya/movie-finde...) [that styling is generated] and if I want to go further and animate (like an eye wink or something) I'll apply an animation property that animates the background-position and background-size

Collapse
 
grahamthedev profile image
GrahamTheDev

Someone beat us both too it!

dev.to/posandu/comment/1i9jk

Thread Thread
 
danbmky profile image
Dan Bamikiya

That's WILD! He inlined it!
I guess the next war is a 0 div war. Only styling the html element.

Thread Thread
 
grahamthedev profile image
GrahamTheDev • Edited

The real pros donโ€™t use any CSS, HTML, images, JS at all! (Firefox only) ๐Ÿ˜‰

In fact if you like abusing the web you might like that whole series! ๐Ÿคฃ

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
grahamthedev profile image
GrahamTheDev

I have dropped a comment on SO, if you create a fiddle or give a bit more detail on the problem I can help you further on SO (I have a busy day today so if I am slow to respond my apologies).

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€ • Edited

SVG because that makes sense

Collapse
 
link2twenty profile image
Andrew Bone

Single div next?

Collapse
 
grahamthedev profile image
GrahamTheDev

LMFAO - the only way I can think to do that is to cheat with a gradient per pixel. I am sure @afif can do something very impressive with a single div and conic-gradients though!

Anyway single div is for noobs, the no div challenges are the ones the pros do! ๐Ÿ˜‹๐Ÿคฃ

Collapse
 
prakh_r profile image
Prakhar Yadav

This is insane ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Collapse
 
grahamthedev profile image
GrahamTheDev

@afif and @alvaromontoro , you both happy now, I did the CSS thing...can we be friends again please? ๐Ÿ˜‹

Collapse
 
afif profile image
Temani Afif

Collapse
 
grahamthedev profile image
GrahamTheDev

The sheer length of that GIF made me laugh! It seems my post had the desired affect! ๐Ÿคฃ

Thread Thread
 
afif profile image
Temani Afif

by the way, you don't have to use all those pseudo elements (I know you copied my code structure ๐Ÿ˜’). Applying the clip-path to the main element is enough. I used pseudo element to reduce the need of the html code and because I have to apply a filter to the parent element

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Yeah I did just grab the code structure, it was only when I was half way through I realised it was not necessary (I did think it was needed and then my brain finally worked after about 2 hours!), but I had already hard coded it into about 15 different places and I couldn't be arsed to remove it...so I just left it ๐Ÿคฃ

Serves me right for copying without thinking! I also realised I didn't need loads of other properties as I was using vw units, so I could have just used them throughout and work as if the whole screen was the canvas....would have made the calculations a lot easier as I could have divided by 10 instead of 9.77 when calculating the positions as percentages!

Hence why this is not a tutorial...I made many many blunders! lol!

Thread Thread
 
grahamthedev profile image
GrahamTheDev

I donโ€™t know why I donโ€™t ask you to just look at stuff I am working on with CSSโ€ฆwould save me loads of faffing as you spot stuff so quickly โค๏ธ!

Collapse
 
mastermind profile image
MasterMind

why ๐Ÿคฃ

Collapse
 
grahamthedev profile image
GrahamTheDev

Must one have a purpose behind everything? ๐Ÿ˜œ๐Ÿคฃ

Collapse
 
auroratide profile image
Timothy Foster

So now my brain's thinking... if we use Illustrator to trace the CSS art image, then reapply your script, and iterate that several times... ๐Ÿ˜ˆ

Collapse
 
grahamthedev profile image
GrahamTheDev

Oh dear...I can only imagine what monstrosity would come out of that! ๐Ÿคฃ

Collapse
 
davidamunga profile image
David Amunga

And here I am struggling to center a div ๐Ÿ˜

Collapse
 
grahamthedev profile image
GrahamTheDev

Donโ€™t worry, without cheats I also struggle to centre a div! ๐Ÿคฃ๐Ÿ˜œ

Collapse
 
hamdysaad20 profile image
Hamdy Saad

wooooooooooowww!!

Collapse
 
rikiyadav profile image
RikiYadav

Even I have done that with python+Html+css within 22 sec๐Ÿ˜‚๐Ÿ˜‚

Collapse
 
grahamthedev profile image
GrahamTheDev

I would love to see the script you used to convert the paths, perhaps I made it too complicated if you can do it so easily as it took me ages to convert curves to polygons!

Is there some simple approximation you can use that I missed that doesn't involve calculating the curve first?

How did you do it so quickly?