This week was a busy one at work, and I barely made the 10 illustrations for this batch. Most of them are my own compared to other times that I based more on Dribble.
Here are the 10 illustrations/drawings I did in the past 10 days. Click on the image to see the full illustration with the code, and click here to see a CodePen collection with all of the drawings plus some variations.
Day 21: Angel & Demon
The first version of these characters was from 2010, when I started developing a Bible trivia game (that never saw the light of day). The original ones are smoother and curvier, and have arms too :P
Day 22: Pucca
Pucca is a popular character created by VOOZ. It was originally an online e-card service but soon extended to web animations, games, TV shows... I almost missed this day, so I ended up going for something easy.
Day 23: Dog from letters
I tried to do something similar to what I did with this owl, but I failed. Sometimes you have days to draw and love it, and some days you hate the result. This was one of the latter... maybe I'll try to redo a different day.
Day 24: Cartoon character
Another customizable cartoon (change the CSS variables on line 33) with a manga-esque look. You can see how I coded it on this video
Day 25: Bender Bending Rodríguez
Futurama is(/was/is?) an amazing TV show, and gave us one of the most iconic animation characters ever: Bender! Unfortunately, I used drop-shadow and some transform that makes the cartoon look terrible on some browsers.
Day 26: Hello... I guess...
Another cartoon that was done in a hurry... so it's not that great, plus it uses drop-shadow so it won't work in all browsers. 😬😰
Day 27: Man's face
I drew this one in a hurry too, but I like the general result a lot better than the previous image. Not 100% sold on the eyes, but don't look that bad either.
Day 28: Plant sprouting
A vectorial cartoon of a pot with a plant sprouting inside. The soil has a little texture, and some filters were used to add some blurriness.
Day 29: Magic castle
Another castle –the last one for a while, I promise–. This time it is based on Disney World/Cinderella's Castle by Dmitry Stolz on Dribbble... and coding this one took more effort than what I expected initially.
Day 30: Leo Messi
Based on Leo Messi by Mark Iddon on Dribble. This illustration of Leo Messi celebrating a goal against Real Madrid was done only using clip-paths and backgrounds.
Top comments (15)
The Messi illustration 🔥
Maybe I should update it and add a hanger for the jersey if he ends up leaving Barcelona.
And a tear drop running down his cheek 😏
That Messi goal gave me nightmares for a week but the illustration is fire. Great one, mate. 🔥
Thanks! I am an Atletico de Madrid supporter. Messi has made me cry more than once...
#30 is insane! What's your secret?
I've seen people make really neat things with clip-path, but that CSS property has always confused me.
Thanks! I used a regular graphic design tool and exported the paths so I could use them on CSS.
I am working as a design team lead at Monster Logo Design and I have seen my team members using different techniques in terms of exporting the paths.
Hey! You are my neighbors! (or at least fellow Austinites?)
I notice you mentioned drop-shadow affecting rendering in some browsers, what other properties or features should you avoid to make an illustration more cross-browser compatible in your experience?
With the newer versions of Edge being Chromium, there are not as many issues. A few properties to be careful are:
filter: not all filters are supported by all the browsers. E.g.drop-shadowon Safari;clip-path: IE does not support it at all, and most browsers only supportpolygon()orurl().pathis in the definition, but no browser supports it (and it would be a game-changer).background-imagewith gradients: whilelinear-gradientandradial-gradientare supported,conic-gradientis not, andrepeating-linear-gradientis only partial.This right here is INTERESTIIIIIIIIIIIIIING!!!!!
Thanks!
Amazing work! Great colors used as well for the magic castle 🏰
Thanks!