In my last post I recreated an image in SVG to prove how easy it is compared to CSS.
Article No Longer Available
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 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!
Latest comments (28)
And here I am struggling to center a div 😁
Don’t worry, without cheats I also struggle to centre a div! 🤣😜
This is insane 🔥🔥🔥
wooooooooooowww!!
Even I have done that with python+Html+css within 22 sec😂😂
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?
👍😂😂
Too good!!! 🤩🤩🤩 Hats off brother
why 🤣
Must one have a purpose behind everything? 😜🤣
Can you share your monstrous script?
Thanks!
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-imageproperty (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 ananimationproperty that animates thebackground-positionandbackground-sizeSomeone beat us both too it!
dev.to/posandu/comment/1i9jk
That's WILD! He inlined it!
I guess the next war is a 0 div war. Only styling the html element.
The real pros don’t use any CSS, HTML, images, JS at all! (Firefox only) 😉
Is 0kb of *HTML* in your future? 🔮 A website without JS...HTML...CSS or IMAGES!?⁉😱
InHuOfficial ・ May 7 ・ 3 min read
In fact if you like abusing the web you might like that whole series! 🤣
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).
SVG because that makes sense
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... 😈
Oh dear...I can only imagine what monstrosity would come out of that! 🤣