I have been hacking with CSS for a long period but I never made any CSS drawing or CSS art. I think it's time for another CSS hacker to join the club!
I took one of my favorite anime character and I tried to do something in one day to see my level before spending more time.
I came up with this
It will not work on Safari, scroll down to the embed tweet to see a screenshot
Not that perfect but quite good for a 6h work. I would have done better if I considered an easier illustration but I took a complex one as a reference ๐ณ ๐
Few notes:
- It's responsive.
- I used a lot of
clip-path. A good technique for responsive but a pain to handle. - I tried to keep a reduced HTML code
- I used an SVG filter to smooth up a few edges (related post: https://dev.to/afif/css-shapes-with-rounded-corners-56h). I am not proud of this one but I wanted a fast solution to end my drawing before midnight. Next time it will be a CSS-only solution.
I tweeted about it yesterday in case you want to retweet it or draw the attention of a CSS artist ๐ง
Let me know what do you think ๐๐
โ๏ธ This is amazing, we want more like this!
โ Don't do this anymore ๐คฎ we want more tutorials and funny collections but no more drawing please!
PS: If you will choose the โ, I will haunt your dreams for the rest of your life ๐น
Top comments (27)
Canโt wait to see it on PC as a screenshot never does it justice. Looks awesome though! ๐ฅ (In all fairness the Safari version of your art is still better than I can do even with the issues you mentioned ๐คฃ)
As for voting, I vote more of your other stuff, purely because I love picking up useful skills and tricks from you, CSS art isnโt useful (as SVG is far quicker and more useful - controversial or what!) CSS art is just fun (and impressive!)
I just had to respond and recreate the same image but as SVG!
Rate my SVG art! [Compared to CSS art]
InHuOfficial ใป Sep 23 ใป 3 min read
A new war perhaps? ๐๐
One liner --- codepen.io/Tronic247/pen/RwgYRGg :O :O
Ha, nice! If I wasn't busy with something, I was considering a pixelart box-shadow solution, but you beat me to the punch anyway ^^'
โ๏ธ This is amazing, we want more like this!
Sorry @inhuofficial
TkhCNVZUYzNhVkJKUmxKdllWaE5aMkZZVFdkWlZ6Rm9aVzFzZFZwNWQyZGtNbFZuWkRKR2RXUkRRblJpTTBwc1NVZDRjR0V5Vldka1IyaHdZM2xGUFNBPT0g
I hope it's not a "hash" method because it's a one-way function ๐
โ๏ธ This is amazing, we want more like this!
๐คฃLOLYou here?You can't read this...๐คฃLOLYou here?You can't read this...
Really impressive. Well done!
It's super cool you can do this with CSS! Love the details like the slight skew on the irises to give them some feeling of depth.
As an aspiring artist, I like seeing stuff like this, personally.
โ ๐
Fantastic =D
โ๏ธ This is amazing, we want more like this!
Honestly I was expecting it to be single div but still amazing ๐
I took a complex illustration for one DIV ๐ฅ but once I get used to CSS drawing it will be 0-div ๐ (only background on the html element)
Looks awesome!
Keep up the great work!
Wow amazing! Well done