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 ๐น
Latest comments (27)
โ ๐
oh my god. I am amazed
Good job !! :D
Interesting, I didn't think to draw something like so using only css. Thank you for sharing it.
My friend first of all I am fun of anime.
Second you did a amazing job.
Keep up with amazing us ๐๐
Super!!
shinzou wo sasageyo!
Dude this is great ! those numbers scared mee.
This is awesome โ๐ฅ
That's genius ! Keep shining :)