100 Days of CSS Illustrations (31-40)
Tags: css, art, html, showdev
Published: 2020-09-13 15:01:54

---
title: 100 Days of CSS Illustrations (31-40)
published: true
description: Days 31-40 of the 100 days of CSS illustrations challenge.
tags: CSS,art,html,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5hu0wjk8nollm04t3zy5.png
series: 100 days of CSS illustrations
---

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](https://codepen.io/collection/AOaOdx).

## Day 31: Dragon radar

An attempt at something with a more "realistic" look. This dragon radar (from Dragon Ball) was done using different shadows, and the button animates a little when pressed.

[![Cartoon of a dragon radar: a rounded object with a screen showing coordinates and blinking lights](https://dev-to-uploads.s3.amazonaws.com/i/ntncptxq1fjhz7wavvd7.png)](https://codepen.io/alvaromontoro/full/NWNwvop)

## Day 32: Line house

Based on [Line houses collection](https://dribbble.com/shots/14022677-Line-houses-collection) by [Boyko](https://dribbble.com/boykopictures) on Dribbble. I liked the simplicity and elegance of the original.

[![Minimalistic drawing of a house using lines](https://dev-to-uploads.s3.amazonaws.com/i/a9kxe7pn8teua0nv6oct.png)](https://codepen.io/alvaromontoro/full/JjXOQNb)

## Day 33: Dreaming

A cartoon from scratch that didn't know where it was going to go. As it grew, I thought about adding a book and curly hair... but it started getting too complicated so I scaled it down and had the hair fading into the background.

[![Cartoon of a woman with the eyes closed, her hair fades with the background](https://dev-to-uploads.s3.amazonaws.com/i/c9c40aorhh83y8s24yt6.png)](https://codepen.io/alvaromontoro/full/mdPpELL)

## Day 34: Rainbow cat

This animated (and equals part hypnotizing, creepy, and mysterious) illustration is based on "[Rainbow Cat](https://dribbble.com/shots/7089208-Rainbow-Cat)" by [Ryan Feerer](https://dribbble.com/ryanfeerer) on Dribbble.

[![Animation of a cat with a rainbow coming out of its mouth](https://dev-to-uploads.s3.amazonaws.com/i/kj1fs9lkpzwsz0tp2j65.gif)](https://codepen.io/alvaromontoro/full/MWyrQEX)

## Day 35: Coffee

Just a cup of coffee drawn with the letters of the word "coffee," and with a small blend mode for the coffee top.

[![illustration with the word coffee displayed in a way to look like a coffee cup... trust me, not my best work... some days are good, some days are bad, and today was a bad cartoon day... but it can be a good day for you! I'll send a DEV gift card to the first person that leaves the comment "Coffe and a gift card? I like it" in the section below](https://dev-to-uploads.s3.amazonaws.com/i/e36fdtgwrtq0vwhrnhmb.png)](https://codepen.io/alvaromontoro/full/GRZQJWp)

## Day 36: Elephant

Linear drawings are 1,000 times easier using SVG (with paths) than just using CSS, and the result is always smoother as the connections are perfect (because there are no connections, it's all a single line.)

[![Minimalistic drawing of an elephant](https://dev-to-uploads.s3.amazonaws.com/i/rpet72pp68s90s37giut.png)](https://codepen.io/alvaromontoro/full/abNqeYw)


## Day 37: Rooster of Barcelos

The [Rooster of Barcelos](https://en.wikipedia.org/wiki/Rooster_of_Barcelos) is one of Portugal's traditional symbols. It is part of a legend in which a dead rooster miraculously saves a man's life. All the dots were placed manually in a single box-shadow.

[![Cartoon of a rooster of Barcelos, a small figure with bright colors that depicts a rooster](https://dev-to-uploads.s3.amazonaws.com/i/rl3j4yxetkgmobptcrl0.png)](https://codepen.io/alvaromontoro/full/GRZxmOR)

## Day 38: Warrior

Based on [Warrier - illustration](https://dribbble.com/shots/6974229-Warrier-illustration) by [Boyko](https://dribbble.com/boykopictures) on Dribbble. I liked the simplicity of the original, which actually translated into simplicity in HTML too (just 6 elements).

[![Cartoon showing an ancient bearded warrior holding a shield and a spear](https://dev-to-uploads.s3.amazonaws.com/i/9i6a29kmlv9auwrm9edu.png)](https://codepen.io/alvaromontoro/full/LYNmjXj)

## Day 39: Dipper Pines

A CSS adaptation of the character Dipper Pines (from [Gravity Falls](https://www.imdb.com/title/tt1865718/)). One day I'll do a full version of this instead of only the upper body.

[![Cartoon of Dipper from Gravity Falls, with the text Dipper Pines underneath it](https://dev-to-uploads.s3.amazonaws.com/i/oaqn3v6nz4hpdcwubqye.png)](https://codepen.io/alvaromontoro/full/xxVWvxZ)

## Day 40: Back to school

Another cartoon from scratch. This time to celebrate that the kids are back to school... maybe I should make a 2020 edition with the kid wearing a mask :P

[![Cartoon of a boy smiling while holding a giant pencil](https://dev-to-uploads.s3.amazonaws.com/i/gozm1d4pgq4ujpwqd6if.png)](https://codepen.io/alvaromontoro/full/jOqxJML)