31 single DIV illustration — the DIVtober collection
Tags: showdev, css, webdev, codepen
Published: 2021-10-31 12:21:42

After [my first CSS drawing](https://dev.to/afif/rate-my-first-css-drawing-51m5) here I am with more CSS art. This time I spent 31 days with the CSS master [Lynn Fisher](https://twitter.com/lynnandtonic) in order to acquire some ancestral powers around the single DIV.

![san goku](https://media.giphy.com/media/109epNnxnLTMha/giphy-downsized.gif)

The challenge was to follow a prompt and create a CSS illustration each day during the whole month of October. Say hello to **\#divtober**

{% twitter 1442895061000155136 %}

<sub>PS: click on **rerun** at the bottom right to run the pen again. Not all of the demos have an infinite animation.</sub>

----

## 1. Fan

Let's start with a Japan style hand fan

{% codepen https://codepen.io/t_afif/pen/JjJVrPj %}

## 2. Watch

You missed the last keynote of Apple? Don't worry, find below the full replay:

{% codepen https://codepen.io/t_afif/pen/xxreJGd %}

## 3. Quick

A quick sword slash! 👀👀
Roronoa is preparing for the next fight.

{% codepen https://codepen.io/t_afif/pen/gORyyPO %}

## 4. Loop

An infinite loop animation. Will they touch each other?

{% codepen https://codepen.io/t_afif/pen/gORJbyL %}

## 5. Tired

I am already tired after only 4 days...

{% codepen https://codepen.io/t_afif/pen/xxrowbV %}

## 6. Hungry

Hurry up and grab a slice!

{% codepen https://codepen.io/t_afif/pen/MWoMLGP %}

## 7. Toxic

Warning!

{% codepen https://codepen.io/t_afif/pen/zYzgbYQ %}

## 8. Growing

Let's take care of the nature

{% codepen https://codepen.io/t_afif/pen/JjyPXoB %}

## 9. Homonym

I choose the word "bat" so here is a bat with a bat

{% codepen https://codepen.io/t_afif/pen/RwZbLeP %}

## 10. Organized

We are already at day 10. Let's take a look at the calendar. 

{% codepen https://codepen.io/t_afif/pen/wvqvJgY %}

Still 21 to go 🥵🥵

## 11. Slice

You like cheese, don't you?

{% codepen https://codepen.io/t_afif/pen/vYJYVrM %}

## 12. Squeak

I don't know the word "squeak" but it's seems to be the sound produced by a mouse.

It's not the case of mine 🤔 (🤭)

{% codepen https://codepen.io/t_afif/pen/GRvgExq %}

## 13. Camouflage

Someone is hidden here. Find him!

{% codepen https://codepen.io/t_afif/pen/wvqapzr %}

## 14. Fancy

{% codepen https://codepen.io/t_afif/pen/qBXOroE %}

## 15. Float

Oh! a letter from my parents. Yes, I am doing this challenge on a lost island.

{% codepen https://codepen.io/t_afif/pen/XWamQQL %}

## 16. Snow

An island where there is no snow...

{% codepen https://codepen.io/t_afif/pen/BadjOJQ %}

## 17. Stack

When the stack overflow.

{% codepen https://codepen.io/t_afif/pen/rNzxgjE %}

## 18. Shine

Say hello to my friend Sunny.

{% codepen https://codepen.io/t_afif/pen/ExvKQqP %}

## 19. Nostalgia

Some nostalgia with Mario. Hover the box to earn coins! Sorry Firefox users, you cannot play the game.

{% codepen https://codepen.io/t_afif/pen/gOxMwXY %}

## 20. Journey

The road to success is hard, long and — responsive 😛 (yes, yes! Adjust your screen size and see the result)

{% codepen https://codepen.io/t_afif/pen/gOxwOLo %}

## 21. Magic

Hover the hat and TADA!!

{% codepen https://codepen.io/t_afif/pen/wvqzLMp %}

Oops, where did the rabbit go again?! And what the hell is that animal 😩

## 22. Critter

Hey, Duo here! Let’s learn some Japanese?

{% codepen https://codepen.io/t_afif/pen/oNeYBJB %}

<sup>Duolingo will not pay me for this ad</sup>

## 23. Loud

{% codepen https://codepen.io/t_afif/pen/WNERGbY %}

## 24. Smelly

A wild Koffing appeared!

{% codepen https://codepen.io/t_afif/pen/RwZKYqJ %}

## 25. Dip

A deep friendship. I meant, a "dip" friendship 😜

{% codepen https://codepen.io/t_afif/pen/LYjWbLm %}

## 26. Spice

I don't think the below are friends...

{% codepen https://codepen.io/t_afif/pen/ExvmgWY %}

## 27. Film

The Star Wars famous scene like you have never seen!

{% codepen https://codepen.io/t_afif/pen/OJjmqZM %}

<sup>For this one I picked one of my old illustration from here: https://dev.to/afif/still-100-css-loaders-for-your-next-project-57hp#the-famous</sup>

## 28. Dots

Meet the Daldots! the new CSS villains

{% codepen https://codepen.io/t_afif/pen/abyWEBe %}

If you don't know the original cartoon, [click here](https://www.google.com/search?q=the+daltons&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiC9Pmsp-3zAhWPkhQKHX-YDdgQ_AUoAXoECAEQAw&biw=1600&bih=747&dpr=1)

## 29. Fruit

What smoothie are you? select your fruit!

{% codepen https://codepen.io/t_afif/pen/ZEJJxgX %}

## 30. Contrast

Tailwind developer VS CSS developer. Choose your road!
Both lead to the same destination but ...

{% codepen https://codepen.io/t_afif/pen/rNzzraL %}

I won't tell which one is which because I am pretty sure not everyone will see it the same way 😜

## 31. Spooky

It's finally over! it was fun but exhausting 😵

{% codepen https://codepen.io/t_afif/pen/ExvvJPR %} 

----

Don't forget to tell me your favorite one 👇. Follow this link if you want to see what the others have made: https://twitter.com/hashtag/divtober?src=hashtag_click&f=live

Wait for more crazier and funny CSS art! I will get back with more superpowers!

![](https://media.giphy.com/media/LdzYJipCrdJqU/giphy-downsized.gif)

Follow me on twitter if you don't want to miss some cool stuff I share there: https://twitter.com/ChallengesCss

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

<center>**OR**</center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)