AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Simple css drawing5/1/2023 ![]() maybe I'll try to redo a different day.Īnother customizable cartoon (change the CSS variables on line 33) with a manga-esque look. Sometimes you have days to draw and love it, and some days you hate the result. ![]() I tried to do something similar to what I did with this owl, but I failed. I almost missed this day, so I ended up going for something easy. It was originally an online e-card service but soon extended to web animations, games, TV shows. Pucca is a popular character created by VOOZ. The original ones are smoother and curvier, and have arms too :P The first version of these characters was from 2010, when I started developing a Bible trivia game (that never saw the light of day). It uses 3D transformations, and it is slightly interactive: you can move the mouse around the screen to see the landscape rotate. This cartoon of a giraffe is based on a different one I made for my daughter around 5 years ago.īased on Landscape by Parham Marandi on Dribbble. The quotes change every 7 seconds, and some of them should probably be Unsettled Tom instead. To draw (especially the tree area) I used clip-path and the drop-shadow filter, so it may not be visible in all browsers.Ī version of the popular Surprised Pikachu meme done with HTML and CSS. This is an illustration of Saint Catherine's castle in Jaen, Spain, the city where I grew up. although my version took a Simpsonesque turn. This cartoon was inspired by this cartoon found online (I don't know the author to credit :S). This is inspired by my own design on Dribbble and it is part of the same series as another cartoon in this challenge (actually I reused some parts and cheated by using SVG for filters). What is interesting about this 3D-looking castle it that it was developed with a single HTML element and using clip-paths and box-shadows. I need to learn a lot about perspective and shadows. This manga character can also be customized via CSS variables (see code line 42). I like it although I'm not a big fan of how the hair ended up looking. And I did a version of Love that transforms to the word Amor on hover (without the animation.)Īnother cartoon from scratch. I like the cubist/minimalist animations by Dennis Hoogstad. It uses CSS variables, so it can be easily customizable. A little tongue-in-cheek, the code in the background is the same as the drawing, so the character is coding itself. even when it doesn't do honor to the original in which it is based on: Swiss Beatz by Rogie (which is 1,000-times more expressive and nicer than mine). I later did a versions with colors trying to change it into a Blue Jay, but none of them are as cool as the original. The one below, and another in which Harry is a bit slimmer as my daughter claimed it didn't really look like Harry Potter.īased on Cardinal by Jord Riekwel on Dribbble. I did two versions of this cartoon from scratch. I added some ears, but I didn't like the result, so I hid them later. This one I started doodling without a clear goal, then the idea of making an Ace Ventura caricature popped up, but I wasn't able to get a good expression.īased on Coffee Dog by Ahsan Kahn on Dribbble. This one was based on a series of cartoons I did for my daughter 5-6 years ago.Īnd yet another from scratch. This cartoon is from scratch and I really like how it turned out, with the condescending look and smirk.Īnother one from scratch. ![]() And as a challenge, I used only semicircles (although I cheated a by stretching them a little.) This was inspired by Ivan Bobrov's hummingbirds on Dribbble ( this and this). In particular, this one is inspired by Faces by Olga Semklo.Īnother one from Dribbble. This one, like some others from the list, is inspired/based on an illustration from Dribbble. This one was done from scratch as part of a CSS game I did last week, and it is the one that triggered the whole drawing project idea. 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. Here are the 100 illustrations/drawings I made in the past 100 days. which lead to an interesting combination of designs and styles, while I tried to find my own. Some of the images are original, and some others are inspired or based on different artists (providing a link to the original in the description for these cases). This article has all images in a single post, as well as links to videos on how they were drawn. ![]() I published a series of 10 posts with 10 images each. ![]() As a personal fun project, I challenged myself to do 100 CSS drawings in 100 days. ![]()
0 Comments
Read More
Leave a Reply. |