100 Days of CSS Illustrations

As a personal fun project, I challenged myself to do 100 CSS drawings in 100 days. I published a series of 10 posts with 10 images each. This article has all images in a single post, as well as links to videos on how they were drawn.

Some of the images were original, and some others were inspired or based on different artists (providing a link to the original in the description for these cases)… which lead to an interesting combination of designs and styles, while I tried to find my own.

Here are the 100 illustrations I made in the past 100 days. Click on the title 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 1: Shark

Day 2: Person thinking

Day 3: Hummingbird

Day 4: Face

Day 5: Monster with balloon

Day 6: Ace Ventura caricature

Day 7: Minimalist Dog

Day 8: Harry Potter

Day 9: Cardinal

Day 10: Profile

Day 11: Coding master

Day 12: Love/Amor

Day 13: Manga character

Day 14: Floating tower

Day 15: Fuzzy monster holding a sign

Day 16: Wiener dog

Day 17: Jaen, Spain

Day 18: Surprised Pikachu meme

Day 19: Giraffe

Day 20: 3D Landscape

Day 21: Angel & Demon

Day 22: Pucca

Day 23: Dog from letters

Day 24: Cartoon character

Day 25: Bender Bending Rodríguez

Day 26: Hello… I guess…

Day 27: Man’s face

Day 28: Plant sprouting

Day 29: Magic castle

Day 30: Leo Messi

Day 31: Dragon radar

Day 32: Line house

Day 33: Dreaming

Day 34: Rainbow cat

Day 35: Coffee

Day 36: Elephant

Day 37: Rooster of Barcelos

Day 38: Warrior

Day 39: Dipper Pines

Day 40: Back to school

Day 41: Pacman pattern

Day 42: Water bottle

Day 43: Face/Hoodie

Day 44: Tipsy

Day 45: Woman

Day 46: El Chapulín Colorado

Day 47: Flower pot

Day 48: Greaser

Day 49: Whale

Day 50: Quixote

Day 51: Yeti

Day 52: Demon

Day 53: Puppy

Day 54: Person wearing an HTML t-shirt

Day 55: Koi fish

Day 56: Peter Griffin

Day 57: Bicycle

Day 58: CSS Mafalda

Day 59: Superman/Clark Kent

Day 60: Missing summer

Day 61: Unimpressed

Day 62: Young woman holding a sign

Day 63: V-neck guy

Day 64: Vote!

Day 65: Mouse

Day 66: Girl holding a balloon

Day 67: Boat

Day 68: Little Death

Day 69: Frankenstein’s Monster

Day 70: Ellipse’s Poodle

Day 71: Dracula

Day 72: Silhouette

Day 73: Gnome

Day 74: Nerdy boy

Day 75: Joke

Day 76: The Good Egg

Day 77: Soccer

Day 78: Cartoon

Day 79: Spooky

Day 80: Nun

Day 81: Coffee in the snow

Day 82: Little Monster

Day 83: Man’s face

Day 84: Woman and leaf

Day 85: Cartoon character (v3)

Day 86: Person coding (v2)

Day 87: Butterfly

Day 88: CSS Witch

Day 89: La Muerte

Day 90: Rabbit in the Hat

Day 91: No-div-ember Coffee Mug

Day 92: Beaver

Day 93: Daydreaming

Day 94: Soccer field

Day 95: Little Red Riding Hood

Day 96: Face

Day 97: Person working

Day 98: Punchline

Day 99: Man

Day 100: Punk

…And some extras

Letter Owl

Ambigram

The end!

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store